1.知识点
1.Vue 文件结构：
template、script、style
2.模板语法：
插值：可以插数据、可以插js表达式
指令与指令缩写：
插入HTML结构 v-html=""
绑定属性 v-bind： 简写为 ：
绑定事件 v-on： 简写为 @
2.插值
插值：{{msg}}} ，也可以插入js表达式 比如 {{（count+1）*100 }}
3.插入HTML结构
插入HTML结构， v-html="template" 输出html结构，在{{}}里面写是不生效的，比如
4.绑定属性
绑定属性，也就是给属性赋值 ，比如 v-bind:href="url" ， v-bind: 也可以简写为 : ，比如href、class、title等这些都是属性
5.绑定事件
绑定事件，v-on：，比如 v-on:click="submit()" ， v-on: 也可以简写为 @
注意：
方法里的this，指的是Vue这个对象
6.完整代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- {{}}插入字符串 -->
<div>{{ msg }}</div>
<!-- {{}}插入数字 -->
<div>count:{{ count }}</div>
<!-- {{}}插入js表达式 -->
<div>这里在插入的是一个js表达式:count+1000,html会运算出结果：{{ count+1000 }}</div>
<!-- {{}}插入HTML结构，效果展示，失败 -->
<div>{{ template }}</div>
<!-- 用 v-html="template" 插入HTML结构，成功 -->
<div v-html="template"></div>
<!-- 用 v-bind:href="url" 绑定属性 , 简写是： -->
<a v-bind:href="url"> v-bind:href="url" 绑定href属性</a><br><br>
<!-- v-bind:href="url" 简写为 :href="url" -->
<a :href="url">简写为 :href="url"</a><br><br>
<!-- 用 v-on:click="submit()"绑定事件，简写是@ -->
<button v-on:click="submit()">v-on:click="submit()"绑定事件,点击我，count加1</button><br><br>
<!-- 用 v-on:click="submit()" 简写为 @click="submit()" -->
<button v-on:click="submit()">简写为 @click="submit()" 点击我，count加1</button><br><br>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
msg: 'hello world',
count: 0,
template: '<h1>h1标签</h1>',
url: 'www.baidu.com'
},
methods: {
submit: function(){
this.count ++
}
}
})
</script>
</body>
</html>
7.上述代码页面展示效果
