体积：33k
虚拟dom，更高的运行效率
双向数据绑定
生态丰富，基于vue.js的ui框架、常用组件
使用场景广泛

安装与部署
1、<script>引用
<script src="https://cdn.jsdelivr.net/npm/" />
2、CLI命令行工具使用,npm
3、CDN

创建第一个vue应用
视图+脚本
视图：<div id="app">
{{mes}}
</div>

脚本：
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
mes: 'hello vue!'
}
});
</script>

数据与方法
每个Vue应用是通过Vue函数创建新的Vue实例开始的
var vm = new Vue({});

<div id = "app">
{{a}} {{b}}
</div>

<script type="text/javascript">
var data = { a: 1 };
var vm = new Vue({
    el : "#app",
    data : data
});
data.a = 2;
</script>

Vue实例使用$区分方法和属性
e.g.
vm.data
vm.$watch —>方法list

生命周期
学习->API->生命周期钩子
生命周期函数不能使用箭头函数，箭头函数没有this
beforeCreate
created
beforeMount：相关的渲染函数首次被调用
mount ed：el创建成功
beforeUpdate：数据更新前
updated：数据更新完成
errorCaptured
activated, destroyed

模板语法
Vue.js使用用了基于HTML的模板语法，所有Vue.js的模板都是合法的HTML，能被遵循规范的浏览器和解析器解析。

文本：{{}}进行数据绑定
v-once，进行一次性插值

原始HTML，v-html标签可以使用html代码,v-bind绑定属性
<div id = "app">
<p v-html="rawHtml"></p>
<div v-bind:class="color">test…</div>
<p>{{number + 1}}</p>
<p>{{ ok? 'YES' : 'NO' }} </p>
<p>{{ mes.split('').reverse().join(' ') }} </p>
</div>

<script type="text/javascript">
var vm = new Vue({
    el: "#app",
    data:{
        msg: "hey",
        rawHtml: '<span style="color:red">this is should be red</span>',
        color: 'red1',
        number: 9 ,
        ok : 1
    }
});

<style type="text/css">
.red1{color: red;}
.blue1{color:blue: font-size:100px;}
</style>

指令
v-前缀的特殊属性
v-if=”seen”
参数，一些指令能接受参数
修饰符，用.指明 <div @click="click1">
<div @click.stop="click2">click here</div>
</div>

class与style绑定
v-bind:class="[ isActive ? 'active' : '', isGreen ? 'green' : '']"
v-bind:class="{active : isActive, green : isGreen}"

在中括号里可以使用条件表达式
{}只能是json数组

条件渲染
v-if v-else-if v-else：条件改变少适用
v-show：始终渲染，常切换适用

数组渲染
v-for item in items

事件绑定：v-on
<button v-on:事件名:”方法名(参数,…,$event)”>
事件名：不同元素拥有各自的事件，如click，dblclick
$event 是原始DOM事件 常用事件修饰符：stop,prevent,passive,capture,self,once 表单输入绑定

v-model 在input,textarea,select上进行数据双向绑定

vue的组件应用：全局组件注册

component的局部注册，是在实例中添加component部分，并注册其名称，如下示范：

<div id="app">
<button-counter></button-counter>
<test></test>
</div>
<script type="text/javascript">
Vue.component('button-counter', {
        props: ['title'],
        data: function () {
                return {}
        },
        template: '<div><h1>hi…</h1></div>',
        methods:{
        }
})
var vm = new Vue({
        el : "#app",
        data : {
        },
        methods:{
        clicknow : function (e) {
                console.log(e);
                }
        },
components:{
        test : {
                template:"<h2>h2…</h2>"
                }
       }
});
</script>

实际应用中很少如上这样局部注册，更多的是通过类似java那样的单文件注册来完成的：

import ComponentA from './ComponentA' 
import ComponentC from './ComponentC' 

export default { 
    components: { ComponentA, ComponentC }, // ... 
}

单文件注册需要进行环境配置：

· 安装 npm

npm 全称为 Node Package Manager，是一个基于Node.js的包管理器，也是整个Node.js社区最流行、支持的第三方模块最多的包管理器。

npm -v

· 由于网络原因 安装 cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

· 安装 vue-cli

cnpm install -g @vue/cli

· 安装 webpack

webpack 是 JavaScript 打包器(module bundler)

cnpm install -g webpack

参考：Vue.js视频教程
Dcloud
Vue.js文字教程
Vue.js API