Vue2.0——基础指令

3、页面数据闪烁

​ 界面加载的时候会把节点直接挂载到文档树中,导致{ {msg+“666”}}这个字符串会显示一下，vue对象生成data数据时候 回去刷新界面 把{ {msg+“666”}}字符串替换成结果字符串，所以会出现页面闪烁的bug。

解决方案：(使用v-html,v-text指令操作,或者css中加[v-cloak] {display:none}😉

①添加一个v-cloak,首先添加隐藏样式， 在vue框架运行时，会把项目中的v-cloak属性清空，这样处理只会渲染一次

<style>
    [v-cloak] {
        display: none;
    }
</style>
<div id="app" v-cloak>
        <div>{
  {msg1}}</div>
        <div v-text="msg2"></div>
        <div v-html="msg3"></div>
        <div v-pre>{
  {msg4}}</div>
        <a v-bind:href="link">baidu</a>
    </div>

② 不要用el关联方式，用$mount的方式挂载。

③尽量的使用指令。v-text指令底层：innerText='‘替换内容；v-text指令底层：innerText=’'替换内容，可以识别标签

4、基础指令

1. 差值表达式，也叫声明式渲染/文本差值：{ {表达式}}
2. v-html:相当于innerHTMl
3. v-text：相当于innerText
4. v-pre：插件表达式就被识别为文本,而不是js表达式
5. v-cloak：当网速很慢的时候，v-cloak结合css样式，可以解决页面出现{ {xxx}}的问题。
   Vue实例创建完毕并接管容器后，会删除v-cloak属性
6. v-bind： 绑定属性

笔试题：vue中常用的指令有哪些？用处？（12分）

案例

<link rel="stylesheet" href="http://www.baidu.com">
<div id="app" v-cloak>
    <div>{
  {msg1}}</div>
    <div v-text="msg2"></div>
    <div v-html="msg3"></div>
    <div v-pre>{
  {msg4}}</div>
    <a v-bind:href="link">baidu</a>
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg1: 'hello1',
            msg2: 'hello2',
            msg3: '<h2>hello3</h2>',
            msg4: 'hello4',
            link: 'http://www.baidu.com',
        }
    })

5、属性绑定

所有的原生属性前面加上v-bind: /: 代表：将常量变成了变量，一个存储空间。

图片绑定和链接：

<img v-bind:src="url">  //图片绑定
<a v-bind:href="link">baidu</a> //链接绑定
<a :href="link">baidu</a> //链接绑定(语法糖形式)
    
var vm = new Vue({
    el: "#app",
    data: {
        link: 'http://www.baidu.com',
        url: 'https://img1.baidu.com/it/u=3866532991,3661643257&fm=253&fmt=auto&app=138&f=JPEG?w=448&h=252'
    }
})

语法糖：v-bind： ==> :

v-bind表示：后面的内容是一个变量，而不是常量；

比如：这样的话为文档树中div的类名就变成了box，并不是行内的div1.

 <div v-bind:class="div1"></div>

var vm = new Vue({
    el: "#app",
    data: {
        div1: box,
    }
})

6、方法和事件绑定

v-on: 事件类型 =‘函数名/函数名（）’ ==> 语法糖 @事件类型

<button v-on:click="fn">点我</button>
//<button v-on:click="fn()">点我</button>
//语法糖
<button @click="fn">点我</button>

//绑定多个事件
<button v-on:click="fn"  @mouseover='fm()'>点我</button>

//一个元素绑定一个事件执行两个函数，方法中调用其他函数
<button @click="fn3">点我</button>
methods: {
   
    fn: function () {
   
        console.log(111111111);
        this.msg = "22222"
    },
    fn2: () => {
   
        console.log(222222222