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>
