Vue指令：

指令带有前缀 v- 开头，以表示它们是 Vue 提供的特殊属性。

v-text，v-html：

html：

		<div id="ddd"><!-- {{插值表达插入变量，不会覆盖标签体中的内容}}v-text,v-html会覆盖掉标签体中的内容v-text会把内容当作文本处理v-html会把内容当作html内容处理，可以解析标签--><p>{{msg}} vue {{a}}</p><!-- <b>你好<b> vue --><p v-text="msg">vue</p>		<!-- <b>你好<b> --><p v-html="msg">vue</p><!-- 你好 --></div>

js：

		<script>var msg="abc";//new Vue对象var ddd=new Vue({el:'#ddd',	//将id为app的标签与vue对象进行绑定data:{	//data中用来定义与标签进行双向绑定的数据，可以定义多组的msg:"<b>你好<b>",a:10	//无分号}})</script>

v-model：

html：

		<div id="ddd"><!--v-model可以将输入框的value与vue中数据进行绑定，当输入框值发生改变时，自动更新到数据中--><p> {{msg}} </p><input type="text" v-model="msg"/></div>

js：

		<script>var msg;var ddd=new Vue({el:"#ddd",data:{msg:"vmodel"}})</script>

v-bind:

html:

		<div id="ddd"><!--作用是为元素绑定属性完整写法是 v-bind：属性名简写的话可以直接省略 v-bind，只保留：属性名--><img v-bind:src="img"><img :src="img"><img :src="img" title="这是一个图片"></div>

js:

		<script>var msg;var ddd=new Vue({el:"#ddd",data:{img:"../img/1.jpg"}})</script>

v-bind v-on:

html:

		<div id="app"><!-- 为class属性动态添加取消样式 --><img :src="img" :title="title" v-bind:class="{imgcss:isActive}"><!-- v-on 为标签添加事件 --><input type="button" value="改变1"	v-on:click="test1()"><input type="button" value="改变2"	@click="test2()"></div>

css:

		<style>.imgcss{width: 100px;height:	100px;}</style>

js:

		<script>var app=new Vue({el:'#app',data:{img:"../img/1.jpg",title:"a",isActive:false},methods:{	//定义函数 可以在函数中使用this关键字访问data中的数据test1(){this.isActive=false;this.title="改变1";},test2(){this.isActive=true;this.title="改变2";}}})</script>

v-if:

html:

		<div id="ddd"><!--v-if v-show 都可以控制标签显示或隐藏v-if 隐藏标签时，直接将标签冲网页中删除了v-show 隐藏标签时，只是改变了标签的display值--><img :src="img" v-if="isshow"/><hr><img :src="img" v-show="isshow"/><input type="button" value="操作" v-on:click="oper()"/></div>

js:

		<script>var ddd=new Vue({el:'#ddd',data:{img:"../img/1.jpg",isshow:false},methods:{oper(){this.isshow=true;}}})</script>

生命周期：

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数 据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时 在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添 加自己的代码的机会。

		var ddd=new Vue({el:'#ddd',data:{img:"../img/1.jpg",},methods:{oper(){}},// vue对象的生命周期钩子函数，在生命周期的每个阶段提供一个函数// 供我们执行某些需要的操作beforeCreate(){console.log("vue对象创建之前");},created(){console.log("vue对象创建完成");},beforeMount(){console.log("对象与标签绑定之前");},mounted(){console.log("vue对象与标签绑定之后");// 常用，当vue对象创建成功，与标签绑定成功之后执行我们想要的操作// 类似于之前的onload事件}})