目录
1，vue.js是什么？
Vue (读音 /vjuː/，类似于 view) 是国内大神尤雨溪开发的，
是一套用于构建用户界面的渐进式框架，Vue 可以自底向上逐层应用。
Vue 的核心库只关注视图层，是MVVM响应式编程模型，避免直接操作DOM , 降低DOM操作的复杂性。
注 意 ： V u e 只 兼 容 I E 9 及 以 上 版 本 \color{#FF0000}{注意：Vue只兼容IE9及以上版本} 注意：Vue只兼容IE9及以上版本
因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性
例如：Object.defineProperty()，
1.1，渐进式框架
个人理解：开始时不需要使用它的全部功能，可以后续逐渐添加。
1.2，自底向上逐层应用
由基层开始做起，把基础的东西写好，再逐层往上添加效果和功能。
1.3，MVVM
MVVM是Model-View-ViewModel的简写，它是一种基于前端开发的架构模式。
- Model：代表数据模型，数据和业务逻辑都在Model层中定义；对应到前端就是javascript对象。
- View：代表UI视图，负责数据的展示；对应前端就是dom。
- ViewModel：负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作；
ViewModel是View与Model的连接器，Model和ViewModel之间有着双向数据绑定的联系，View与Model通过ViewModel实现双向绑定。
它有两个功能：
一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。
二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。
这两个功能都实现的，称为数据的双向绑定。
2，vue的核心思想
2.1，数据驱动(数据双向绑定)
Vue组件data中的数据在创建时，都会被改造为set,get类型的属性，当数据发生变化时set方法就会调用，set方法中添加了重新渲染（仅仅是重新渲染页面中使用这个数据的部分，不是全部重新渲染）的代码。
2.2，组件化开发
组件化就是实现了扩展HTML元素，封装可用的代码。
1、页面上每个独立的可视/可交互区域视为一个组件。
2、每个组件对应一个工程目录，组件所需的各种资源在这个目录下就近维护。
3、页面不过是组件的容器，组件可以嵌套，自由组合形成新的页面。
3，vue组件实例
<body>
<div id="app">
<p>{
{txt}}</p>
</div>
<script>
new Vue({
el:"#app",
data:{
txt:"hello world",
},
methods:{
},
created：{
}
});
</script>
</body>
3.1，el
组件的挂载点元素的选择器。在Vue中，el通过id="app"的特征钩住了<div>中的所有内容，这样我们就可以在Vue中实现对DOM中的操作。
3.2，data
组件的数据，值是一个对象，在对象中通过键值对的形式为组件添加数据。
3.3，methods
组件的方法，包含的是我们对这个页面的整个逻辑以及页面中的触发事件，其中的内容相当于JavaScript中的function内容。
3.4，实例生命周期钩子函数
钩子函数有8个，ajax获取数据在mounted（模板渲染完毕后）中执行。
| 钩子函数 | 触发的事件 | 可以做的事情 |
|---|---|---|
| beforeCreadted | vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。 | 加loading事件 |
| created | vue实例的数据对象data有了，$el还没有 | 结束loading、请求数据为mounted渲染做准备 |
| beforeMount | vue实例的$el和data都初始化了，但还是虚拟的dom节点，具体的data.filter还未替换。 | |
| mounted | vue实例挂载完成，data.filter成功渲染 | 配合路由钩子使用,ajax获取数据 |
| beforeUpdate | data更新时触发 | |
| updated | data更新时触发 | 数据更新时，做一些处理（此处也可以用watch进行观测） |
| beforeDestroy | 组件销毁时触发 | |
| destroyed | 组件销毁时触发，vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在 | 组件销毁时进行提示 |
4，模板语法
4.1，插值
<body>
<div id="app">
<p>{
{
txt}}</p>
<p>{
{
2+3}}</p>
</div>
<script>
new Vue({
el:"#app",
data:{
txt:"hello world",
},
});
</script>
</body>
在组件的模板中，可以使用{
{}}进行模板差值，将组件数据绑定到页面中。 {
{}}中除了可以绑定组件数据，还可以绑定表达式 。
4.2，常用指令
4.2.1，v-model
v-model：用于数据的双向绑定。
<input type="text" v-model="txt">
4.2.2，v-bind
v-bind：用于标签属性的数据绑定。
//语法：xxx是要绑定的属性名，yyy是要绑定的组件中的数据.
<img v-bind:xxx="yyy" class=
最低0.47元/天 解锁文章
1002
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
