Vue.js v2.5.17学习教程_01：从入门到精通

Vue.js

每天进步一点点，你终将会变成你想要成为的样子

---

Vue.js 2.0

---

VueDemo_01：初识vue

    
    
    
    


    

        
{{ message }}
        
    

new Vue:创建一个Vue实例（对象），可以起名字也可以不起
el:element 的缩写 这里面放‘选择器 ’
data:data 也是固定的名字 这里面放置数据
v-model="message":指令 v-model 用于数据绑定
{{ message }}:取出数据

---

VueDemo_02：data

data:数据类型可以有很多种...

v-for指令：循环取值
v-for="(value,index) in arr">{{value}} {{index}}：
v-for="(json,index,key) in jsonObj">{{json}} {{index}}{{key}}:
value:data中的数据名称
index:索引
key:json的key

    

        
        

            
{{value}} {{index}}
        
        

            
{{json}} {{index}}{{key}}
        
    

说明一下：vue 2.x开始 删除了 v-for 指令当中的 $index如果需要使用 需要在 v-for 指令当中添加需要的参数（就是要按照上面的格式书写）

---

VueDemo_03：Vue中的事件

v-on:click:点击事件

    
    

        
        

            
{{value}}
        
    

methods:这个参数也是固定的 事件方法在这里面定义

---

VueDemo_04：一个添加的点击事件

因为数据是双向绑定的，所以在点击按钮之后页面上展示的数组的数据也会随之增加

    

        
        

            
{{value}}