vue v-指令详解。（全）

v-for 循环语法

<div id="myvue">

        <ul>

            <li v-for="item in message">{{item}}</li>

        </ul>

    </div>

    <script src="./vue.js"></script>

    <!-- vue.js请前往vue官网下载 引入即可 -->

    <script>

        const myvue = new Vue({

            el: "#myvue", //挂载点

            data: { //定义数据

                message: ["电影1", "电影2", "电影3", ],

            }

        })

    </script>

v-on 事件绑定可用@代替

<div id="myvue">

        <ul>

            <li @click="change()" v-for="item in message">{{item}}</li>

        </ul>

    </div>

    <script src="./vue.js"></script>

    <!-- vue.js请前往vue官网下载 引入即可 -->

    <script>

        const myvue = new Vue({

            el: "#myvue", //挂载点

            data: { //定义数据

                message: ["电影1", "电影2", "电影3", ],

            },

            methods: {

                change() {

                    this.message[0] = "海王"; //this指向 myvue整个区域

                },

            }

        })

    </script>

v-once 只渲染一次，不随数据改变而改变。

<h2 v-once>只渲染一次</h2>

v-html 解析源码

<h2 v-html>解析源码</h2>

v-text

<h2 v-text="{{hello}}">原数据</h2>//页面显示文本：新数据。原数据文本会被覆盖。
...
...
data: { //定义数据

                hello:"新数据",

            }

v-pre 不解析数据

<h2 v-pre>{{hello}}</h2>//页面显示文本：{{hello}}。
...
...
data: { //定义数据

                hello:"新数据",

            }

v-cloak vue解析前，v-cloak会存在于页面，vue解析完成 v-cloak消失。

//css样式
[v-cloak]{   
display:none;
}
....
<h1 v-cloak>数据加载</h1>

v-bind 属性绑定缩写 :

<img v-bind:src="src">
<img :src="src">//v-bind 简写
<img :class="{one:oneclass,two:twoclass}" :src="src">   //页面显示class为 oneclass。对象语法。
<img :class="[index,index2]" :src="src">  //页面显示class为 index index2。数组语法。
...
data: { //定义数据

                src:"图片地址",
                oneclass:true,
                twoclass:false,
                index:indexone,
                index2:indextwo,

            }