Vue最简单小例子演示使用步骤：
1.导入Vue文件；
2.创建Vue实例对象，设置属性（el、data等等）；
3.使用模板语法把数据渲染到页面
<body>
<div id="app">
<!--插值表达式-->
{{message}}
</div>
<!--导入Vue文件-->
<script src="vue-2.4.0.js"></script>
<script>
//创建Vue实例对象
var app = new Vue({
//挂载点获取原生JS对象
el:"#app",
data:{
message:"Hello Vue!"
}
})
</script>
</body>注意：
1.Vue实例对象中的属性用逗号隔开
2.data属性中定义各类数据
Vue系统指令
v-text：设置标签的文本值（textContent）
<div id="app">
<h2 v-text="message">123</h2> //第一种
<h2>123{{message}}</h2> //第二种
</div>*第一种写法会覆盖元素内所有内容，但会替换标签中全部已有内容
*第二种为插值表达式，可以部分替换标签已有内容
v-html：设置标签的innerHTML
<div id="app">
<p v-html="content"></p>
</div>v-on：为元素绑定事件
<div id="app">
<input type="button" value="IT" v-on:click="doIt" />
<input type="button" value="IT" @click="doIt" />
<input type="button" value="dbIT" @dblclick="doIt" />
<input type="button" value="dbIT" @dblclick="flag=true" />
</div>*第二种写法为简写，减少代码量
*第三种是双击事件
*第四种是直接在页面的事件内写语句，不过不推荐
具体用法需要搭配Vue实例对象中的methods属性使用：
*方法内部需要通过this关键字访问定义在data中的数据
<body>
<div id="app">
<p2 @click="changeFood">{{food}}</p2>
</div>
<script src="vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
food:"兄弟们，"
},
methods:{
changeFood:function(){
this.food+="奥利给干啦！";
}
}
})
</script>
</body>v-show：根据bool值切换元素显示/隐藏
*v-show内的值都会转换为bool类型
*可以在v-show内绑定函数，灵活操纵图片的显示
*v-show实质上是操纵元素的display属性
<div id="app">
<img src="pic/1.jpg" v-show="true"/>
<img src="pic/2.jpg" v-show="age>=18"/>
<img src="pic/3.jpg" v-show="isShow"/>
<button @click="changeIsShow">修改可见状态</button>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
isShow:false,
age:18
},
methods:{
changeIsShow:function(){
this.isShow = !this.isShow;
}
}
});
</script>*第一种方法直接写死显示状态
*第二种方法将运算结果转换为bool值判断
*第三种方法绑定函数
v-if：根据bool值切换元素显示/隐藏（操纵dom元素）
*与v-show的区别：v-show只是在修改display属性，而v-if则是直接移除/添加元素
*v-if对性能消耗要大于v-show
v-bind：为元素绑定属性
写法：v-bind:属性名="属性值"，简写：:属性名="属性值"
<div id="app">
<img v-bind:src="imgSrc">
<img :src="imgSrc" :title="imgTitle+'!'" :class="isActive?'active':''" @click="toggleActive">
<img :src="imgSrc" :title="imgTitle+'!'" :class="{active:isActive}" @click="toggleActive">
</div>
<script>
var app = new Vue({
el: "#app",
data: {
imgSrc: "pic/3.jpg",
imgTitle: "supreme",
isActive:true
},
methods:{
toggleActive:function(){
this.isActive = !this.isActive;
}
}
});
</script>
*第二种写法是通过函数绑定，通过三元表达式判断bool值
*第三种写法是通过函数绑定，通过对象的方式判断bool值，提高可读性
v-for：根据数据的数量生成多个重复列表结构（遍历）
语法：v-for="(item,index) in arr" arr是数组名，item是数组中每个遍历的元素名，index是索引，二者都可以自己命名
<div id="app">
<ul>
<li v-for="(item,index) in arr">{{item}}{{index}}</li>
</ul>
<h2 v-for="item in eight">{{item.name}}</h2>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
arr:["老八","秘制","小汉堡儿"],
//也可以以对象为数组元素
eight:[
{name:"臭豆腐"},
{name:"俘虏"},
{name:"柠檬"}
]
},
});
</script>补充：
v-for循环时，key属性必须用v-bind绑定的方式指定key的值
v-for循环时，key属性只能使用number获取string
v-model：获取和设置表单元素的值（双向数据绑定）
<div id="app">
<input type="text" v-model="message">
<h2>{{message}}</h2>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"猕Hotel"
}
});
</script>