vue框架学习报告

介绍

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 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。

使用：分为全局注册和局部注册。
混入
。。。

猜你喜欢