Vue基础指令

1.普通插值表达式插入数据: 在标签尖括号中使用{{}}插入js表达式:变量,函数调用,三目运算等等,插值表达式中的标识符 代表vue对象中的data的属性名或者methods中的方法名

 

 <div vue操作指令="js环境"></div>

 

    <div id="app">

        <h1>{{title}}</h1>

        <h2>{{msg}}</h2>

        <p>{{a}}</p>

    </div>

    <script>

        var a="hello"//不会显示

        new Vue({

            el:"#app",

            data:{

                title:"标题",

                msg:"6666"

                //可以显示在页面上

            }

        })

    </script>

{{}}===>一种插值表达式，会作为js语法执行环境。不能太复杂(复合语句：for循环，if判断)，可以使用简单的例如：对象调属性、数组取下标、三目运算符等，只要是表达式就行加减乘除都可以

        <h3>{{obj.age}}</h3>

        <h3>{{fn()}}</h3>

        <h3>{{arr[0]}}</h3>

        <h3>{{fn()+10}}</h3>

 

2.文本指令:(面试)

v-html ==>相当于innerHTML

v-text==>相当于innerText

v-pre==>插件表达式就被识别为文本,而不是js表达式

v-cloak==>加上这个属性的标签相当于在构建虚拟节点的时候就会有这个属性,等data的数据生成的时候,这个标签会自动去掉这个属性,可以利用这个特性来在css中把这个元素在加载初期写样式(隐藏)

    <div id="app">

        <div>

            {{msg}}

        </div>

        <div v-clock>{{msg1}}</div>

        <div v-text="msg2"></div>

        <div v-html="msg2"></div>

        <div v-pre>{{msg3}}</div>//静默，不会编译

    </div>

   <script>

        var vm=new Vue({

            el:"#app",

            data:{

                msg:"hello",

                msg1:"hello1",

                msg2:"hello2",

                msg3:"hello3"

            }

        })

       

    </script>

 

 

 

 

 

 

3.考点:如何解决vue第一次加载的时候 页面上使用的数据会闪烁?(面试)

3.1.界面加载的时候会把节点直接挂载到文档树中,导致{{msg+"666"}}这个字符串会显示一下

3.2.vue对象生成data数据时候 回去刷新界面 把{{msg+"666"}}字符串替换成结果字符串

3.3.导致界面第一次加载的时候会闪屏

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

  <div v-text="msg2"></div>

  <div v-clock>{{msg1}}</div>

 

4.给元素绑定属性

所有标签中属性绑定js中变量:

标准写法: v-bind:src="变量"

简写形式: :src="[10,20,30]"

 

    <div id="app">

        <div>{{msg}}</div>//标签中属性绑定js中变量

        <div v-html="obj.msg"></div>

        <img v-bind:src="obj.touxiang" alt="">//用 v-bind绑定

//任何属性都可以使用，如果你想属性使用变量就要在属性前面加上v-bind

    </div>

    <script>

        var vm=new Vue({

            el:"#app",

            data:{

                obj:{

                    msg:"hello",

                    touxiang:"头像地址"

                }

             

            }

        })

    </script>