这篇文章主要讲vue的认识和一些vue的基础方法。

1. 认识vue

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
Vue 只关注视图层， 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

1.1 一个基本vue代码结构

  • 引入vue：

    1
    <script src="./lib/vue-2.4.0.js"></script>

  • 视图：

    1
    2
    3
    <div id="app">
        <p>{{ msg }}</p>
    </div>

  • vue模型：

    1
    2
    3
    4
    5
    6
    let vm = new Vue({
        el: '#app', //选择器
        data: { //数据
            msg: 'hello vue' //绑定
        }
    })

1.2 基础语法

  • 插值表达式和v-text

    1
    2
    3
    <!-- 二者效果相同，不过v-text中可以写合法的表达式 -->
    <p v-cloak>{{ msg }}</p>
    <p v-text="msg + '123'"></p>

  • v-cloak

    1
    2
    3
    [v-cloak] { // 让插值表达式没有加载完时隐藏
        display: none;
    }

  • v-html 中可以是HTML字符串

  • v-bind vue提供的属性绑定机制，可缩写成 :

    1
    2
    <input type="button" value="click me" v-bind:title="myTitle">
    <input type="button" value="click me" :title="myTitle">

  • v-on vue提供的事件绑定机制，可缩写成 @

    1
    2
    <input type="button" value="点我" v-on:click="fn">
    <input type="button" value="点我" @click="fn">

1.3 事件修饰符

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。
Vue.js通过由点(.)表示的指令后缀来调用修饰符。

  • 事件修饰符

    1
    2
    3
    4
    5
    .stop //阻止冒泡
    .prevent //阻止默认事件
    .capture //添加事件侦听器时使用事件捕获模式
    .self //只有当事件在该元素本事触发时触发回调，只会阻止自己的冒泡或者事件捕获，不能代替 .stop
    .once //事件只触发一次

1.4 在vue中使用样式

使用class样式

  • 数组

    1
    <p v-bind:class="['blue', 'italic']">v-bind:class测试绑定类名属性</p>

  • 数组中使用三元表达式

    1
    <p :class="['blue', 'italic', flag?'active':'']">v-bind:class测试绑定类名属性</p>

  • 数组中嵌套对象

    1
    <p :class="['blue', 'italic', {'space': flag}]">v-bind:class测试绑定类名属性</p>

  • 直接使用对象

    1
    2
    3
    <p :class="{blue: false, italic: true, big: true, space: true}">v-bind:class测试绑定类名属性</p>
    <!--或者将class类名对象放到data中，在class中直接使用-->
    <p :class="clsObj">v-bind:class测试绑定类名属性</p>
    1
    2
    3
    4
    5
    6
    7
    8
    let vm = new Vue({
        el: '#app',
        data: {
            flag: true,
            clsObj: {blue: false, italic: true, big: true, space: true}
        },
        methods: {}
    });

使用style样式

  • 直接在元素上通过 :style 的形式，书写样式对象

    1
    <p :style="{color: 'red', 'font-size': '40px'}">v-bind:style测试绑定样式</p>

  • 将样式对象定义到 data 中，并直接引用到 :style 中

    1
    2
    3
    data: {
       styleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
    }
    1
    <p :style="styleObj">v-bind:style测试绑定样式</p>

  • 在 :style 中通过数组，引用多个 data 上的样式对象

    1
    2
    3
    4
    data: {
        styleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
        styleObj2: { fontStyle: 'italic' }
    }
    1
    <p :style="[styleObj, styleObj2]">v-bind:style测试绑定样式</p>

1.5 v-for循环

  • 遍历普通数组

    1
    2
    <p v-for="item in arr">普通数组：{{ item }}</p>
    <p v-for="(item, i) in arr">普通数组第{{ i }}项是：{{ item }}</p>

  • 遍历对象数组

    1
    2
    <p v-for="item in objList">对象数字：{{ item.name }}</p>
    <p v-for="(item, i) in objList">对象数组索引：{{ i }}---名字：{{ item.name }}</p>

  • 遍历对象

    1
    <p v-for="(val, key, i) in user">遍历对象的键是{{ key }} -- 值是{{ val }} -- 索引是：{{ i }}</p>

  • 遍历数字

    1
    <p v-for="count in 12">这是第{{ count }}次循环</p>

  • v-for中的key，2.2.0+版本里当组件中是用了v-for时必须绑定一个key以确保dom元素发生变化时，准确标识每个节点的身份

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <!--为objList添加新用户-->
    <!--注意：如果没有key的标识，添加完数据后之前选定的元素会发生变化-->
    <label>ID：
        <input type="number" v-model="id">
    </label>
    <label>name：
        <input type="text" v-model="name">
    </label>
    <input type="button" value="添加" @click="add">

    <div v-for="item in objList" :key="item.id">
        <input type="checkbox">{{ item.id }} ---- 姓名：{{ item.name }}
    </div>

  • vue中定义的对象

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    let vm = new Vue({
        el: '#app',
        data: {
            id: '',
            name: '',
            arr: [1, 2, 3, 4, 5, 6],
            objList: [
                {id: 1, name: 'tom'},
                {id: 2, name: 'jerry'},
                {id: 3, name: 'mike'},
                {id: 4, name: 'jack'}
            ],
            user: {
                id: 1,
                name: 'xiao xin',
                gender: 0,
                hobby: 'girls'
            }
        },
        methods: {
            add() {
                this.objList.unshift({id: this.id, name: this.name});
            }
        }
    })