------------恢复内容开始------------
1、Vue的简单模板
<div id="app"> <h1>{{ msg }}</h1> </div> <script> //2.创建一个vue实例对象 const MyVue = new Vue({ //3.告诉vue对象需要控制的界面上的区域 el: "#app", //4.告诉vue实例对象，控制区域内的数据 data: { msg: "vue的实例模板" } }) </script>
2、Mustache语法
<body> <div id="app"> <h1>{{ msg }}</h1> <h1>{{ msg }}，mustache语法</h1> <!-- mustache语法中不仅仅能直接写变量，还可以写简单的表达式--> <h1>{{ msg + mustache }}</h1> <h1>{{ msg + ‘ ‘+ mustache }}</h1> <h1>{{ msg }} {{ mustache }}</h1> <h1>{{ counter * 2 }}</h1> </div> <script> //2.创建一个vue实例对象 const MyVue = new Vue({ //3.告诉vue对象需要控制的界面上的区域 el: "#app", //4.告诉vue实例对象，控制区域内的数据 data: { msg: "vue的实例模板", mustache: "mustache语法", counter: 100 } }) </script> </body>
3、v-once、v-html，v-text，v-pre，v-cloak语法
<body> <div id="app"> <h1>{{ msg }}</h1> <!-- v-once指令：只会将数据的初始值显示，当数据发生改变的时候，使用了v-once指令的视图不会更新数据--> <h1 v-once>{{ msg }}</h1> <!-- v-html指令：会将数据中含有的标签解析之后进行显示--> <h1>{{ htmlTemplate }}</h1> <h1 v-html="htmlTemplate"></h1> <!-- v-text指令：与mustache语法相似，都是将数据进行显示，不同的是mustache语法不会替换标签内的文本， 而v-text1则会将标签内的文本进行覆盖 --> <h1>{{ msg }}，v-text</h1> <h1 v-text="msg">v-text</h1> <!-- v-pre指令：将标签内的内容原封不动的显示出来，不会进行额外的解析--> <h1>{{ msg }}</h1> <h1 v-pre>{{ msg }}</h1> <!-- v-cloak指令：在vue实例对标签进行解析之前，标签上的v-cloak属性存在，当vue实例解析到该标签时， 会将该标签上的v-cloak属性删除 --> </div> <script src="js/vue.js"></script> <script> //2.创建一个vue实例对象 const MyVue = new Vue({ //3.告诉vue对象需要控制的界面上的区域 el: "#app", //4.告诉vue实例对象，控制区域内的数据 data: { msg: "vue的实例模板", htmlTemplate: "<a href=‘http://www.baidu.com‘>百度一下</a>" } }) </script> </body>
4、v-bind：动态绑定
<body> <div id="app"> <h1>{{ msg }}</h1> <!-- 原生写法--> <img v-bind:src="imgUrl" alt=""> <!-- 简写：语法糖--> <img :src="imgUrl" alt=""> <!-- 动态绑定class--> <h2 :class="active">你好</h2> <!-- class绑定对象:当类名的值为true时会被绑定到class中，为false时则不会绑定--> <h2 :class="{active:true}">你好</h2> <!-- 通过变量控制class--> <h2 :class="{active:isActive}">你好</h2> <!-- 通过方法控制class--> <h2 :class="getClass()">你好</h2> <!-- v-bind绑定style--> <!-- font-size可使用驼峰标识的写法,可以不加引号：fontSize--> <p :style="{‘font-size‘: ‘50px‘}">百舸争流</p> <p :style="{fontSize: ‘50px‘}">百舸争流</p> </div> <script src="js/vue.js"></script> <script> //2.创建一个vue实例对象 const MyVue = new Vue({ //3.告诉vue对象需要控制的界面上的区域 el: "#app", //4.告诉vue实例对象，控制区域内的数据 data: { msg: "vue的实例模板", imgUrl: ‘./img/太极生成.gif‘, active: ‘active‘, isActive: true }, methods:{ getClass:function () { return {active:this.isActive} } } }) </script> </body>
5、MVVM设计模式
<body> <!-- 1、MVVM设计模式 在MVVM设计模式中，有三部分组成 M: Model 数据模型（保存数据，处理数据业务逻辑） V: View 视图（展示数据，与用户进行交互） VM: View-Model 数据模型和视图的桥梁 MVVM设计模式最大的特点就是支持数据的双向传递 数据可以从 V -> VM -> M 也可以从 M -> VM -> V 2、Vue中的MVVM划分 Vue是基于MVVM的设计模式的，也就是说是支持数据的双向传递的 其中： 被控制的区域就是MVVM中的view Vue实例对象就是View-Model 实例对象中的data就是Model --> <!--1、这里就是MVVM中的View--> <div id="app"> <h1>{{ msg }}</h1> </div> <script> //2.创建一个vue实例对象，也就是MVVM中的View-Model const MyVue = new Vue({ //3.告诉vue对象需要控制的界面上的区域 el: "#app", //4.告诉vue实例对象，控制区域内的数据 data: {//是MVVM中的model msg: "vue的实例模板" } }) </script> </body>
------------恢复内容结束------------
<body>
<div id="app">
<h1>{{ msg }}</h1>
<!-- 原生写法-->
<img v-bind:src="imgUrl" alt="">
<!-- 简写：语法糖-->
<img :src="imgUrl" alt="">
<!-- 动态绑定class-->
<h2 :class="active">你好</h2>
<!-- class绑定对象:当类名的值为true时会被绑定到class中，为false时则不会绑定-->
<h2 :class="{active:true}">你好</h2>
<!-- 通过变量控制class-->
<h2 :class="{active:isActive}">你好</h2>
<!-- 通过方法控制class-->
<h2 :class="getClass()">你好</h2>
<!-- v-bind绑定style-->
<!-- font-size可使用驼峰标识的写法,可以不加引号：fontSize-->
<p :style="{‘font-size‘: ‘50px‘}">百舸争流</p>
<p :style="{fontSize: ‘50px‘}">百舸争流</p>
</div>
<script src="js/vue.js"></script>
<script>
//2.创建一个vue实例对象
const MyVue = new Vue({
//3.告诉vue对象需要控制的界面上的区域
el: "#app",
//4.告诉vue实例对象，控制区域内的数据
data: {
msg: "vue的实例模板",
imgUrl: ‘./img/太极生成.gif‘,
active: ‘active‘,
isActive: true
},
methods:{
getClass:function () {
return {active:this.isActive}
}
}
})
</script>
</body>
原文：https://www.cnblogs.com/summerHou/p/14874511.html