目录
指令式带有 v- 前缀的特殊特性。
v-text 与 v-htm 文本解析
将数据和dom做关联，当表达式的值改变时，响应式地作用在视图。
v-text
- 写法 v-text=" xxx"；
- 表达文本，但不能解析标签，相当于innerTxet；
- 与插值语法的区别：v-text 会替换节点中的内容，{ {xxx}} 则不会，更灵活；
<div v-text="'<h3>标题1</h3>'"></div>v-html
- 写法 v-html="xxx "；
- 表达文本，可以解析标签，相当于innerHtml；
- 与插值语法的区别；
- v-html 会替换节点中所有的内容，{ {xxx}} 则不会；
- v-html 可以识别 HTML 结构；
- v-html 有安全性问题！
- 在网站上动态渲染任意 HTML 是非常危险的，容易导致 XSS 攻击；
- 一定要在可信的内容上使用 v-html，永远不要用在用户提交的内容上！
<div v-html="title"></div>
<script>
export default {
data () {
return {
title:"<h3>标题2</h3>"
}
}
}
</script>效果图：
v-if 与 v-show 条件渲染
v-if
- 写法 v-if="表达式"；
- 控制节点是否存在；
- 可与 v-else-if=""、v-else=""配合使用，但结构不能被打断；
- 适用于切换频率较低的场景，因为不展示的DOM元素直接被移除；
v-if:
<h3 v-if="false">标题1</h3>
<h3 v-if="!false">标题2</h3>v-show
- 写法 v-show="表达式"；
- 控制节点是否展示；
- 适用于切换频率较高的场景；
- 不展示的DOM元素不会被移除，只控制display属性；
v-show:
<h3 v-show="1 == true">标题3</h3>
<h3 v-show="0">标题4</h3>效果图：
注：
- 内部写bool表达式，可与 &&、|| 、! 、===等配合使用；
- 使用 v-if 时，元素可能无法获取，但使用v-show一定可以获取到；
- <template>标签不影响结构，页面html中不会有此标签，只能配合v-if，不能配合v-show；
v-bian 与 v-model 数据绑定
单项绑定 v-bian
- 数据只能从data流向页面；
- v-bind:可以简写为 : ；
- 如<a v-bind:href="xxx"></a> 简写为 <a :href="xxx"></a>；
- xxx 可以是字符串、变量、对象、数组，也可以组合使用；
案例：绑定样式
<div id="App">
<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
<div class="box" :class="'bgc'">{
{name}}</div><br/>
<!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
<div class="box" :class="['bgc1', 'text', 'bord']">{
{name}}</div><br/>
<!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
<div class="box" :class="{bgc1: false,text: isShow,}">{
{name}}</div><br/>
<!-- 绑定style样式--对象写法 -->
<div class="box" :style="{fontSize: '40px',color: 'red'}">{
{name}}</div><br/>
<!-- 绑定style样式--数组写法 -->
<div class="box" :style="[{fontSize: '40px',color: 'blue'},{backgroundColor: 'gray'}]">{
{name}}</div>
</div>
<script>
export default {
data () {
return {
name: '一段文本',
mood: 'bgc',
isShow: 1
}
}
}
</script>
<style>
.box{width: 300px;height: 50px;border: 1px solid black;}
.bgc{background-color: #bfa;}
.bgc1{background-color: yellowgreen;}
.text{font-size: 20px;text-shadow: 2px 2px 10px red;}
.bord{border-radius: 20px;}
</style>效果图：
双项绑定 v-model
- 数据不仅能从data流向页面，还可以从页面流向data；
- 双向绑定一般用于表单元素上，如 <input>、<select>、<textarea>等；
- v-model:value,可以简写为 v-model，因为 v-model默认收集的就是value；
收集表单数据
收集表单数据
- 若 <input type="text" />，则 v-model 收集的是 value 值，用户输入的内容就是 value 值
- 若 <input type="radio" />，则 v-model 收集的是 value 值，且要给标签配置 value 值
- 若 <input type="checkbox" />
- 没有配置 value 属性，那么收集的就是 checked（勾选 or 未勾选，布尔值）
- 配置了 value 属性
- v-model 的初始值是 非数组，那么收集的就是 checked（勾选 or 未勾选，布尔值）
- v-model 的初始值是 数组，那么收集的就是 value 组成的数组
v-model 的三个修饰符
- lazy 失去焦点后再收集数据
- number 输入字符串转为有效数字
- trim 过滤收尾输入的空格
案例：收集表单数据
<template>
<div id="App">
<form @submit.prevent="demo">
账号：<input type="text" v-model.trim="userInfo.account"> <br />
密码：<input type="password" v-model="userInfo.password"> <br />
年龄：<input type="number" v-model.number="userInfo.age"> <br />
性别：
男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/>
爱好：
吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
睡觉<input type="checkbox" v-model="userInfo.hobby" value="sleep">
打豆豆<input type="checkbox" v-model="userInfo.hobby" value="beatBeans">
<br />
所属地区
<select v-model="userInfo.city">
<option value="">请选择校区</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
<option value="shenzhen">深圳</option>
</select>
<br/><br/>
其他信息：
<textarea v-model.lazy="userInfo.other"></textarea> <br/>
<input type="checkbox" v-model="userInfo.agree">阅读并接受
<a href="https://www.baidu.com/">《用户协议》</a> <br/>
<button>提交</button>
</form>
</div>
</template>
<script>
export default {
data () {
return {
userInfo: {
account: '',
password: '',
age: 18,
sex: 'female',
hobby: [],
city: 'beijing',
other: '',
agree: ''
}
}
},
methods: {
demo() {
console.log(this.userInfo)
}
}
}
</script>效果图：
v-for 列表渲染
- 用于展示列表数据；
-
语法：<li v-for="(item,index) in arr" :key="index"></li>；
-
item,index 最好用()包起来，item是其中的每一项，index是此项的下标；
-
用v-for时一定要绑定key，否则会报错；
-
key可以是index，最好是唯一标识；
-
-
可遍历：数组、对象，也可以是字符串、指定次数(数字)，不过后两个使用的比较少；
<ul>
<li v-for="(v,k) in 6" :key="k">{
{v}} --- {
{k}}</li>
</ul>效果图：
v-on 事件处理
- 语法：v-on:xxx=""，其中xxx是事件名，可简写为 @xxx=""；
- 事件回调需要配置在 methods 对象中，最终会在vue上；
- methods中配置的函数，不要使用箭头函数，否则this就不是指向vue；
- methods中配置的函数，都是被vue所管理的函数，this指向 vue 或 组件实例对象；
- @click="demo" 与 @click="demo($event)" 效果是一样的，但后者可以传参；$event是事件对象；
<button @click="fn">打印666</button>
<!--其中 fn 是methods中配置好的函数-->
<script>
export default {
methods:{
fn(){
console.log(666);
}
}
}
</script>效果图：
标签的属性
v-cloak
- 本质是一个特殊属性，当vue创建加载完毕后会删除这个属性；
- 当网速比较慢时，可通过css使有关vue的渲染内容不显示；
- 属性选择器
[v-cloak]{display:none}；
<h1 v-cloak> 标题1 </h1>v-once
- 当初次动态渲染后，就视为静态内容了；
- 以后数据改变不会引起v-once所在结构的更新，可用于优化性能；
<h2 v-once> {
{title}} </h2>
<script>
export default {
data() {
return {
title:'标题2'
}
},
}
</script>v-pre
- 跳过其所在节点的编译过程；
- 可利用他跳过:没有使用指令语法，没有用插值语法的节点，会加快编译；
<h3 v-pre> 标题3 </h3>自定义指令 directives
- 创建指令
data() {
return {}
},
directives:{
//完整写法
// 完成效果：在input框内绑定data里的属性 n ,初始时有焦点
指令名1:{
//指令与元素成功绑定时
bind(element,binding){
//element 是节点 》》 写了这个自定义指令的元素
//binding 是绑定的对象 》》 它包含一下属性：name，value，oldValue，expression，arg，modifiers
//binding.value是调用指令时传入的值
element.value = binding.value //使input的val=传入的值
},
//指令所在元素被插入页面时
inserted(element,binding){
element.fovus() //获取焦点
},
//指令所在的模板被重新解析时
updata(element,binding){
element.value = binding.value //随着传入的值的改变而改变
}
},
//简写方式 只有钩子中的 bind 与 updata
//完成效果:将传来的数字放大十倍放到该节点中
指令名2(element,binding){
element.innerText = binding.value * 10
},
}- 调用 v-指令名=""
注：
- 定义指令名时不加 v- ，但使用时要加 v-
- 指令名如果是多个单词，要使用 kabab-case 命名方式，不用用 camelCase 命名