02-Vue- Vue基本指令

 1.普通插值表达式插入数据:

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

•  {{}} 是一种插值表达式  会作为js语法执行环境

    <div id="app">

        <!-- 相当于this.msg，this是vm -->

        {{msg}}

        {{b}}

        {{fn()}}

        <!-- 报错a没有定义 -->

        {{a}}

    </div>

    <script>

        let b = 100

        var vm = new Vue({

            el: "#app",

            data: {

                msg: "app",

                obj: { age: 24 },

                fn() {

                    return 10;

                },

                b

            }

        })

        console.log(vm, vm.msg);

        vm.a = "nihao"

// 页面加载过程：

// 1.先执行div渲染（所以页面闪跳{{msg}}）

// 2.new Vue():1)关联选择器的元素 2）data里面的属性msg或方法fn添加到vm里面（相当于构造函数里面的this），3）将获取元素里面的msg变量从vm.msg的值显示

// 3.vm.a 赋值

    </script>

 

2.文本指令:(面试)

v-html ==>相当于innerHTML

v-text==>相当于innerText

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

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

 

 <style>

        [v-clock] {

            display: none;

        }

    </style>

   

    <div id="app" v-clock>

        <div>{{msg}}</div>

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

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

        <div v-pre>{{a}}</div>

    </div>

    <script type="text/javascript">

        var vm = new Vue({

            el: "#app",

            data: {

                msg: "app",

                a: "b",

                b: "<b>b</b>"

            }

        })

    </script>

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

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

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

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

解决闪跳的3种方法

1. 添加一个属性 v-clock  在vue框架运行时 会吧项目中的v-clock属性去掉

2. 在元素上添加 v-text 或 v-html属性

3. 利用挂载的方式，不用关联方式

 <style>

        [v-clock] {

            display: none;

        }

    </style>

   

    <div id="app" v-clock>

        <div>{{msg}}</div>

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

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

        <div v-pre>{{a}}</div>

    </div>

    <script type="text/javascript">

        var vm = new Vue({

            el: "#app",

            data: {

                msg: "app",

                a: "b",

                b: "<b>b</b>"

            }

        })

    </script>

 

4..给元素绑定属性

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

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

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

 

  <div id="app">

        <div>{{msg}}</div>

        <div>{{obj.name}}</div>

        <div v-text="obj.name"></div>

       

        <!-- obj.touxiang=={{obj.touxiang}} -->

        <img v-bind:src="obj.touxiang" alt="">

        <!-- 简写:obj.touxiang=={{obj.touxiang}} -->

        <img :src="obj.touxiang" alt="">

        <a :href="arr[0].source">{{arr[0].site}}</a>

    </div>

    <script type="text/javascript">

        var vm = new Vue({

            el: "#app",

            data: {

                box:'box', //用来元素选择器的改变

                msg: "app",

                obj: { name: "li", touxiang: "./src/bird.png" }

                ,arr:[{source:"http://www.baidu.com",site:"百度"}]

            }

        })

        // 数据驱动页面,msg改变,页面渲染对应改变

        vm.msg="1"

    </script>