1.渲染数据指令
vue的指令directive只是dom的行间属性,vue给这类属性赋予了一定的意义, 来实现特殊的功能,所有的指令都以v-开头
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
1.1 v-text指令基本用法
1.v-text 能展示对应data中数据内容，也能在数据基础上做运算
2.v-text 会把标签中的内容替换,类似于innerText
3.它也有不好的地方就是会替换标签内的所有的内容,无论普通字符还是标签
4.注意指令(属性)的值虽然加了引号, 但是引号内不是字符串,而是表达式, msg是表达式中的变量,如果需要在表达式中使用字符串,需要再次添加引号, 但是要注意引号的冲突
<div id="app">
<!-- 通过mustache语法渲染页面 -->
{{ message }}
<!-- 通过v-text指令渲染页面 -->
<div v-text="message">
<h3>hello vue</h3>
</div>
<!-- <div v-text="'message'"></div>此时为字符串 -->
</div>
const vm = new Vue({
el:"#app",
data:{
message:"hello Vue"
},
});
1.2 v-html不推荐使用
v-html指令一定要慎用, 可能会攻击,如果在数据里添加一个script标签也能识别,那么script里面就可能会添加攻击你的脚本.
<div id="app">
<!-- 通过v-text指令渲染页面 -->
<div v-text="info"></div>
<!-- 通过v-html指令渲染页面 -->
<div v-html="info"></div>
</div>
const vm = new Vue({
el:"#app",
data:{
message:"hello Vue",
info:"<h3>h3标签</h3>"
}
});
1.3 v-cloak指令
Mustache这种插值符号在页面刷新的时候,会出现在页面上, {{}}插值表达式会闪烁,
v-cloak 解决闪烁(块)问题
<div id="app">
<div v-cloak>{{ message }}</div>
</div>
[v-cloak]{
display: none;
}
/*通过属性选择器获得*/
总结
1.{{}} 最被常用但是在加载的时候会出现闪烁问题,无法将html格式数据渲染，只能当字符串展示
2.v-text 虽然没有数据加载闪烁问题，但是会将标签中间的数据覆盖，也不能渲染html格式数据。
3.v-html 谨慎使用会出现xss攻击的风险
1.4 v-once指令
v-once属性不用设置值,使用{{}}插值符号插值,v-once值得是只会初始化渲染一次;当数据发生变化是,页面视图不会发生改变
<div id="app">
<!-- 两秒过后数据不会改变 -->
<div v-once>{{ message }}</div>
<!-- 三秒之后数据会改变 -->
<div>{{ message }}</div>
</div>
const vm = new Vue({
el:"#app",
data:{
message:"hello Vue"
},
});
setTimeout(()=>{
vm.$data.message="hello"
},2000)
1.5 v-pre指令
不编译原封不动渲染
实例：
<div id="app">
<!--不使用v-pre-->
<div>{{message}}</div>
</div>
const vm = new Vue({
el:"#app",
data:{
message:"hello Vue"
},
});
页面输出 => hello Vue
<div id="app">
<!--使用v-pre-->
<div v-pre>{{message}}</div>
</div>
const vm = new Vue({
el:"#app",
data:{
message:"hello Vue"
},
});
页面输出 => {{message}}
2.v-bind动态绑定属性指令
v-bind:指令会将普通属性的值变为表达值
<div id="app">
<img v-bind:src="imgurl" alt="女孩">
</div>
const vm = new Vue({
el:"#app",
data:{
imgurl:"https://pic.netbian.com/uploads/allimg/190824/212516-15666531161ade.jpg",
},
});
未使用v-bind指令的src属性的值是一个字符串,表示给标签添加一个src的属性
使用v-bind指令的src属性值不在是字符串,而是表达式, 表达式里的src不是一个普通的字符,而是一个变量,Vue实例data属性中的数据
2.1 关于访问一个网址获取图片,但是显示会出现403(防止盗链)的错误
Referrer Policy：https://www.jianshu.com/p/b12c5b4fd9df
解决方法：https://www.cnblogs.com/cina33blogs/p/10942431.html
注意:
动态属性绑定, 在我们需要的时候在使用,如果一个属性的是是固定的,
并不会在未来发生改变, 就没有必要动态绑定属性.
2.2 动态绑定class属性
使用动态绑定指令, 那么此时class后面的引号不在是字符串,而是一个JavaScript表达式, msg也就成为了一个变量
<div id="app">
<div v-bind:class="className">hello Vue</div>
<button @click="handleclick">点击</button>
<!-- 可以简写为 -->
<div :class="className">hello Vue</div>
</div>
const vm = new Vue({
el:"#app",
data:{
message:"hello vue",
className:"red",
},
methods:{
handleclick(){
this.className = this.className =="red"?"blue":"red";
}
}
});
2.3 动态绑定class与普通class混用
动态绑定class 和 没有动态绑定的class可以同时使用, 不冲突,Vue会将动态class属性与普通class属性在最后显示是合并到一起
<div id="app">
<!-- 动态绑定class -->
<div class="color" :class="className">{{ message }}</div>
</div>
const vm = new Vue({
el:"#app",
data:{
message:"hello vue",
className:"red",
},
});
将有两个类名,一个是color, 一个是className.
其中color是普通class属性的值, className是动态class属性值className变量在Vue data属性中所表示的值
2.4 动态绑定class的错误写法
千万不要在动态绑定class属性中像以前利用空格一样绑定多个类名
<div class="color" :class="className bg">{{ message }}</div>
2.5 数组语法动态绑定多个类名
因为动态绑定的class值是表达式,我们就可以利用数组来罗列多个动态绑定的类名,
因此可以 v-bind:class动态绑定class值中显示数组，使用数组来罗列多个绑定的class类名
<<div id="app">
<div class="color" :class="[className,bg]">{{ message }}</div>
<button @click="handleClick">点击改变文字颜色</button>
</div>
<div class="color" :class="className" :class="bg">{{ message }}</div>
<!-- 不支持多个动态属性绑定，如果写了后面将没有效果-->
const vm = new Vue({
el:"#app",
data:{
message:"hello vue",
className:"red",
bg:"skyblue"
},
methods:{
handleClick(){
this.className = this.className =="red"?"blue":"red";
}
}
});
2.6 动态绑定class值的处理逻辑
我们就可以利用数据isTrue布尔值的判断来切换类名,改变样式
<div id="app">
<div :class="isTrue?color:className">{{ message }}</div>
<button @click="handleClick">点击改变文字颜色</button>
</div>
const vm = new Vue({
el:"#app",
data:{
message:"hello vue",
className:"red",
color:"blue",
isTrue:true
},
methods:{
handleClick(){
this.isTrue = !this.isTrue;
}
}
});
注意:不推荐使用
如果我一个标签上有多个需要动态切换的类名怎么办?
2.7对象动态绑定多个类名切换
我们可以将 v-bind:class值 写成一个对象，以动态地切换 class
<style>
.box{
color:red;
}
.wrap{
color:skyblue;
}
</style>
<div id="app">
<--对象方式来处理类名的显示与否-->
<div :class="{box:isTrue, wrap: !isTrue}">你好</div>
<button @click="changClassName">点击切换颜色</button>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
message:"hello vue",
isTrue:true,
},
methods:{
handleClick(){
this.isTrue = !this.isTrue;
}
}
})
</script>
另一种玩法
<style>
.box{
color:red;
}
.wrap{
color:skyblue;
}
</style>
<div id="app">
<div :class="changClassName()">{{ message }}</div>
<button @click="handleClick">点击切换颜色</button>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
message:"hello vue",
isTrue:true,
},
methods:{
handleClick(){
this.isTrue = !this.isTrue;
},
changClassName(){
return {box:this.isTrue, wrap: !this.isTrue}
}
}
})
</script>
2.8 v-bind动态绑定style属性
需求分析：
1.和其他动态绑定属性一样,有的时候,我们就希望样式的值是可以动态变化的.
2.那么我们就需要使用到v-bind动态绑定属性的指令,
3.同时使用动态绑定属性以后,style属性的值将变成表达式. 以前的写法就不太合适了
4.既然是表达式,我们就可以使用对象和数组方式罗列样式.
2.8.1对象语法绑定行内样式
v-bind动态绑定属性除了class比较特殊外,还有一个style行内样式属性也比较特殊
<div id="app">
<div :style="style">{{ message }}</div>
</div>
const vm = new Vue({
el: "#app",
data: {
message:"hello vue",
style:"color:skyblue;font-size:50px"
}
});
2.8.2 对象式写法
因为CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case) 都可以：
因此,在普通的style属性中一下两种写法都可以
<!-- 驼峰式 (camelCase) 写法 --->
<h2 style="color:red;fontSize:30px;">Hello World</h2>
<!-- 短横线分隔 (kebab-case --->
<h2 style="color:red;font-size:30px;">Hello World</h2>
但是一旦使用了动态绑定, style属性的值将变成JS表达式,
表达式里的大括号即为JS对象, 对象属性的标识符是不支持-连字符的,
我们有两种处理方案:
1.驼峰式 (camelCase)
2.如果要使用连字符, 就需要添加双引号, 将属性变成字符串的写法
<!-- 驼峰式 (camelCase) 写法 --->
<h2 :style="{color:'red', fontSize:'30px'}">Hello World</h2>
<!-- 短横线分隔 (kebab-case) 但是要加引号 --->
<h2 :style="{color:'red', 'font-size' :'30px'}">Hello World</h2>
推荐用驼峰写法, 对象的值也可以是变量
<div id="app">
<div :style="{color:'red',fontSize:'50px'}">{{ message }}</div>
<div :style="{color:color,fontSize:size}">{{ message }}</div>
</div>
const vm = new Vue({
el: "#app",
data: {
message:"hello vue",
color:"skyblue",
size:"20px"
}
});
如果我们想动态修改样式也可以如下处理
<div id="app">
<div :style="styleObject">{{ message }}</div>
<button @click="changeColor">点击切换颜色</button>
</div>
const vm = new Vue({
el: "#app",
data: {
message:"hello vue",
styleObject: {
color: "red",
fontSize: "30px"
}
},
methods:{
changeColor(){
this.styleObject.color = this.styleObject.color == "red"? "skyblue": "red"
}
}
});
2.9 数组语法
我们也可以扩展对象的用法, 给动态属性的值绑定为数组, 数组中就可以使用多组样式对象来绑定CSS样式
<div id="app">
<div :style="[styleObject,baseStyle]">{{ message }}</div>
</div>
const vm = new Vue({
el: "#app",
data: {
message:"hello vue",
styleObject: {
color: "red",
fontSize: "30px"
},
baseStyle: {
margin: 0,
padding: 0,
}
}
});
原著：无为
