Mustache
- 将data中的数据插入到HTML中(通过双大括号{{}})
v-once
-
指令后面不需要跟任何的表达式
-
该指令表示元素和组件只渲染一次,不会随着数据 的改变而 改变
v-html
-
当请求到的数据本身就是一个html代码,直接通过{{}}会将代码一起输出,通过v-html可按照html格式进行解析,并显示相应的内容。
-
指令后面跟上一个string类型
-
会将string的html解析出来并且进行渲染
v-text
- v-text作用和Mustache比较相似:都是用于将数据显示在界面中
- v-text通常情况下,接受一个string类型
v-pre
- 比如下面的代码:第一个h2元素中的内容会被编译解析出来对应的内容,第二个h2元素中会直接显示{{message}}
- 用于跳过这个元素和它子元素的编译过程,用于显示原本的Mustache语法。
v-bind
-
v-bind用于绑定一个或多个属性值,或者向另一个组件传递props值
-
动态绑定某些需要的属性(图片的连接src、网站的链接href、类 、样式)
-
语法糖:直接一个 :
v-bind绑定class
-
对象语法
-
对象语法的含义是:class后面跟的是一个对象
-
<!--用法一:直接通过{}绑定一个类--> <h2 :class="{'active': isActive}">Hello World</h2>
-
<!--用法二:也可以通过判断,传入多个值--> <h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>
-
<!--用法三:和普通的类同时存在,并不冲突 注:会有title/active/line三个类--> <h2 class="title" :class=“[‘active’, 'line']">Hello World</h2>
-
<!--用法四:如果过于复杂,可以放在一个methods或者computed中 注:classes是一个计算属性--> <h2 class="title" :class="classes">Hello World</h2>
-
-
数组语法
-
数组语法的含义是:class后面跟的是一个数组
-
<!--用法一:直接通过[]绑定一个类--> <h2 :class="['active']">Hello World</h2>
-
<!--用法二:也可以传入多个值--> <h2 :class=“[‘active’, 'line']">Hello World</h2>
-
<!--用法三:和普通的类同时存在,并不冲突 注:会有title/active/line三个类--> <h2 class="title" :class=“[‘active’, 'line']">Hello World</h2>
-
<!--用法四:如果过于复杂,可以放在一个methods或者computed中 注:classes是一个计算属性--> <h2 class="title" :class="classes">Hello World</h2>
-
v-bind绑定style
-
我们可以利用v-bind:style来绑定一些CSS内联样式。在写CSS属性名的时候,比如font-size,我们可以使用驼峰式 (camelCase) fontSize 或短横线分隔 (kebab-case,记得用单引号括起来) ‘font-size’
-
对象语法
-
:style="{color: currentColor, fontSize: fontSize + 'px'}"
-
style后面跟的是一个对象类型,对象的key是CSS属性名称
-
对象的value是具体赋的值,值可以来自于data中的属性
-
-
数组语法
-
<div v-bind:style="[baseStyles, overridingStyles]"></div>
-
style后面跟的是一个数组类型,多个值,分割即可
-
计算属性的缓存
- methods和computed看起来都可以实现我们的功能,那么为什么还要多一个计算属性这个东西呢?
- 原因:计算属性会进行缓存,如果多次使用时,计算属性只会调用一次。
计算属性的setter和getter
- 每个计算属性都包含一个getter和一个setter
- 在上面的例子中,我们只是使用getter来读取。
- 在某些情况下,你也可以提供一个setter方法(不常用)。
- 在需要写setter的时候,代码如下:
v-on
- 作用:绑定事件监听器
- 语法糖:@
- 参数问题
- 情况一:如果该方法不需要额外参数,那么方法后的()可以不添加。但是注意:如果方法本身中有一个参数,那么会默认将原生事件event参数传递进去
- 情况二:如果需要同时传入某个参数,同时需要event时,可以通过$event传入事件。
v-on修饰符
- .stop - 调用 event.stopPropagation()。
- .prevent - 调用 event.preventDefault()。
- .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
- .native - 监听组件根元素的原生事件。
- .once - 只触发一次回调。
输入框复用问题
- 当前输入框切换之后显示另一个输入框,但输入框内的内容还是上一个的。
- 这是因为Vue在进行DOM渲染时,出于性能考虑,会尽可能的复用已经存在的元素,而不是重新创建新的元素。
- 如果我们不希望Vue出现类似重复利用的问题,可以给对应的input添加key,并且我们需要保证key的不同
v-if和v-show对比
- v-if当条件为false时,压根不会有对应的元素在DOM中。
- v-show当条件为false时,仅仅是将元素的display属性设置为none而已。
- 当需要在显示与隐藏之间切片很频繁时,使用v-show当只有一次切换时,通过使用v-if
v-for
- 在使用v-for时,推荐给对应的元素或组件添加上一个:key属性。
- key的作用主要是为了高效的更新虚拟DOM
检测数组更新
- 因为Vue是响应式的,所以当数据发生变化时,Vue会自动检测数据变化,视图会发生对应的更新。Vue中包含了一组观察数组编译的方法,使用它们改变数组也会触发视图的更新。
- push()、pop()、shift()、unshift()、splice()、sort()、reverse() 响应式
表单绑定 v-model
- Vue中使用v-model指令来实现表单元素和数据的双向绑定。
- 当我们在输入框输入内容时,因为input中的v-model绑定了message,所以会实时将输入的内容传递给message,message发生改变。
- 当message发生改变时,因为上面我们使用Mustache语法,将message的值插入到DOM中,所以DOM会发生响应的改变。所以,通过v-model实现了双向的绑定。
- 当然,我们也可以将v-model用于textarea元素
v-model原理
-
v-model其实是一个语法糖,它的背后本质上是包含两个操作:
- 1.v-bind绑定一个value属性
- 2.v-on指令给当前元素绑定input事件
-
<input type="text" v-model="message"> <!--等同于--> <input type="text" v-bind:value="message" v-on:input="message = $event.target.value">
v-model:radio
- 当存在多个单选框时
v-model:checkbox
- 复选框分为两种情况:单个勾选框和多个勾选框
- 单个勾选框:
- v-model即为布尔值。
- 此时input的value并不影响v-model的值。
- 多个复选框:
- 当是多个复选框时,因为可以选中多个,所以对应的data中属性是一个数组。
- 当选中某一个时,就会将input的value添加到数组中。
v-model:select
- 和checkbox一样,select也分单选和多选两种情况。
- 单选:只能选中一个值。
- v-model绑定的是一个值。
- 当我们选中option中的一个时,会将它对应的value赋值到mySelect中
- 多选:可以选中多个值。
- v-model绑定的是一个数组。
- 当选中多个值时,就会将选中的option对应的value添加到数组mySelects中
修饰符
- lazy修饰符:
- 默认情况下,v-model默认是在input事件中同步输入框的数据的。
- 也就是说,一旦有数据发生改变对应的data中的数据就会自动发生改变。
- lazy修饰符可以让数据在失去焦点或者回车时才会更新:
- number修饰符:
- 默认情况下,在输入框中无论我们输入的是字母还是数字,都会被当做字符串类型进行处理。
- 但是如果我们希望处理的是数字类型,那么最好直接将内容当做数字处理。
- number修饰符可以让在输入框中输入的内容自动转成数字类型:
- trim修饰符:
- 如果输入的内容首尾有很多空格,通常我们希望将其去除
- trim修饰符可以过滤内容左右两边的空格