Vue基本指令使用

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>

Dom.png

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>"
    }
});

htmlDom.png

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",
    },
});

class.png

将有两个类名,一个是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,
        }
    }
});

arrstyle.png

原著：无为