vue.js - 入门学习教程

1. 概述

相比另外两个JaveScript Frameworks（Angular.js by Google、React.js by Facebook），Vue.js高性能、更灵活、可维护性强。最关键的，Vue.js是国人设计开发的。
本文参考慕课的vue学习视频，整理总结完成。

• javaScript框架(库)汇总
  https://blog.csdn.net/Acmen_007/article/details/53020789

2. 入门学习

概念介绍

• 实例 - new Vue({})
• 挂载点 - Vue示例的el值对应的dom节点，例如div
• 模板 - 可以在dom节点中写，也可以在Vue实例中填写

备注：一般将模板写入到挂载点内部，便于代码走读

数据展示和方法绑定

• {{msg}}, 插值表达式，显示msg数据
• v-text='msg', 显示msg值，纯文本信息
• v-html='msg', 显示msg值，支持html标签
• v-on:click='handleClick', 绑定事件，对应vue实例的methods.handleClick

备注：v-on可以缩写为@

    

        
{{content}}
    

    

dom属性绑定

• v-bind:title='"aa " + title', title是dom节点属性，此处绑定到vue实例的title变量，注意，这里可以写js代码

备注：v-bind可以缩写为:

    

        

            {{content}}
        
    

    

双向数据绑定

• v-model='content', 实现挂载点与vue实例的双向绑定，绑定的变量是content

    

        

            {{content}}
        
        
        
{{content}}
    

    

计算属性

• computed，通过一个方法的return值，给某一个变量赋值。性能高，只有依赖的属性发生变化，才重新计算，并展示。如果依赖属性未变化，则不重新计算，用最近一次缓存结果。

侦听器

• watch，监听某一个变量的数值变化，如果变化则可以修改其他变量，或者执行一些方法

    

        姓：
        名：
        
姓名：{{fullName}}
        
改变次数：{{count}}
    

    

简单逻辑处理

• v-if，控制dom节点存在与否。当对应的变量值是true，则显示该dom节点，否则，删除该dom节点
• v-show，控制dom节点显示与否。当对应的变量值是true，则显示该dom节点，否则，只是隐藏，'display: none;'
• v-for, 循环展示list内容，可以通过v-for='item of list'实现。指定key值会提高遍历效率，key不能重复。

备注：频繁隐藏或展示，v-show效率更高

    

        
hello world
        toggle
        

            
{{item}}
            
        
    

    

TodoList Demo

    

        
        提交
        

            
{{item}}
        
    

    

TodoList组件拆分

• 全局组件，Vue.component，全局范围内定义一个组件对象，可以设置参数列表props（在dom中绑定属性，从dom中接收数据）
• 局部组件，定义一个组件变量，然后在vue实例中声明对他的使用

    

        
        提交
        

            
            
            
        
    

    

组件与实例的关系

• 任何一个vue项目是由一个个vue实例构成
• 每一个component都是一个vue实例

为了验证component是一个vue实例，我们可以在component里面写vue实例的属性，例如template、methods、data、computed、watch等

    

        
        提交
        

            
            
            
        
    

    

实现TodoList的删除功能

父组件与子组件的通信，是vue的重点和难点，需要深入理解下

• 父->子，父组件通过变量赋值到template中，再通过template的绑定属性，将数值传入到子组件中
• 子->父，采用发布订阅模式，父组件提前绑定一个方法，当子组件emit一个事件时，父组件可以获取该事件，执行相应的method

    

        
        提交
        

            
            
            
        
    

    

3. 总结

vue.js完美地将数据model的变化自动地反应到了view上，给coder提供很强的web前端开发框架。vue-cli脚手架提出vue生产项目的开发套路，接下来，我会继续总结介绍。