vue 插值表达式，v-cloak，v-text，v-html，以及v-bind,v-on

1，如何定义一个基本的vue代码结构
      1.1、导入vue
      1.2、创建一个vue实例
2，插值表达式=> {{}} 和v-text（默认v-text是没有闪烁问题的）
3，v-cloak          解决插值表达式闪烁的问题
4，v-html=“<h1>demo</h1>”           以html格式输出
5，v-bind           vue中提供的属性绑定机制            缩写为       ：
6，v-on              vue中提供的事件绑定机制           缩写为      @

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>vue初识</title>
		<style type="text/css">
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>

		<div id="app">
			<!-- 使用v-cloak能够解决插值表达式闪烁的问题 -->
			<p v-cloak>--{{ msg }}++</p>		<!-- --hello word++ -->
			<p v-text="msg">======</p>			<!-- hello word -->
			<!-- 默认v-text是没有闪烁问题的 -->
			<!-- v-text回覆盖元素中的原本的内容，但是 插值表达式 只会替换自己的这个占位符，不会把内容清空 -->
			
			<div> {{msg2}}	</div>				<!-- <h1>h1实验文本<h1> -->
			<div v-text="msg2"></div>			<!-- <h1>h1实验文本<h1> -->
			<div v-html="msg2"></div>				<!-- 解析后的内容 -->
			
			<!-- v-bind:提供绑定属性的指令 -->
			<!-- 注意：v-bind：指令乐意简写为 ：要绑定的属性 -->
			<!-- v-bind中，可以写合法的js表达式 -->
			<button type="button" v-bind:title="mytitle +'另外的内容'">按钮</button>
			<button type="button"		:title="mytitle +'另外的内容'">按钮</button><!-- 结果相同 -->

			<!-- vue中提供了v-on：事件绑定机制 -->
			<!-- <button type="button"		:title="mytitle +'另外的内容'" v-on:click="alert('hello')">按钮</button> -->
			<!-- 会报错，与b-ibing相识，会将其认为一个变量，而vue中没有这个变量,正确写法如下 -->
			<button type="button" v-on:click="show">按钮</button>
			<button type="button" @click="show">按钮</button><!-- 缩写 -->
		</div>
		<script type="text/javascript" src="vue.js"></script>
		<script type="text/javascript">

			var vm=new Vue({
				el:'#app',
				data:{
					msg:'hello word',
					msg2:'<h1>h1实验文本<h1>'
				},
				methods: {//定义了当前vue实例中所有可用的方法
					show: function() {
						alert("demo")
					}
				}
			})
		</script>
	</body>
</html>