vue官方网址：Vue.js
Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架。区别于jquery。
今日目标：
1.使用vue显示数据
2.使用vue的事件
3.vue的生命周期
一、vue的使用方法
导入环境，
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>标签
<div id="dd">
</div>这是一个正常标签，如果想使用vue在标签内进行操作，需要新建vue,并且绑定对应标签
<script type="text/javascript">
new Vue({
el:'#dd',
});
</script>现在，在标签“dd”内，就可以使用vue的相关资源了。
二、vue的基础语法
今天只有很简单的几点。
1.双向数据绑定
在vue绑定的标签区域内，可以使用vue中定义的变量。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="dd">
<p>{{msg}}</p>
<p v-text="msg"></p>
<p>{{a}}</p>
<input type="text" v-model="msg"/>
</div>
<script type="text/javascript">
new Vue({
el:'#dd',
data(){
return {
msg:'Hello World',
a:'wooooo',
b:'ahhhhh'
};
}
});
</script>
</body>
</html>
这个页面中的vue一共定义了三个属性，"msg","a","b"。
可以通过{{变量名}},直接调用，也可以通过v-text属性调用，而如果是输入框调用，则所有引用该变量的标签会同步变化。
效果：
如果修改输入框的值
上面调用这个变量的地方都发生了变化。也就是，在vue中定义的变量，可以被绑定的区域调用，也可以被绑定的区域改变，如果被改变，则所有引用该变量的地方也会改变，这就是双向数据绑定。
2.属性、事件
属性：
在vue中，如果在绑定区域内，标签的属性值需要调用vue中的属性，则需要按照vue的写法，具体的上文中的input标签就是，使用v-model，为属性调用vue中的值。
事件：
vue中的事件定义，与变量定义类似：
<body>
<div id="dd">
<p>{{msg}}</p>
<p v-text="msg"></p>
<input type="text" v-model="msg"/>
<button type="button" v-on:click="a">点我</button>
</div>
<script type="text/javascript">
new Vue({
el:'#dd',
data(){
return {
msg:'Hello World'
};
},
methods:{
a(){
alert(this.msg)
}
}
});
</script>
</body>
注意，事件的调用，也要使用vue的语法， v-on:(调用方式)，上文中的触发方式是点击。
点击按钮：
三、vue的生命周期
类似于servlet的那几个方法，我们在使用时，她规定了运行顺序，按照一定的顺序运行钩子函数,不过内部具体运行代码我们是可以重写的，也就是重写钩子函数
流程图：
分四个时期
挂载期：两个函数——beforeCreate、created.
方法主要任务及调用顺序解释：
beforeCreate:刚刚new Vue()之后，这个时候，数据还没有挂载呢，只是一个空壳created:这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数
在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染beforeMount：虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发
updated在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取
接下来开始render，渲染出真实dommounted：此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了，
可以在这里操作真实dom等事情...beforeUpdate:重新渲染之前触发
然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染updated:数据已经更改完成，dom也重新render完成
1288
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
