1. 什么是Vue？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

2. 安装Vue

建立一个html文件，在head部分引用vue在线包（当然，您也可以下载下来使用）

开发环境包：

<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

生产环境包：

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

3. 入门

Vue就是通过实例化一个Vue对象，传入一个selector，一个控制器来实现各种UI渲染的。

3.1. 文本渲染

html

<span class="test">
   {{ message }}
</span>

script

var app = new Vue({
    el: '.test',
    data: {
        message: '这是一段文本'
    }
});
app.message = '新文本';

3.2. 绑定title

html

<span class="test">
    <b v-bind:title="message">鼠标悬停几秒显示title信息</b>
</span>

script

var app = new Vue({
    el: '.test',
    data: {
        message: '这是title标题信息'
    }
});

3.3. 条件控制

html

<span class="test">
    <b v-if="seen">看到了吗？</b>
</span>

script

var app = new Vue({
    el: '.test',
    data: {
        seen:false
    }
});
app.seen = true;

3.4. 循环

html

<span class="test">
    <ul>
        <li v-for="item in arr"><b>{{  item.text  }}</b></li>
    </ul>
</span>

script

var app = new Vue({
    el: '.test',
    data: {
        arr:[
            {text:"A"},
            {text:"B"},
            {text:"C"}
        ]
    }
});
app.arr.push({text:"D"});

3.5. 事件

html

<span class="test">
    <a v-on:click="funName">{{ message }}</a>
</span>

script

var app = new Vue({
    el: '.test',
    data: {
        message : '请点击我'
    },
    methods: {
        funName : function(){
            this.message = '刚刚点击了我';
        }
    }
});

3.6. 表单项绑定

html

<span class="test">
    <label>{{ selected }}</label>
    <select v-model="selected">
        <option>无选择</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
    </select>
</span>

script

var app = new Vue({
    el: '.test',
    data: {
        selected : 'C'
    }
});

3.7. 组件

script（模板定义）

Vue.component('li-item', {
    props : ['item'],
    template: '<li>{{ item.text }}</li>'
});

html

<span class="test">
    <ol>
        <li-item v-for="li in olList"
              v-bind:item="li"
              v-bind:key="li.id">
        </li-item>
    </ol>
</span>

script

var app = new Vue({
    el: '.test',
    data: {
        olList : [
            {id:1, text:'A'},
            {id:2, text:'B'},
            {id:3, text:'C'}
        ]
    }
});

4. 牛刀小试

4.1. 应用于表格

5. TFWEB的Vue

5.1. 命名规则

组件内部的信息类的属性，我们统一放到 info 这个集合里，例如：info : { title : 'title', desc : 'desc' ... }
组件内部的子组件，可以考虑使用独立的集合，例如：options : { ... } elements : { ... }
组件内部的插槽，可以考虑使用独立的集合

5.2. 属性绑定

属性名称不区分大小写，需要用“-”分隔，但是JSON数据的节点名称如果包含“-”又必须用引号括起来。将“-”替换成“_”是个不错的选择。

<my-component :isSpec="isSpec"></my-component>
这里的 isSpec 会被转移成 isspec，在接收的时候也必须用 props : { isspec : { } } 接收

<my-component :is-spec="isSpec"></my-component>
这里的 is-spec 包含“-”，在接收的时候必须加引号括起来 props : { 'is-spec' : { } } 接收

<my-component :is_spec="isSpec"></my-component>
这里的 is_spec 包含“_”，在接收的时候可直接 props : { is_spec : { } } 接收

5.3. 事件绑定

事件名称不区分大小写，需要用“-”分隔，但是JSON数据的节点名称如果包含“-”又必须用引号括起来。将“-”替换成“_”是个不错的选择。

<my-component @callSpec="callSpec"></my-component>
这里的 callSpec 会被转移成 callspec，对应的方法名称也应该是 callspec : function(){ }

<my-component @call-spec="callSpec"></my-component>
这里的 call-spec 包含“-”，对应的方法名称也应该是 'call-spec' : function(){ }

<my-component @call_spec="callSpec"></my-component>
这里的 is_spec 包含“_”，对应的方法名称也应该是 call_spec : function(){ }

5.4. 数据优先级

数据优先级由高到低为：组件调用传递 > 组件接收默认 > 组件内建
数据初始化优先级由高到低为：mounted > created > data

html

