- v-cloak指令:
- 解决插值表达式闪烁的问题
- 在元素上设置v-cloak，需要手动设置style display。当数据加载完毕后，元素的v-cloak属性消失
- v-text指令:
- 功能等同于插值表达式
- 默认v-text没有闪烁问题
- v-text会覆盖元素中原本的内容，但是插值表达式只替换自己的这个占位符，不会把整个元素的内容清空
- v-html指令：把元素的内容当html处理
- v-bind: 指令
- VUE提供用于绑定的属性的指令
- 使用 ”:“ 是"v-bind:"的简写
- 可以在v-bind值中写合法的js表达式
- v-on: 指令
- 绑定事件的指令
- VM中定义methods属性定义了当前vue实例所有的可用的方法
- 简写：”@“
- 代码示例
<body>
<div id="app">
<p>{{ msg }}</p>
<!-- v-cloak -->
<p v-cloak>{{msg}}</p>
<!-- v-text -->
<p v-text="msg"></p>
<!-- v-html -->
<p v-html="msg2"></p>
<!-- v-bind: -->
<button v-bind:title="btnTitle + 'haha'">点我</button>
<input type="button" :title="btnTitle + 'v-bind简写'" value="点我22"/><br/>
<!-- v-on指令 -->
<input type="button" v-on:mouseover="btn_click" value="haha"/>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
msg : "hello",
msg2: "<h1>你好哈</h1>",
btnTitle: '点我看看222'
},
methods:{
btn_click: function(){
alert('hello');
}
}
})
</script>
</body>
-
在VM实例中，如果想要调用data中的数据或methods方法，必须通过this.属性名或this.方法名来进行访问，这里的this就表示我们new出来的VM实例对象
-
VM实例会监听自己data中所有数据的改变，只要数据一发生变化，就会把新的数据从data上同步到页面中去。好处：程序员只需要关心数据，不需要考虑如何重新渲染页面
-
使用（）=》{} 替换掉function(){}方式，这样function内部中的this就跟外部的this使用同一个对象
-
vue事件修饰符
- .stop 阻止冒泡
- .prevent 阻止默认事件,如a标签的href点击事件
- .capture 添加事件侦听器时使用事件捕获模式
- .self 只当事件在该元素本身(比如不是子元素)触发时触发回调，只会阻止自己身上冒泡行为的触发，并不会阻止其他的冒泡行为
- .once 事件只触发一次
-
v-model指令
- v-bind: 只能实现数据的单向绑定， 只能从M自动绑定到V，无法实现数据的双向绑定
- v-model 可以实现双向绑定，能从M自动绑定V，也可以实现V自动绑定到M。只能应用到表单元素上
-
代码示例
<div id="app">
<!-- .stop 阻止冒泡，只触发当前事件-->
<!-- <div class="div1" @click="cliDiv1">
<input type="button" value="点我" @click.stop="cliBtn">
</div> -->
<!-- .prevent 阻止标签的默认事件 -->
<!-- <div class="div1" @click="cliDiv1">
<a href="http://www.baidu.com" @click.prevent="cliBtn">点击链接</a>
</div> -->
<!-- 使用事件捕获模式 -->
<!-- <div class="div1" @click.capture="cliDiv1">
<input type="button" value="点我" @click="cliBtn">
</div> -->
<!-- .self 只有触发到元素本身时，元素上的事件才被触发 -->
<div class="div1" @click.self="cliDiv1">
<input type="button" value="点我" @click="cliBtn">
</div>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var vm = new Vue({
el : '#app',
data : {
msg : 'hello'
},
methods: {
cliBtn(){
console.log("点击了btn....");
},
cliDiv1(){
console.log("点击了div1....");
}
}
});
</script>
网友评论