模板语法（Mustache）
如果我们希望把数据显示到模板中，使用最多的语法是模板语法（双括号）的文本插值。
- 模板语法里面可以是data中返回对象的属性，当这个属性值发生变化时，对应的内容也会发生相应的改变
- 模板语法里面也可以是一个JavaScript的表达式
<div>{{sum}}</div> //data里面的属性
<div>{{num*2}}</div> // js表达式
<div>{{sum>2?sum:num}}</div> //支持三元表达式
<div>{{getsum()}}</div> //也支持调用methods里面的方法Vue指令
1. v-once
- v-once用于指定元素或者组件只渲染一次
- 渲染后当数据发生改变时，元素或者组件以及其所有的子元素将视为静态内容并且跳过
- 这个适用于一些不会发生改变的元素，是一个性能优化的方案
- 如果是子节点也只会渲染一次
<div v-once @click="sum++">{{sum}}</div> //点击不会发生改变
<div @click="sum++">{{sum}}</div> //点击会发生改变2. v-text
- 用于更新元素的文本内容
- 和模板语法作用是一样的
- 但是会覆盖元素中原本的内容，模板语法则不会，只占自己的坑位
<span v-text="sum"></span>
//两者一样的效果
<span>{{sum}}</span>
3. v-html
- 有和v-text一样的功能，区别就是v-html可以识别html标签，会对其进行解析
<div v-html="info"></div>
//我们在data里面定义一个数据
info: `<h1>v-html可以是识别html标签 </h1>`
4. v-pre
-
跳过不需要编译的节点，加快编译的速度
-
用于跳过元素和它的子元素的编译过程
<div v-pre>{{sum}}</div>
5.v-cloak
- 这个指令保持在元素上知道关联组件实例结束编译
-
和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到组件实 例准备完毕。
//css代码
<style>
[v-cloak] {
display:none
}
</style>
<template>
<div v-cloak>
{{message}}
</div>
</template><div> 不会显示，直到编译结束。
6. v-bind
- 可以用来动态绑定属性
- 可以用来向另一个组件传递props值
- 可以简写成 一个 ：的形式
如何来进行动态绑定
比如动态绑定a元素的href属性
比如动态绑定img元素的src属性
//完整写法
<a v-bind:href="href"></a> <img v-bind:src="src" alt="">
//语法糖写法
<a :href="href"></a> <img :src="src" alt="">下面介绍常用的动态绑定 class 和style
先介绍动态绑定class
动态绑定class除了最常用的有两种写法
第一种对象写法
<!-- 常用的绑定 -->
<div :class="class1"></div>
<!-- 对象绑定 -->
<div :class="{class2: true, class3: false}"></div>
(属性值的布尔值动态决定是否添加这个类名)第二种数组写法
<!-- 直接传入一个数组 -->
<div :class="[class1,class2,class3,'class4']"></div>
<!-- 数组中也可以使用三元表达式 -->
<div :class="[class1,class2,{class3:isActive},'class4']"></div>
<!-- 数组中也可以用对象的写法 -->
<div :class="[class1,class2,isActive? '' : class3, 'class4']"></div>下面介绍动态绑定style
值得注意的是 CSS属性名驼峰式或短横线分割来命名
动态绑定style同样有两种方法
第一种对象方式
<!-- 基本使用传入一个对象，并且对象内容都是确定的 -->
<div :style="{color:'red',fontSize:'30px',background-color:'blue'}">{{sum}}</div>
<!-- 变量数据，传入一个对象，值会来自于data -->
<div :style="{color:color,font-size:fs+'px',background-color:'blue'}">{{sum}}</div>
<!-- 对象数据，直接在data中定义好对象在这里使用 -->
<div :style="styleObj">{{sum}}</div>第二种数组方式
<!-- 将多个样式对象应用到同一个元素上 -->
<div :style="[styleObj,styleObj2]">{{sum}}</div>动态绑定属性
之前我们无论绑定src、href、class、style，属性名称都是固定的，在某些情况写属性名称是变化的，我们可以用:[属性名]='值' 的格式来定义
<!-- 属性名称是动态的 -->
<div :[name]="value">{{message}}</div>7.v-on绑定事件
v-on的基本使用
我们可以使用v-on来监听一下点击事件
下面是一些基本使用方法
<!-- 绑定一个表达式 -->
<button v-on:click="sum++">{{sum}}</button>
<!-- 绑定一个methods的方法 -->
<button v-on:click="btnClick">{{sum}}</button>
<!-- 语法糖形式 -->
<button @click="sum++">{{sum}}</button>
<button @click="btnClick">{{sum}}</button>
<!-- 绑定一个其他事件 -->
<div @mousemove="mouseMove"></div>
<!-- 绑定多个事件,以传入一个对象的形式-->
<div v-on="{mousemove:mouseMove , click:btnClick}"></div>
当通过methods中定义方法，以供@click调用时，需要
注意参数问题
：
情况一：如果该方法不需要额外参数，那么方法后的()可以不添加。
但是注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去
情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。
//event对象默认传过去
<div @mousemove="mouseMove"></div>
// $event固定写法
<button @click="btnClick($event,message)">{{sum}}</button>
methods: {
// 会默认收到一个参数，不用传参
mouseMove(event) {
console.log(event);
},
// 当又想收到默认参数，又想收到传递的参数
btnclick($event, message) {
console.log($event, message)
}
}v-on支持修饰符，修饰符相当于对事件进行了一些特殊的处理：
例如下面这么使用
//阻止事件冒泡
<button @click.stop="btnClick($event,message)">{{sum}}</button>条件渲染
某些情况下，我们需要根据当前的条件决定某些元素或组件是否渲染，这个时候我们就需要进行条件判断了
Vue提供了四个指令
v-if
v-else-if
v-else
v-show
下面对这四个指令进行介绍
v-if v-else-if v-else用法就像js语句的if else else if 语句
<input type="text" v-model.number="num">
<div v-if="num>10">{{num}}</div>
<div v-else-if="num>6">{{num}}</div>
<div v-else-if="num>4">{{num}}</div>
<div v-else>{{num}}</div>v-if的渲染原理
v-if是惰性的
当条件为false时，其判断的内容完全不会被渲染或者会被销毁掉
当条件为true时，才会真正渲染条件块中的内容
v-show
v-show的用法和v-if用法基本一致
<input type="text" v-model.number="num">
<div v-if="num>10">{{num}}</div>
<div v-show="num>10">{{num}}</div>v-if和v-show的区别
v-show是不支持template
v-show不可以和v-else一起使用
v-show元素无论是否需要显示到浏览器上，它的DOM实际都是有渲染的，只是通过CSS的display属性来进行切换
v-if当条件为false时，其对应的元素压根不会被渲染到DOM中
如果我们的元素需要在显示和隐藏之间频繁的切换，那么使用v-show
如果不会频繁的发生切换，那么使用v-if
列表渲染
当我们从服务器拿到一组数据时， 对其进行渲染
往往我们使用v-for进行完成
v-for的基本格式是
"item in 数组"
：
数组通常是来自
data或者prop
，也可以是其他方式
item是我们给每项元素起的一个
别名
，这个别名可以自定来定义
如果我们需要索引，可以使用格式： "(item, index) in 数组"
<ul>
<li v-for="item in arr" :key="item.id">{{item}}</li>
<li v-for="(item,index) in arr" :key="item.id">{{item}}-{{index}}</li>
</ul>v-for也支持遍历对象 格式"item in 对象"，并且支持有一二三个参数：
一个参数： "value in object";
二个参数： "(value, key) in object";
三个参数： "(value, key, index) in object";
<ul>
<li v-for="(value,key,index) in obj" :key="index">{{value}}-{{key}}-{{index}}</li>
</ul>
v-for同时也支持数字的遍历：
每一个item都是一个数字
<ul>
<li v-for="item in 10" :key="item">{{item}}</li>
</ul>注意的是用v-for渲染需要给它绑定一个key
key属性主要用在Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes
计算属性compute
在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示，这时候就可以用使用compute计算属性，下面介绍一下用法
compute是跟data和methods属性平级的一个属性
类型：
{ [key: string]: Function | { get: Function, set: Function } } 可以写成一个函数形式，也可以写成一个对象形式
computed:{
//最常见的是第一种用法
getNum(){
return 1+1
},
// 第二种比较少用
getSum:{
get(){
return this.sum+this.num
},
set(value){
console.log(value)
}
}
}
compute计算属性和methods方法相比具有缓存性，多次使用时，不需要像methods方法每次都需要重新调用，当compute计算属性所依赖的属性值没发生改变时，就在缓存中取值，性能更高
监听器watch
开发中我们在data返回的对象中定义了数据，这个数据通过
插值语法等方式绑定到template
中
当数据变化时，template会自动进行更新来显示最新的数据
但是在某些情况下，我们希望在代码逻辑中监听某个数据的变化，这个时候就需要用
侦听器watch
来完成了
watch是跟data和methods属性平级的一个属性
类型：{ [key: string]: string | Function | Object | Array}
watch:{
// 函数形式，能拿到两个参数(新值和旧值)
sum(newVal,oldVal){
console.log(newVal,oldVal)
},
// 对象形式
info:{
handler(newVal,oldVal){
console.log(newVal,oldVal)
}
},
// 刚开始就立即执行一次
immediate:true,
// 开启深度监视
deep:true
}注：为默认情况下，watch只是在侦听info的引用变化，对于内部属性的变化是不会做出响应的： 这个时候我们可以使用一个选项deep进行更深层的侦听
另外一个属性，是希望一开始的就会立即执行一次：这个时候我们使用immediate选项
也可以传一个数组，他们会被逐一调用
info:[
function handler2(newVal,oldVal){
console.log(newVal,oldVal)
},
{
handler(newVal,oldVal){
console.log(newVal,oldVal)
}
}
]还有一种方法就是使用$watch 的API
我们可以在created的生命周期中，使用 this.$watchs 来侦听
第一个参数是要侦听的源；
第二个参数是侦听的回调函数callback；
第三个参数是额外的其他选项，比如deep、immediate；
created() {
this.$watch('info', function (newVal, oldVal) {
console.log(newVal, oldVal)
}, {
deep: true,
immediate: true
})
},
扫一扫
4725
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
