vue的模板语法

模板语法是什么？官方网站有解释：允许开发者 声明式 地将 DOM 绑定至 底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

我的理解是：模板语法是将vue实例中的data中的数据渲染到页面中的函数。

1.文本插值：使用“Mustache”语法 (双大括号)  {{msg}}

<div id="app">
    {{msg}}
</div>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            msg:'hello vue'
        }
    })
</script>

        {{msg}}可以将js中的vue实例中的data数据渲染到页面上来。效果如下图所示：

      【双大括号内部可以放js表达式，比如：{{msg+''nihao"}}】

        当msg这个数据发生改变时，插值处内容也会发生变化。

        但是，使用了v-once命令之后，当msg数据发生改变时，插值处的内容不会跟着发生改变。

<div v-once>{{msg}}</div>

2.v-html指令：双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，就需要使用v-html指令。

<div v-html='htmlCode'></div>

下面是文本插值和v-html差值的区别：

    <div id="app">
        {{htmlCode}}
        <div v-html='htmlCode'></div>
    </div>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                htmlCode:
                    `<div>
                        <h1>${this.msg}</h1>
                        <h2>h2</h2>
                        <h3>h3</h3>
                        <h4>h4</h4>
                        <h5>h5</h5>
                    </div>`
            },
            methods:{},
            created(){}
        })
    </script>

 根据以上代码，文本插值显示为这样：

v-html插值显示为这样：

 3.v-bind指令：动态绑定元素上的属性。

        Mustache 语法不能作用在 HTML attribute（属性） 上，遇到这种情况应该使用v-bind指令。

<div v-bind:title='title'>div2</div>

        也可以简写为

<div :title='title'>div2</div>

4.v-on指令：动态绑定事件

<button v-on:click='clickHandler'>修改数据</button>

v-on可以简写为：

<button @click='clickHandler'>修改数据1</button>

        例子：

    <div id="app">
        {{msg}}
        <button v-on:click='clickHandler'>修改数据</button>
        <!-- 在=后面直接写修改的数据，就不需要再方法中设置this了-->
        <button @click="msg='hello v-on'">修改数据2</button>
    </div>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                msg:'hello vue',
            },
            methods:{
                findAllCategories(){
                    console.log('查询')
                },
                clickHandler(){
                    this.msg='hello v-on'
                }
            },
            created(){
                this.findAllCategories()
            }
        })
    </script>

5.条件渲染

        1）v-if指令：用于条件性地渲染一块内容，将v-if部署到html元素上，在vue实例中的data中控制该元素在页面中的渲染，和v-else配对使用，这块内容只会在指令的表达式返回true值的时候被渲染。

    <div id="app">
        <div v-if="isLogin">请登录</div>
        <div v-else>登录成功，欢迎您</div>
    </div>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                isLogin:true
            },
        })
    </script>

当data中的isLogin为true时，则“请登录”会渲染在网页上；当data中的 isLogin为false时，则“请登录”会在页面中隐藏，从而显示“登录成功，欢迎您”。

        2）v-show：带有v-show的元素时钟会被渲染并且保留在dom中，v-show只是简单的切换原色的css属性display，v-show不支持template元素，也不支持v-else。

 二者的区别：

                v-if v-else：通过控制dom节点的渲染，实现显示与隐藏

                v-show：通过控制dom节点css样式中display，来实现显示与隐藏

                频繁的显示与隐藏某个组件时，用v-show较好；v-if会频繁渲染dom树，开销较大，造成资源，影响代码运行效率

6.列表渲染v-for

    <div id="app">
        <ul>
            <li v-for="(item,index) in categories">
                索引：{{index}}
                编号：{{item.id}}
                名称：{{item.name}}
            </li>
        </ul>
    </div>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                categories:[]
            },
            methods:{
                findAllCategories(){
                    this.categories = [
                        {id:1,name:'校园新闻'},
                        {id:2,name:'娱乐新闻'},
                        {id:3,name:'热点聚焦'},
                        {id:4,name:'体坛赛事'},
                    ]
                }
            },
            created(){
                this.findAllCategories()
            }
        })
    </script>

在页面显示为：

 7.class绑定与style绑定

        1）class绑定：给元素绑定class，可以使该元素使用多个class类名，利用true和false来控制元素是否要用这个class类名。（true是使用该类名，false是不适用该类名）

        html代码

<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">

</div>

        js代码

data: {
  isActive: true,
  hasError: false
}

 上面两个代码渲染出来的效果是：

<div class="static active"></div>

        2） style绑定：将style绑定到元素上，这样元素就可以使用多个样式，并且可以在js中修改要使用该样式。

        html代码：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

        js代码：

data: {
  activeColor: 'red',
  fontSize: 30
}

他们呈现出来的效果是：

<div v-bind:style="{ color: red, fontSize: 30px }"></div>