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的使用

  1. Vue实例的数据(data对象)
    当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,视图会进行重渲染并匹配更新为新的值值得注意的是只有当实例被创建时 data 中存在的属性才是响应式的。

  2. 插值
    文本:

        <span>Message: {{ msg }}</span>
    html标签:
    <div v-bind:id="dynamicId"></div>

  3. 指令
    指令是带有 v- 前缀的特殊属性。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。一些指令能够接收一个“参数”,在指令名称之后以冒号表示,如 “v-bind:id”。

  4. 计算属性
    在模板中放入太多的逻辑会让模板过重且难以维护,因此,对于任何复杂逻辑,我们都应当使用计算属性。而且,计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值,因此,使用计算属性(computed)能够减少函数的执行次数。

  5. 事件处理
    事件监听:用 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 } 模式添加侦听器

  6. 组件

    在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。所有的 Vue 组件同时也都是 Vue 的实例,所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。

    使用:分为全局注册和局部注册。


  7. 混入
    。。。

    
阅读更多
文章标签: vue
个人分类: 系统分析与设计
想对作者说点什么? 我来说一句

vue学习视频.txt

2018年01月03日 49B 下载

没有更多推荐了,返回首页

不良信息举报

vue框架学习报告

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