<div id="comp"><comp :a1="a1"></comp></div>

script

Vue.component('comp', {
    props : {
        a1 : {
            default : 'props'
        }
    },
    data : function(){
        return {
            a1 : 'data'
        }
    },
    mounted : function(){
        this.a1 = 'change on mounted';
    },
    created : function(){
        this.a1 = 'change on created';
    },
    template : '<div>\{\{a1\}\}</div>'
});

new Vue({
    el : '#comp',
    data : {
        a1 : 'pass'
    }
});

5.5. 组件事件

5.5.1. 子组件调用父组件方法

父组件通过在子组件上设置 @父组件方法="父组件方法" 传递方法给子组件，子组件通过子组件方法里执行 this.$emit('父组件方法') 调用父组件方法

子组件

Vue.component('son', {
    methods : {
        call_fa_fun : function(){
            this.$emit('fa_fun');
        }
    }
    template : '<div>'+
    '    <a @click="call_fa_fun">call fa fun</a>'+
    '</div>'
});

父组件

Vue.component('fa', {
    methods : {
        fa_fun : function(){
            alert('call from son');
        }
    }
    template : '<div>'+
    '    <son @fa_fun="fa_fun"></son>'+
    '</div>'
});

html

<fa id="test"></fa>

javascript

new Vue({
    el : '#test'
});

5.5.2. 父组件调用子组件方法

子组件通过在自身设置 ref="子组件别名" 传递句柄给父组件，父组件通过父组件方法里执行 this.$refs.子组件别名.子组件方法() 调用子组件方法

父组件

Vue.component('fa', {
    methods : {
        call_son_fun : function(){
            this.$refs.son.son_fun();
        }
    }
    template : '<div>'+
    '    <son ref="son"></son>'+
    '    <br />'+
    '    <a @click="call_son_fun">call son fun</a>'+
    '</div>'
});

子组件

Vue.component('son', {
    methods : {
        son_fun : function(){
            alert('call from fa');
        }
    }
    template : '<div>son</div>'
});

html

<fa id="test"></fa>

javascript

new Vue({
    el : '#test'
});

5.5.3. 子组件之间相互调用方法

声明一个事件调度 var VueEventCtrlr = new Vue() 用来传递事件，子组件A通过 mounted 函数里定义自定义函数 VueEventCtrlr.$on('自定义函数', function(){ ... }) 给子组件B使用，子组件B通过 VueEventCtrlr.$emit('自定义函数', ...) 调用自定义函数

调度

var VueEventCtrlr = new Vue();

子组件A

Vue.component('a_com', {
    data : function(){
        return {
            msg : ''
        }
    },
    methods : {
        call_b_fun : function(){
            VueEventCtrlr.$emit('b_fun', this.msg);
        }
    },
    template : '<div>'+
    '输入：<input type="text" @keyup="call_b_fun" v-model="msg" />'+
    '</div>'
});

子组件B

Vue.component('b_com', {
    data : function(){
        return {
            msg : ''
        }
    },
    mounted : function(){
        var ex = this;
        VueEventCtrlr.$on('b_fun', function(d){
            ex.msg = d;
        });
    },
    template : '<div>打印：{{msg}}</div>'
});

html

<div id="test">
    <a_com></a_com>
    <b_com></b_com>
</div>

javascript

new Vue({
    el : '#test'
});

5.6. 插槽

5.6.1. 规范

插槽使用 <slot name="xxx"></slot> 定义
插槽传值可以用 <template slot="xxx"></template>，也可以用 <div slot="xxx"></div> 这样的普通html标签
插槽不能跨级传递，也就是说“爷”组件只能向“子”组件传 slot 值，不能向“孙”组件传 slot 值

同福

Vue学习笔记

1. 什么是Vue？

2. 安装Vue

3. 入门

3.1. 文本渲染

3.2. 绑定title

3.3. 条件控制

3.4. 循环

3.5. 事件

3.6. 表单项绑定

3.7. 组件

4. 牛刀小试

4.1. 应用于表格

5. TFWEB的Vue

5.1. 命名规则

5.2. 属性绑定

5.3. 事件绑定

5.4. 数据优先级

5.5. 组件事件

5.5.1. 子组件调用父组件方法

5.5.2. 父组件调用子组件方法

5.5.3. 子组件之间相互调用方法

5.6. 插槽

5.6.1. 规范