笔记来源：拉勾教育 - 大前端就业集训营
文章内容：学习过程中的笔记、感悟、和经验
Vue基础指令
Vue指令
指令本质上来说就是Html自定义属性
Vue指令就是以v-开头的自定义属性
内容处理指令
v-once
使元素内部差值表达式之生效一次，不随着数据的变化而变化
<body>
<div id="app">
<!-- 对比v-once区别 -->
<p>我会随数据变化而变化，数据：{{one}}</p>
<p v-once>我不会随数据变化而变化，因为我设置了v-once，数据：{{one}}</p>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
// 后期我们在控制台修改one数值发现只有第一个p变化了，第二个p不会变化
one: '1'
},
methods: {}
})
</script>
</body>
v-text
将元素内容整体替换为纯文本数据，这里的值可以是vue数据也可以是固定数据，但是一般情况下都会使用vue数据
<body>
<div id="app">
<!-- 对比v-text,第二个p因为设置了v-text所以内部文本被替换掉 -->
<p>如果你看见我说明没被替换</p>
<p v-text="content">如果你看见我说明没被替换</p>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
content: '内容文本'
},
methods: {}
})
</script>
</body>
注意：v-text只能设置文本内容，内部无法书写html标签，就算书写也会被转换为文本内容
v-html
元素内容整体被替换为Html文本
<body>
<div id="app">
<!-- 对比v-text和v-html -->
<!-- v-text无法添加html解构 -->
<p v-text="content"></p>
<!-- v-html可以将标签结构生成html解构,打开调试工具可以发现这个p元素里面还嵌套了一层p -->
<p v-html="content"></p>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
content: '<p>内容文本<p>'
},
methods: {}
})
</script>
</body>
属性绑定
v-bind - 绑定指令
用于绑定Html属性
<body>
<div id="app">
<!-- 把元素的title属性绑定content数据 -->
<p v-bind:title="content">我设置了v-bind，打开也米娜看一下p的属性吧</p>
<!-- 使用v-bind简写 -->
<p :title="content">我设置了v-bind，打开也米娜看一下p的属性吧</p>
<!-- v-bind内部可以使用表达式 -->
<p :class="'num' + 1 + 2 + 3">v-bind内部使用表达式</p>
<p :class="one + tow">v-bind内部使用表达式，表达式使用数据</p>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
content: 'title属性',
one: '1',
tow: 2
},
methods: {}
})
</script>
</body>
注意：v-bind：属性名可以简写为：属性名
同时绑定多个数据
<body>
<div id="app">
<!-- 同时绑定多个数据 -->
<p v-bind="bind">使用v-bind同时绑定多个属性</p>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
// 创建一个多个属性的v-bind数据
bind: {
id: 'one',
class: "tow",
// 因为js不能识别-，所以使用引号包裹起来
'data-title': '这是data-title'
}
},
methods: {}
})
</script>
</body>
v-bind绑定class
通过v-bind绑定的class可以和普通方式书写的class共存
<body>
<div id="app">
<!-- 可以同时存在普通class和绑定v-bind绑定class -->
<p class="one" :class="cls">我会有两个类名，一个是one，另一个是动态的</p>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
cls: 'tow'
},
methods: {}
})
</script>
</body>
注意事项
- 绑定class不可以在
：class内部只能绑定一个数据，如果想同时绑定多个class，可以把多个class同时写在一个数据内（以空格隔开） ：class内部可以写三元表达式用于判断条件
class绑定的特殊处理方式
class绑定支持数组和对象方式绑定
<body>
<div id="app">
<!-- 使用对象方式绑定类名，内部为 类名：布尔值 ，布尔值可以绑定data数据，根据数据更改类名是否生效-->
<p :class="{ x: true, y: isY, z: isZ, 'data-a': true,}">以对象方式绑定类名</p>
<!-- 使用数组方式绑定类名，效果和上面一样，注意静态类名要使用冒号包裹（'data-a'和‘x’），否则就会在data中寻找,动态类名直接写名字即可（classB） -->
<p :class="['x', {y: isY}, {z: isZ}, 'data-a', classB]">以数组方式绑定类名</p>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
isY: true,
isZ: false,
classB: 'b'
},
methods: {}
})
</script>
</body>
v-bind绑定style
使用v-bind绑定的style可以和行内style共存
<body>
<div id="app">
<!-- 绑定style属性 -->
<p :style="style" style="width: 100px;">绑定style属性</p>
<!-- 同时绑定多个数据，我们可以设置一个公共样式提取出来，使用数组绑定style -->
<p :style="[baseStyle, style1]">绑定公共样式和style1</p>
<p :style="[baseStyle, style2]">绑定公共样式和style2</p>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
style: {
width: '200px',
height: '200px',
backgroundColor: '#ccc'
},
// 设置公共样式
baseStyle: {
width: '100px',
height: '100px'
},
// 设置独立样式
style1: {
'background-color': 'red'
},
style2: {
'background-color': 'blue'
}
},
methods: {}
})
</script>
</body>
注意事项
- 如果发生设置形同属性，
:style会覆盖style属性 - 单属性例如background-color可以采用引号包裹或者驼峰命名方式书写
渲染指令
v-for - 结构创建
用于遍历数据从而渲染结构，常用数组和对象都可以遍历
<body>
<div id="app">
<!-- 使用v-for -->
<ul>
<!-- 遍历one数组，使用差值表达式把item设置为li内容 -->
<!-- (item, index) => (值，索引值) -->
<li v-for="(item, index) in one">{{item}},索引为{{index}}</li>
</ul>
<ul>
<!-- 遍历tow对象，使用差值表达式把item设置为li内容 -->
<!-- (item, key, index) => (值，属性名, 索引值) -->
<li v-for="(item, key, index) in tow">{{item}},属性名为{{key}}索引为{{index}}</li>
</ul>
<ul>
<!-- 如果我们只是想创建多个元素而不使用data，直接写数值即可，内部也可以使用索引值 -->
<li v-for="item in 5">{{item}}</li>
</ul>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
// 创建对象和数组
one: [1, 2, 3, 4, 5],
tow: {
name: 'cwn',
age: 19,
sex: 1
}
}
})
</script>
</body>
v-for指令进阶
-
使用v-for，应该是种制定唯一的key属性，可以提高渲染性能并避免问题
<body> <div id="app"> <ul> <!-- 给v-for添加key属性提高渲染效率，并且可以避免很多问题，key属性用于给当前元素添加唯一的标示 --> <li v-for="item in list" :key="item.id">{{item.value}}</li> </ul> </div> <script> const vm = new Vue({ el: '#app', data: { // 在创建v-for数据的时候，建议添加一个id属性 list: [{ id: 1, value: 2 }, { id: 2, value: 3 }, { id: 3, value: 4 }, { id: 4, value: 2 }, ] } }) </script> </body> -
通过
<template>标签设置模版占位符，可以将部分元素和内容作为整体操作<body> <div id="app"> <!-- template是一个模版占位符号，并不是真实的元素，并且不会渲染，所以不需要设置：key --> <template v-for="item in list"> <!-- 我们可以在占位符内部书写大段结构与，系统会把这一段结构当做一个整体带入v-for中 --> <span>{{item}}</span><br> </template> </div> <script> const vm = new Vue({ el: '#app', data: { list: [1, 2, 3] } }) </script> </body>
v-show - 控制现实和隐藏
用于控制元素的显示和隐藏，适用于现实和隐藏的元素频换切换时使用
v-show接受布尔值（表达式也要返回布尔值），true表示显示，flase表示隐藏，布尔值可以通过data获取
<body>
<div id="app">
<!-- 使用v-show -->
<!-- 直接给值 -->
<p v-show="true">文本内容1</p>
<p v-show="false">文本内容2</p>
<!-- 使用表达式 -->
<p v-show="11 > 12">文本内容1</p>
<p v-show="11 < 12">文本内容2</p>
<!-- 使用数据 -->
<p v-show="a">文本内容1</p>
<p v-show="b">文本内容2</p>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
a: true,
b: false
}
})
</script>
</body>
注意事项
- template模版无法使用v-show指令，因为v-show原理是切换display属性设置显示隐藏，而template不是一个真实存在的元素
v-if - 条件判断
用于根据条件添加或者移除元素结构
- 语法形式和if条件分支语句很类似，原理基本相同，也可以使用
else-if和else分支 - 和v-show一样也可以使用data中的数据和表达式
注意事项
-
v-show是控制显示和隐藏，元素一直都存在，v-if是控制元素的添加和移除，如果为flase则元素就不会存在，所以两者原理完全不一样
-
给使用的v-if同类型元素绑定不同的key，可以避免因为vue的逻辑产生的问题
<body> <div id="app"> <!-- 使用v-if的时候添加:key可以避免很多问题 --> <div v-if="type === 'username'" :key="'username'"> 请输入用户名<input type="text"> </div> <div v-else :key="'email'"> 请输入邮箱<input type="text"> </div> </div> <script> const vm = new Vue({ el: '#app', data: { type: 'username' } }) </script> </body> -
出于性能考虑，应避免v-if和v-for应用于同一个标签，在vue中v-for的优先级会更高，会执行完v-for才会执行v-if，这样会浪费资源
- 可以将v-if放在v-for父元素上，这样只要v-if判断为flase，就不会再执行v-for了
