Vue.js 模板语法

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

---

文本插值

数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值：

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

Html

使用 v-html 指令用于输出 html 代码：

<!-- 解析html语法 -->
<div v-html="msg"></div>

<script>
export default {
    data() {
        return {
            msg: '<h1>变量</h1>',
        }
    }
}
</script>

v-show

我们也可以使用 v-show 指令来根据条件展示元素：

<div>
<h3 v-show="ok">Hello World</h3>
</div>

<script>
export default {
    data() {
        return {
            ok: 1, // 0:false  1:true,
        }
    }
}
</script>

缩写

Vue.js 为两个最为常用的指令提供了特别的缩写：

v-bind 缩写

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

条件判断 v-if v-else-if v-else

<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else>啥也不是</div>

<script>
export default {
    data() {
        return {
            type: 'A',
        }
    }
}
</script>

循环语句 v-for

<ul>
    <!--  -->
    <li v-for="(item, index) in tlist" :key="index" :class="{on:index%2==0, off:index%2!==0}">
        {{ item.text }}
    </li>
</ul>

<script>
export default {
    data() {
        return {
            tlist: [{text: '家电'}, {text: '生鲜'}, {text: '果蔬'}],
        }
    }
}
</script>

<style>
    .on {background: rebeccapurple; color: white;}
    .off {background: red; color: black;}
</style>

监听属性 watch

<button @click='counter++'>点我加1</button>

<script>
export default {
    // 监听属性
    watch: {
        counter: function (nval, oval) {
            console.log('计数器由' + oval + '变成了' + nval)
        }
    },
}
</script>

计算属性 computed

<div>{{ reverse_msg }}</div>

<script>
export default {
    // 计算属性
    computed: {
        // 反转
        reverse_msg: function (){
            return this.msg.split('').reverse().join('');
        }
    },
}
</script>