Vue语法

引入Vue.js

<!-- 引入Vue -->
<script type="text/javascript" src="../JS/vue.js"></script>

其中 src 对应的内容为 vue.js 所对应的路径

创建Vue实例

<script type="text/javascript">
    Vue.config.productionTip = false;

    // 创建Vue实例
    // 与容器一一对应
    new Vue({
        el : '#root', 
        // el 用于指定当前Vue实例为哪个容器服务
        // 值通常为css选择器字符串
        data : {
            // data 用于存储数据
            // 数据供 el 使用
        }
    });

</script>

插值语法

<h>{{name}}</h>

通过 两对大括号 {{}} 将name属性的值绑定到标签中

缺点

会导致闪烁现象

即先渲染 {{name}}，若加载速度慢对导致页面停留在显示 {{ name }}

数值绑定

单向数值绑定（v-bind）

可以在一个标签内的属性前使用 v-bind: 绑定 Vue 实例中的属性值

注意：

只能从 Vue 实例中获取值，而不能改变 Vue 实例中的值

即只能 Read 而不能 Write

<a v-bind:href="link.url">点我去{{link.name}}</a>

双向数值绑定（v-model）

可以在一个标签内的属性前使用 v-model: 绑定 Vue 实例中的属性值

其实是 v-bind 和 v-on 的语法糖

既能 Read 也能 Write

<input type="text" v-model:value = "name">

V-FOR

允许我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名

<li v-for="item in items">
  {{ item.message }}
</li>

在 v-for 块中可以完整地访问父作用域内的属性和变量。v-for 也支持使用可选的第二个参数表示当前项的位置索引

<li v-for="(item, index) in items">
  {{ parentMessage }} - {{ index }} - {{ item.message }}
</li>

V-IF和V-ELSE

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

EL与DATA

EL的两种写法

1. 直接赋值

   el : "#root"

2. 通过 .$mount() 方法赋值

   v.$mount("#root")

DATA的两种写法

1. 直接赋值

   data : {
       name : "World"
   }

2. 通过函数返回值

   data() {
       return {
           name : "World"
       }
   }

事件修饰符

事件修饰符分类

• prevent 阻止默认事件
• stop 阻止事件冒泡
• once 事件只触发一次
• capture 使用事件的捕获模式
• self 只有 event.target 是当前操作的元素才触发事件
• passive 默认行为，立即执行，无需等待事件回调执行完毕

调用方式

<a href="https://www.baidu.com" @click.prevent="showInfo">

键盘事件

• keydown 压发
• keyup 松发
• enter 回车
• delete 删除
• esc 退出
• space 空格
• tab 换行
• up 上
• down 下
• left 左
• right 右
• ctrl alt shift meta 修饰键

属性获取

计算属性

computed : {
    // 计算属性
    name : {
        get() {
        },
        set(value) {
        }
    }
}

读取

get() {
    // 调用时机
    // 1.初次读取name时
    // 2.所依赖的数据发生变化时
    return this.firstName + '-' + this.lastName
}

写入

set(value) {
    // 调用时机
    // name被修改时
    let arr = value.split('-')
    this.firstName = arr[0]
    this.lastName = arr[1]
}

监视属性

watch : {
    name : {
        immediate : true,
        // 初始化时调用handler

        handler() {
            // 调用时机
            // 属性被修改时
            console.log("name被修改了")
        }
    }
}

过滤属性

filters : {
    function (param) {
        return 
    }
}

内置指令