模板
1. 简介
Vue.js使用基于HTML的模板语法，可以将DOM绑定到Vue实例中的数据
模板就是{{}}，用来进行数据绑定，显示在页面中
也称为Mustache语法
2. 数据绑定的方式
a.双向绑定
v-model
b.单向绑定
方式1：使用两对大括号{{}}，可能会出现闪烁的问题，可以使用v-cloak解决
方式2：使用v-text、v-html
<script> window.onload=function(){ let app = new Vue({ el:'.container', data:{ msg:'Welcome to China!' } }) } </script> <style> [v-cloak]{ display:none; } </style> -------------------------------------------------------------------- <body> <div class="container"> <input type="text" v-model="msg"> //双向绑定 //单向绑定 <h1 v-cloak>{{msg}}</h1> <h1 v-text="msg"></h1> <h1 v-html="msg"></h1> </div> </body>
v-html:可以识别标签 类似于<h1></h1>。。。而其他两种方式识别不了，会显示纯文本。。。
3. 其他指令
v-once 数据只绑定一次
v-pre 不编译，直接原样显示