介绍
Vue 是一套用于构建用户界面的渐进式框架,它被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
特点
在前端开发中,经常要通过js代码来进行一些逻辑操作,最终还要把这些逻辑操作的结果展现在页面中,这需要我们通过操作DOM来完成。而Vue这种MVVM模式的框架,通过viewmodel实现数据双向绑定,让数据自动地双向同步,从而避免了操作DOM,实现了解耦。
- 声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:<body> <div id="app"> <p>{{ message }}</p> </div> </body> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }); </script>
现在数据和 DOM 已经被建立了关联,所有东西都是响应式的。我们只需要修改 app.message
的值,上例的html页面的显示就会相应地更新。这与之前我们需要使用jquery操作DOM元素来改变DOM元素的内容( $('#app p’).text(...); )相比,简单了很多。
在这里,我们更新了应用的状态,但却并没有触碰 DOM —— 所有的 DOM 操作都由 Vue 来处理,我们编写的代码只需要关注逻辑层面即可。
- 组件化应用构建
Vue允许我们使用小型、独立和通常可复用的组件来构建大型应用。<body> <ol id="app"> <!-- 创建一个 todo-item 组件的实例 --> <todo-item></todo-item> </ol> </body> <script> // 定义名为 todo-item 的新组件 Vue.component('todo-item', { template: '<li>这是个待办项</li>' }); var app = new Vue({ el: '#app', }); </script>
所有的 Vue 组件都是 Vue 实例,并且接受相同的选项对象 (一些根实例特有的选项除外)。
Vue生命周期
Vue的使用
- Vue实例的数据(data对象)
当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其data
对象中能找到的所有的属性。当这些属性的值发生改变时,视图会进行重渲染并匹配更新为新的值。值得注意的是只有当实例被创建时data
中存在的属性才是响应式的。 - 插值
文本:<span>Message: {{ msg }}</span>
html标签:<div v-bind:id="dynamicId"></div>
- 指令
指令是带有v-
前缀的特殊属性。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。一些指令能够接收一个“参数”,在指令名称之后以冒号表示,如 “v-bind:id”。 - 计算属性
在模板中放入太多的逻辑会让模板过重且难以维护,因此,对于任何复杂逻辑,我们都应当使用计算属性。而且,计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值,因此,使用计算属性(computed)能够减少函数的执行次数。 - 事件处理
事件监听:用v-on
指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。
事件修饰符:使用事件修饰符,可以使我们定义的方法(method)只有纯粹的数据逻辑,而不需要去处理 DOM 事件细节。
.stop
- 调用event.stopPropagation()
。.prevent
- 调用event.preventDefault()
。.capture
- 添加事件侦听器时使用 capture 模式。.self
- 只当事件是从侦听器绑定的元素本身触发时才触发回调。.{keyCode | keyAlias}
- 只当事件是从特定键触发时才触发回调。.native
- 监听组件根元素的原生事件。.once
- 只触发一次回调。.left
- (2.2.0) 只当点击鼠标左键时触发。.right
- (2.2.0) 只当点击鼠标右键时触发。.middle
- (2.2.0) 只当点击鼠标中键时触发。.passive
- (2.3.0) 以{ passive: true }
模式添加侦听器
- 组件
在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。所有的 Vue 组件同时也都是 Vue 的实例,所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。
使用:分为全局注册和局部注册。 - 混入
。。。