Vue学习日记（一）

最开始接触Vue可以先不使用脚手架工具。

首先从官网下载开发版本的vue.js。保存命名为vue.js

创建一个HTML文档，这里命名为vue1.html。

在头文件的下边引入js文件。

<script src="./vue.js"></script>

知识点一  挂载点 模板 实例

声明一个vue实例，使用 new Vue({})来实现。

el表示的是这个实例指的是哪一个元素。其所对应的div就是这个vue实例的挂载点。

{{}}代表的是插值表达式，其值是在实例中的data中赋值的。

知识点二：v-text 和 v-html的区别

v-text会将数据内容中的标签也显示出来，v-html则不会将标签显示出来 而是直接发挥标签的效果。

知识点三：v-on：click事件

v-on:click是点击触发事件，其触发事件写在实例methods中。其简写为@click。

<div id="root"><!--vue实例的挂载点-->
	<h1>{{number}}</h1><!-- {{}}插值表达式 -->
	<h1 v-text="content1"></h1>
	<h1 v-html="content"></h1>
	<div v-on:click="handlClick">{{content1}}</div>
	<div @click="handlClick">{{content1}}</div>
</div>

<script>
	        new Vue({
			el:"#root",//元素

			data:{
				msg:"hello world",
				number:123,
				content:"<h1>22</h1>",
				content1:"123"
			},
			methods:{
				handlClick:function(){
					this.content1="world "//this指的是实例中data
				}
			}
		})

	</script>