VUE(1)创建实例

vue创建实例

<style>
[v-cloak]{
	display:none;
}
</style>
<div id="app">
	<p v-cloak> {{ msg }} </p>
	<p v-text="msg"></p>
	<p v-html="msg2"></p>
	<input type="button" value="按钮" v-bind:title="mytitle" v-on:click="show ">
</div>
var vm=new Vue({
	el:'#app',
	data:{
		msg:'123',
		msg2:'<h2>这是个大大的标题</h2>',
		mytitle : '自己定义的title',
	},
	methods:{
		show(){
			alert('123');
		},
	},
})

el：是element的缩写,表示当我们new的这个vue实例，要控制页面上的哪个区域。

data: 存放的是el中要用的数据，用插值表达式( {{ }} )调用，data是个对象。

v-cloak: 能够解决插值表达式闪烁的问题。

v-text: 他和插值表达式 没有太大区别，类似于jquery中的text()方法。

但是有两个区别：
1.v-text 没有闪烁问题；
2.v-text覆盖标签内的内容，插值表达式会替换自己的占位符({{}})中的内容,不会覆盖。

v-html:他也会覆盖标签中的内容，但是会识别html标签，类似于jquery中的html()方法。

v-bind:是vue中提供的用于绑定属性的指令，简写直接是冒号（：）+要绑定的属性；可以写合法的js表达式。如：

v-bind:title=" mytitle+'123' "

v-on：绑定事件机制 缩写是@。