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:"<div>need compiler</div>"});

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

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

声明式渲染

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

文本插值`{{ varname }}`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">{{message}}</div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:'Hello'
            }
        })
    </script>
</body>
</html>

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

数据绑定 `v-bind:key=value`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <span v-bind:title="message">鼠标悬停，查看动态绑定。</span>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:'页面加载于 '+new Date().toLocaleString()
            }
        })
    </script>
</body>
</html>

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

渲染流程

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

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

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

条件 `v-if`

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <span v-if="seen">控制切换元素</span>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                seen:true
            }
        })
    </script>
</body>
</html>

循环v-for

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item in list">{{item.text}}</li>
        </ul>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                list:[
                    {text:'java'},
                    {text:'javascript'},
                    {text:'vue.js'},
                ]
            }
        })
    </script>
</body>
</html>

处理用户输入

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <p>{{message}}</p>
        <button v-on:click="reverseMessag">逆转</button>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:"hello world"
            },
            methods:{
                reverseMessag:function(){
                    this.message = this.message.split('').reverse().join('');
                }
            }
        })
    </script>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <p>{{message}}</p>
        <input type="text" v-model="message"/>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:"hello world"
            }
        })
    </script>
</body>
</html>

组件化应用构建

组件系统是一种抽象，允许使用小型、独立、可否用的组件构建大型应用。
几乎任意类型的应用界面都可抽象为一个组件树
Vue中组件本质是一个拥有预定义选项的Vue实例

注册组件(创建组件)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <ol>
            <todo-item v-for="item in list" v-bind:todo="item" v-bind:key="item.id"></todo-item>
        </ol>
    </div>
    <script>
        //子单元组件注册
        Vue.component('todo-item', {
            props:['todo'],//自定义特性
            template:'<li>{{todo.text}}</li>'
        });

        var app = new Vue({
            el:'#app',
            data:{
                list:[
                    {id:1, text:'java'},
                    {id:2, text:'javascript'},
                    {id:3, text:'vue.js'},
                ]
            }
        })
    </script>
</body>
</html>

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

使用组件的应用模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <app-nav></app-nav>
        <app-view>
            <app-sidebar></app-sidebar>
            <app-content></app-content>
        </app-view>
    </div>
</body>
</html>

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

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

Vue实例

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

var viewmodel = new Vue({});

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

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

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

数据与方法

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
    </div>
    <script>
        //数据对象
        var user = {username:'alice'};
        //将数据对象添加到Vue实例中
        var vm = new Vue({
            data:user
        });
        console.log(vm.username === user.username);

        //设置属性会影响到原始数据，反之亦然。
        vm.username = 'ben';
        console.log(user.username);
    </script>
</body>
</html>

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

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

Vue Base

声明式渲染

文本插值{{ varname }}

数据绑定 v-bind:key=value