初学Vue，Vue的第一个程序

Vue的自我认识

Vue是一个渐进式框架，也是一种称之为option配置型框架。

首先创建出一个vue实例，然后将所需要的一些操作通过对象形式传入vue，其中的el、data、methods、computed等就是对象的一些属性，而像生命周期的这些方法，只不过是vue实例的一些回调函数。

---

一、vue.js的下载

点击进入Vue官网下载

二、Vue之挂载点

引入vue.js后，创建一个html文件，首先在js代码中创建一个Vue对象，然后在Vue对象中有一个叫el的属性，el的值为一个dom元素，这样的一个与标签的绑定就叫作挂载点。

<div id="root"></div>
<script type="text/javascript">
    new Vue({
        el: "#root", //挂载点,与标签绑定
    })
</script>

三、v-text和v-html运用以及它们之间的区别

v-text和v-html都是对元素内容进行的一个绑定，在Vue中有一个属性叫data，是存放一系列的数据值的，将自己要显示的内容定义在data的一个变量中，v-text和v-html的区别在于html可以解析脚本语言，text无法解析脚本只会原样显示。

<div id="root">
	<p v-text="msg"></p>
	<p v-html="msg"></p>
</div>
<script type="text/javascript">
	new Vue({
		el: "#root", 
		data: {
			msg: "<div style='color:red'>123</div>"
	    },
	})
</script>

四、事件绑定器

在vue的模板中使用v-on来进行事件的绑定，也可使用vue的语法糖@来简写v-on指令，事件的方法定义在methods中。

<div id="root">
	<button v-on:click="btnClick">按钮</button>
	<button @:click="btnClick">按钮</button>
</div>
<script type="text/javascript">
	new Vue({
		el: "#root",
		data: {},
	    methods： {
	    	btnClick() {
	    		console.log("您点击了botton按钮")
	    	}
	    }
	})
</script>

五、属性绑定器

在vue的模板中使用v-bind来进行属性的绑定，也可使用vue的语法糖 : 来简写v-bind指令。

<div id="root">
	<p v-bind:class="{active: isActive}">属性绑定</p>
	<p :class="{active: isActive}">属性绑定</p>
</div>
<script type="text/javascript">
	new Vue({
		el: "#root",
		data: {
			isActive: true
		}
	})
</script>
<style>
	.isActive{
		color: red
	}
</style>

六、双向绑定器

在vue的模板中使用v-model来进行数据与试图的双向绑定。

<div id="root">
	<input v-model="inputVal"></input>
	<p>{{ inputVal }}</p>
</div>
<script type="text/javascript">
	new Vue({
		el: "#root",
		data: {
			inputVal: "初始值"
		}
	})
</script>

---