Vue学习第一天

vue的基本代码:

    var vm = new Vue({

      el: '#app',  //选择器,用来控制vue操作的范围,一般就是全局的,就是根节点

      data: { 

//Vue中不建议操作dom,所有要用到的数据都放在data对象中,要用的时候就直接拿到页面中去用,可以用

{{值的属性名}},

v-cloak="值的属性名"

v-text="值的属性名"

v-show="值的属性名"

      },

methods:{

//所有的事件控制函数都写在这个对象中,处理数据的逻辑,如果要用到页面引用的数据,就用this.值的属性名,就可以获取

//Vue中,只要data中的值发生了改变就会自动进行页面刷新

}

)}

---

vue指令集:

v-cloak:防止闪烁,

v-text:获取文本内容

v-html:会解析HTML标签

v-model:实现数据的双向绑定

v-bind:实现属性的绑定

v-on:实现事件机制

 

v-for:实现数组或者对象的遍历

索引值：{{i}} --- 每一项：{{item}}

v-if:进行判断,决定显示还是隐藏,判断后决定是否删除该节点

这是用v-if控制的元素

v-show:进行判断,决定显示还是隐藏,判断后决定是否在样式中加dispaly:none

   

这是用v-show控制的元素

---

事件修饰符:

.stop 阻止冒泡

.prevent 阻止默认行为

.capture 实现捕获触发事件的机制

.once 只触发一次事件处理函数 

.self 实现只有点击当前元素时候，才会触发事件处理函数,他只会处理自己身上的冒泡,并不会阻止真正的冒泡