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:实现事件机制
<input type="button" value="提交" v-on:click="事件处理函数名">
v-for:实现数组或者对象的遍历
<p v-for="(item, i) in list">索引值:{{i}} --- 每一项:{{item}}</p>
v-if:进行判断,决定显示还是隐藏,判断后决定是否删除该节点
<h3 v-if="flag">这是用v-if控制的元素</h3>
v-show:进行判断,决定显示还是隐藏,判断后决定是否在样式中加dispaly:none
<h3 v-show="flag">这是用v-show控制的元素</h3>
事件修饰符:
.stop 阻止冒泡
.prevent 阻止默认行为
.capture 实现捕获触发事件的机制
.once 只触发一次事件处理函数
.self 实现只有点击当前元素时候,才会触发事件处理函数,他只会处理自己身上的冒泡,并不会阻止真正的冒泡