Vue Base

• Vue是一套用于构建用户界面的渐进式框架，Vue被设计为可自底向上逐层应用。
• Vue的核心只关注视图层，易于上手，且便于和第三方库或项目整合。
• Vue不支持IE8及以下版本，因为Vue使用了IE8无法模拟的ECMAScript5特性。
• 使用Vue时推荐在浏览器上安装vue detools工具，以便审查和调试。
• Vue提供了官方的CLI命令行接口工具，为SPA单页应用搭建复杂的脚手架。

安装

// 安装最新稳定版
npm i vue

编译器

如果需要在客户端编译模块，比如传入一个字符串给template选项，或挂在到元素上DOM内部的HTML作为模块，就需添加上编译器。

例如：编译器配置

// 需编译器
new Vue({template:"
need compiler
"});

//取消template选项此时则无需编译器
new Vue({
   render(h)=>{
    return h("index", this.message)   
  }  
});

两种方式的区别在于，当使用vue-loader或verify时，*.vue文件内部的模板会在构建时编译成JavaScript文件，而在最终打好的包中是不需要编译器的，只需要运行时版本即可。因为运行时版本比完整版体积小30%左右，因此推荐使用无需编译器的版本

声明式渲染

Vue.js的核心是一个允许采用简洁模板语法来声明式的将数据渲染进DOM的系统。

文本插值{{ varname }}

    
    
    


    
{{message}}
    

通过创建Vue对象，数据和DOM建立关联，所有东西都是响应式的。

数据绑定 v-bind:key=value

    
    
    


    

        鼠标悬停，查看动态绑定。
    
    

v-bind attribute被称为指令，指令带有前缀v-，指令是Vue提供的特殊attribute。
v-bind称之为指令，会在渲染的DOM上应用特殊的响应式行为。
v-bind:title="message" 表示将这个元素节点的title特性和Vue实例的message属性保持一致。

渲染流程

1.浏览器从上往下依次解析，若遇到id=app的div内部的{{ message }}，则直接作为普通文本渲染到页面。

2. 浏览器向下解析执行，遇到JS外链脚本，发起请求下载脚本。
3. 当前页面获取JS脚本后执行vue.js，执行结束后向全局暴露一个全局对象Vue。
4. 浏览器解析当前页面JS脚本，创建Vue实例，通过Vue的el属性指定程序的接管范围，通过data属性向Vue实例的应用程序中初始化了一个message成员变量。
5. Vue应用实例通过el属性指定的#app的div，开始解析执行Vue识别的语法，{{ message }}在Vue称之为“插值表达式”。在双花括号插值表达式中可使用当前元素所属Vue程序接管范围的data中的数据。

到此数据和DOM已经被建立了关联，所有东西都是响应式的。

条件 v-if

• vue可以将数据绑定到DOM文本或attribute中，也看绑定到DOM结构中。
• vue提供强大的过度效果，在Vue插入/更新/移除元素时会自动应用过度效果。

例如：控制切换元素是否显示

    
    
    


    

        控制切换元素
    
    

循环v-for

v-for指令可绑定数组的数据来渲染项目列表。

    
    
    


    

        

            
{{item.text}}
        
    
    

处理用户输入

v-on指令添加一个事件监听器，通过它调用在Vue实例中定义的方法，让用户与应用进行交互。

    
    
    


    

        
{{message}}
        逆转
    
    

v-model指令实现表单输入和应用状态之间的双向绑定

    
    
    


    

        
{{message}}
        
    
    

组件化应用构建

• 组件系统是一种抽象，允许使用小型、独立、可否用的组件构建大型应用。

• 几乎任意类型的应用界面都可抽象为一个组件树

• Vue中组件本质是一个拥有预定义选项的Vue实例

注册组件(创建组件)

子单元通过prop接口与父单元进行良好的解耦

使用组件的应用模板

Vue组件类似自定义元素-它是Web组件规范的一部分，因为Vue组件语法部分参考了该规范。差别在于：

• Web组件规范仍然处于草案阶段并未被所有浏览器原生实现
• Vue组件提供纯自定义元素所不具备的功能，例如跨组件数据流、自定义事件通信、构建工具集成等。

Vue实例

每个Vue应用通过Vue()函数创建实例

var viewmodel = new Vue({});

虽然并未完全遵循MVVM模型，单Vue设计也受它启发。

Vue应用通过new Vue()创建的根Vue实例，以及可选的嵌套的、可复用的组件树组成。

所有Vue组件都是Vue实例，并接受相同的选项对象。

数据与方法

当Vue实例被创建时，它向Vue的响应式系统中加入了data对象中能找到的所有属性。当属性发生改变时，视图产生响应，即匹配更新为新值。

当数据改变时，视图重渲染。只有当实例被创建时data中存在的属性才是响应式的。即若添加新属性则它的改动不会触发任何视图的更新。

若你之后需某属性，之前定义时设置初始值即可。