Vue：idea编写Vue程序

目录

一、环境布置

 二、第一个Vue程序

三、v-指令 

1、v-bind：绑定

2、v-if，v-else，v-else-if：判断

3、v-for：循环

4、v-on：事件

5、v-model：双向绑定

 四、组件

五、通信

六、计算属性

七、内容分发

---

一、环境布置

首先安装vue插件

cdn vue.js：主要导入在我们前端页面上

 二、第一个Vue程序

    
    
    




    {{message}}

 浏览器的控制台输入：

vm.message="hello"

可对浏览器页面上显示的结果进行修改 

三、v-指令 

1、v-bind：绑定

v-bind和{{}}差不多的意思

v-bind:title    鼠标放上信息显示

    
    
    




    我是谁！

2、v-if，v-else，v-else-if：判断

v-if，v-else

    
    
    




    
Yes
    
No

v-if，v-else，v-else-if

    
    
    




    
A
    
B
    
C
    
D

3、v-for：循环

不带索引 

    
    
    




    

        {{item.message}}
    

带索引 

    
    
    




    

        {{item.message}},{{index}}
    

4、v-on：事件

各种事件

    
    
    





    click me

5、v-model：双向绑定

是两边的messge信息绑定在一起

input：text：

    
    
    





     {{message}}

 input：radio：

    
    
    





     男
     女

    选中了:{{message}}

select：

disabled属性：不能被选择

    
    
    





    
        --请选择--
        A
        B
        C
    

    选中了:{{message}}

 四、组件

类似于Thymeleaf的th:fragment

初体验：

实现组件中数据的动态：

五、通信

我们vue推荐使用的通讯工具是Axios，当然使用JQuery的ajax也行。

Axios使用之前如果是个人版的idea，需要将idea的ES改成ES6（idea默认使用ES5.1，因为绝大多数的都用ES5）

Axios的cdn：

 data.json文件

{
  "name": "feiyue",
  "level": 99,
  "age": 18,
  "skillList": [
    {
      "id": 1,
      "name": "天下无双",
      "damage": "123"
    },
    {
      "id": 2,
      "name": "雌雄难辨",
      "damage": "182"
    },
    {
      "id": 3,
      "name": "暗流涌动",
      "damage": "89"
    }
  ]
}

浏览器控制台打印

取出json并将其贴在网页上

    
    
    
    




    {{info.name}}
    {{info.level}}

六、计算属性

计算出来的结果保存在属性中，其实就类似于缓存的一种概念

    
    
    




    
    {{getTimesChange()}}
    {{getTimesForever}}

computed与methods属性类似，只是methods 中的方法是通过方法调，而 computed中的方法是通过属性调。当computed与methods方法的方法名相同时，优先调用methods中的方法。

在说一下computed的计算属性的问题，只有在刷新页面和方法中的值发生改变的时候，方法的返回值才会发生改变，不然是不变的（return Date.now();）。有点类似与同一个请求的返回数据是一样的，原因是放在了缓存中。

七、内容分发

v:bind: 可以缩写为一个：

v-on: 可以缩写为一个@

内容分发主要的概念就是一个插槽的概念，也就是，类似于组件之间的一个调用，让组件可以组合。

一个组件如果需要外部传入简单数据如数字、字符串等等的时候，可以使用property；如果需要传入js表达式或者对象时，可以使用事件；如果希望传入的是HTML标签，那么使用内容分发就再好不过了。

    
    
    



    
        //通过slot="todo-title"，绑定到todo组件的指定插槽中，并将代码整合
        
        //通过slot="todo-items"，绑定到todo组件的指定插槽中，并将代码整合
        
    

八、自定义事件

见名知意，就是做一个自定义一个事件，可以让v-on:绑定。

使用this.$emit(‘自定义事件名’,参数)

    
    
    



    
        
        //从绑定的事件中获取i