Vue官网使用指南

https://cn.vuejs.org/

https://www.bilibili.com/video/BV1Zy4y1K7SH/?p=3


安装和启动

1
2
3
4
5
6
7
8
# 运行单独的Vue页面
$ npm install -g @vue/cli-service-global
$ vue serve

# 1. 下载安装 Node.js 
# 2. npm 换源
# 3. npm安装Vue
# 4. 运行

srcipt 标签引用版本

  • 开发版本: 包含完整的警告和调试模式。=> vue.js
  • 生产版本: 删除了警告，压缩。 => vue.min.js

模板语法

  • 插值语法 {{xxx}}

  • 指令语法

    • v-bind:href="xxx" 简写 :href="xxx"

数据绑定

  • v-bind
    • data ==> 页面（单向）
  • v-model
    • data <==> 页面（双向）
    • 只能表单类元素，默认收集value值

el两种写法

1
2
3
4
5
const v = new Vue({
    el:'#root', // 第一种写法
})

v.$mount('#root') // 第二种写法

data两种写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
new Vue({
    el:'#root',

    // 对象式
    data: {
        ...
    }

    // 函数式（推荐）
    // 组件必须采用函数式，不会造成污染
    data() {
        return{
            ...
        }
    }
})

Object.defineProperty

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Object.defineProperty(person,'age',{
    // value:18,            // 定义值，与getter不能同用
    // enumerable:true,     // 是否可被枚举，默认值是false  Object.keys(person)
    // writable:true,       // 是否可被修改，默认值是false  person.age = "xxx"
    // configurable:true    // 是否可被删除，默认值是false  delete person.age

    //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
    get(){
        return number
    },

    //当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
    set(value){
        number = value
    }

})

数据代理

1
2
3
4
5
6
7
8
9
10
11
12
13
let data = {x:100}
let vm = {y:200}

Object.defineProperty(vm,'x',{
    get(){
        return data.x
    },
    set(value){
        data.x = value
    }
})

{{vm.x}}

事件处理

v-on:xxx === @xxx

xxx 为事件名

1
<button @click="fn($event, data)">btn</button>

事件修饰符

  1. prevent：阻止默认事件 (常用)
  2. stop：阻止事件冒泡 (常用)
  3. once：事件只触发一次 (常用)
  4. capture：使用事件的捕获模式 - 父元素不触发子元素事件
  5. self：只有event.target是当前操作的元素时才触发事件；
  6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
    1
    2
    <a href="https://tenyding.cn" @click.prevent.stop="showInfo">点我提示信息</a>
    <ul @wheel.passive="demo" class="list"></ul>

键盘事件

按键 事件名 按键 事件名
回车 enter 删除 delete (捕获“删除”和“退格”键)
退出 esc 空格 space
上 up 下 down
左 left 右 right

注：

  • 系统修饰键（用法特殊）：ctrl、alt、shift、meta(win键)

    (1). 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
(2). 配合keydown使用：正常触发事件。

  • 大写或词组单词

    单词全为小写，驼峰前用 - 连接

1
Vue.config.keyCodes.huiche = 13 //定义了一个别名按键
1
2
3
4
5
<input type="text" placeholder="按下ctrl+y触发showInfo" @keyup.ctrl.y="showInfo">
<input type="text" placeholder="按下CapsLock(大小写切换)触发showInfo" @keyup.caps-lock="showInfo">
<input type="text" placeholder="按下回车触发showInfo" @keyup.13="showInfo">
<input type="text" placeholder="按下回车触发showInfo" @keyup.enter="showInfo">
<input type="text" placeholder="按下回车触发showInfo" @keydown.huiche="showInfo">

计算属性

  1. 定义：要用的属性不存在
  2. 原理：利用 Object.defineproperty 的getter和setter
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
computed:{
    // 详写
    fullName:{
        // 第一次读取和依赖的数据改变时被调用
        get(){
            return this.firstName + '-' + this.lastName
        },
        // 当fullName被修改时调用
        set(value){
            this.firstName = value.split('-')[0]
            this.lastName = value.split('-')[1]
        }
    }
    // 简写
    fullName(){
        return this.firstName + '-' + this.lastName
    }
}

监视属性

前提：xxx 需存在

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 配置版
watch: {

    // 完整
    xxx:{
        immediate: true,    // 初始化时调用一次，默认false
        deep: true,         // 深度监视，默认false
        // xxx发生改变时调用handler
        handler(newValue, oldValue){
            ...
        }
    }

    // 简写
    xxx(newValue, oldValue){
        ...
    }
}

// vm.$watch版
vm.$watch('xxx',(newValue,oldValue)=>{
    ...
})

绑定样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
data {
    mood: 'style1',

    classObj:{
        style1: true,
        style2: false
    },

    styleObj:{
        fontSize: '40px',
        color:'red',
    },

    styleArr:[{
        fontSize: '40px',
        color:'blue',
    }, {
        backgroundColor:'gray'
    }]
}
1
2
3
4
5
6
<div :class="mood" @click="changeMood"></div>
<div :class="['style1','style2','style3']"></div>
<div :class="classObj"></div>

<div :style="styleObj"></div>
<div :style="styleArr"></div>

条件渲染

1
2
3
4
5
6
7
<div v-show="true">hello</div>

<template v-if="n > 0">
    <div v-if="n === 1">Angular</div>
    <div v-else-if="n === 2">React</div>
    <div v-else>Vue</div>
</template>

列表渲染