1.v-once
让界面不要跟着数据变化，组件和元素只渲染一次
<!--这里就是MVVM中的View-->
<div id="app">
<p v-once>原始数据: {{ name }}</p>
<p>当前数据: {{ name }}</p>
</div>
<script>
// 这里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
data: {
name: "李",
}
});
</script>
2.v-cloak
- 数据渲染之后自动显示元素
- 类似于利用v-cloak配合 [v-cloak]:{display: none}默认先隐藏未渲染的界面
<div id="app">
<p v-cloak>{{ name }}</p>
</div>
<script src="js/vue.js"></script>
<script>
// 这里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
data: {
name: "李",
}
});
</script>
3.v-text
插值方式，不会解析html文本，会覆盖原有的内容
<!--v-text的方式: 也不会解析HTML-->
<p v-text="msg">++++++++</p>
<script>
let vue = new Vue({
el: '#app',
data: {
name: "李",
msg: "<span>我是span</span>"
}
});
</script>
4.v-html
插值方式，会解析html文本，会覆盖原有内容，类似于innerHTML
<!--v-html的方式: 会覆盖原有的内容-->
<p v-html="name">++++++++</p>
<!--v-html的方式:会解析HTML-->
<p v-html="msg">++++++++</p>
<script>
let vue = new Vue({
el: '#app',
data: {
name: "李",
msg: "<span>我是span</span>"
}
});
</script>
5.v-if
- 条件渲染：如果为true，则会渲染元素，反之；
- 特点：条件不满足不会创建这个元素;
- v-if可以从模型中获取数据,v-if也可以直接赋值一个表达式;
- v-else指令可以和v-if指令配合使用,当v-if不满足条件时就执行v-else就显示v-else中的内容;
- v-else-if可以和v-if指令配合使用, 当v-if不满足条件时就依次执行后续v-else-if, 哪个满足就显示哪个
<div id="app">
<!--<p v-if="show">我是true</p>-->
<!--<p v-if="hidden">我是false</p>-->
<!--<p v-if="true">我是true</p>-->
<!--<p v-if="false">我是false</p>-->
<!--<p v-if="age >= 18">我是true</p>-->
<!--<p v-if="age < 18">我是false</p>-->
<!--<p v-if="age >= 18">成年人</p>-->
<!--<p>中间的内容</p>-->
<!--<p v-else>未成年人</p>-->
<p v-if="score >= 80">优秀</p>
<p v-else-if="score >= 60">良好</p>
<p v-else>差</p>
</div>
<script>
let vue = new Vue({
el: '#app',
data: {
show: true,
hidden: false,
age: 17,
score: 50
}
});
</script>
6.v-show
- v-show和v-if的能够一样都是条件渲染, 取值为true就显示, 取值为false就不显示
- 区别：
- v-if: 只要取值为false就不会创建元素
- v-show: 哪怕取值为false也会创建元素, 只是如果取值是false会设置元素的display为none
<div id="app">
<p v-show="show">我是段落1</p>
<p v-show="hidden">我是段落2</p>
</div>
<script>
let vue = new Vue({
el: '#app',
data: {
show: true,
hidden: false,
age: 18
}
});
</script>
7.v-for
相当于js中的for循环
<body>
<!-- mvvm中的view -->
<div id="app">
<ul>
<li v-for="(value,index) in list">{{index}}</li>
</ul>
<ul>
<li v-for = "(value,key) in student">{{key}}---------{{value}}</li>
</ul>
</div>
</body>
<script>
let vue = new Vue({
el: '#app',
data: {
list: ["张三","里斯","王五","赵六"],
student:{
name:"小明",
age:18,
adress:"sehngzheng"
}
}
})
</script>
8.v-bind
给任意标签的任意属性绑定数据
<input type="text" v-bind:value = "inputVaule">
<!-- v-bind可以省略 -->
<input type="text" :value = "inputVaule">
<!-- 可以绑定合法的js表达式 -->
<input type="text" :value = "student.age + 1">
绑定类名
<!-- 将类名放到数组中，还需要利用引号将类名括起来才会去style中查找 -->
<p :class="['color','size']">锻炼测试</p>
<!-- 支持三目运算符 -->
<p :class="['color',flag ? 'active' : '','size']">锻炼测试</p>
<!-- 可通过对象决定是否需要绑定 -->
<p :class="['color',{'active' : false}]">锻炼测试</p>
<p :class="obj">对象绑定测试</p>
绑定样式
<!-- 样式绑定 -->
<p :style="{color: 'royalblue', 'background-color': 'seagreen'}">我是样式绑定测试</p>
<!-- 绑定样式对象 -->
<p :style="styleObj">我是样式绑定测试</p>
<!-- 绑定多个样式对象 -->
<p :style="[styleObj,styleObj2]">我是样式绑定测试</p>
9.v-on
- 指定事件名称的时候不需要写on
- 复制的时候必须赋值一个回调函数的名称
<button v-on:click = "onClick">点我有惊喜</button>
<button @click = "onClick">@@@点我有惊喜</button>
常见修饰符：
<!-- once:事件指挥触发一次 -->
<button v-on:click.once = "onClick">once</button>
<!--.prevent 调用 event.preventDefault() 阻止默认行为 -->
<a href="http://www.baidu.com" v-on:click.prevent = "onClick">a 标签prevent</a>
<!--.stop 阻止事件冒泡 -->
<div class="a" @click = "aClick">
<div class="b" @click.stop = "bClick">
<div class="c" @click.stop = "cClick"> </div>
</div>
</div>
<!-- 如果想让回调函数只有当前元素触发，那么可以使用.self -->
<div class="a" @click = "aClick">
<div class="b" @click.self = "bClick">
<div class="c" @click = "cClick"> </div>
</div>
</div>
<!-- 默认情况事件冒泡，如果想变成事件捕获，那么就需要使用.capture -->
<div class="a" @click.capture = "aClick">
<div class="b" @click.capture = "bClick">
<div class="c" @click.capture = "cClick"> </div>
</div>
</div>
按键修饰符
<!-- 按键修饰符 -->
<input type="text" @keyup.f2 = "cClick">
<!-- 自定义按键修饰符 -->
<!-- Vue.config.keyCodes.f2 = 112 -->
10.自定义全局指令
<!-- 自定义全局指令 -->
<p v-color>自定义指令的使用测试</p>
<input type="text" v-focus>
/*
参数一：指令名称
参数二：对象
指令可以在不同的生命周期执行
bind： 指令bind到元素上的时候执行
inserted：元素被添加到父元素的时候执行
*/
Vue.directive("color",{
//el就是被绑定的元素
bind:function(el){
el.style.color = 'red';
}
});
Vue.directive("focus",{
//el就是被绑定的元素
inserted:function(el){
el.focus();
}
})
<!-- 自定义指令传参 -->
<p v-color = "'green'">自定义指令的使用测试</p>
Vue.directive("color",{
//el就是被绑定的元素
bind:function(el,obj){
el.style.color = obj.value;
}
});
11.自定义局部指令
let vue = new Vue({
el: '#app',
data: {},
methods:{},
directives:{
"color":{
bind:function(el,obj){
el.style.color = obj.value;
}
}
}
})
