Vue核心基础知识

一、 Vue简介

1.1 概念

一套用于构建用户界面的渐近式JavaScript框架。

官方学习网址：https://cn.vuejs.org/

渐进式：Vue可以自底向上逐层的应用。

• 简单应用：只需要一个轻量小巧的核心库
• 复杂应用：可以引入各式各样的Vue插件

1.2 特点

• 采用组件化模式，提高代码复用率、且让代码更好维护。
• 声明式编码，让编码人员无需直接操作DOM，提高开发效率。
• 使用虚拟DOM+Diff算法，尽量复用DOM节点。

1.3 与其它 JS 框架的关联

• 借鉴 Angular 的模板和数据绑定技术。
• 借鉴 React 的组件化和虚拟 DOM 技术。

1.4 Vue使用总结

• 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象：
• 准备的容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
• 容器里的代码被称为【Vue模板】
• Vue实例和容器时一一对应的；
• 真实开发中只有一个Vue实例，配合组件一起使用；
• {{xxx}}中写的时js表达式，且xxx可以自动读取data里面的数据；
• 一旦data中数据发送改变，那么模板中用到该数据的地方也会自动更新。

示例代码：

  <!-- 准备好一个容器 -->
    <div class="root">
        <!-- 插值语法{{}} -->
        <p>hello,{{name.toUpperCase()}},年龄：{{age}}</p>
    </div>

    <script type="text/javascript">
        //阻止Vue在启动时产生生产提示
        Vue.config.productionTip = false

        //创建Vue实例
        new Vue({
            el: '.root', //el用于指定当前Vue实例为那个容器服务，值通常为css选择器字符串
            data: { //data中用于存储数据，数据供el所指定的容器去使用，值暂时写成一个对象
                name: 'shangguigu',
                age: 18
            }
        });
    </script>

二、 模板语法

**html 中包含了一些 JS 语法代码，语法分为两种，分别为： **

• 插值语法（双大括号表达式）
• 指令（以 v-开头）

2.1 插值语法

作用：用于解析标签体内容。

语法：{{xxx}} xxx时js表达式，直接读取data里面的所有属性。

2.2 指令语法

作用：用于解析标签（标签属性，标签体内容，绑定事件）。

语法：v-bind： 简写===》 ： 且直接读取data中的所有属性。

三、 数据绑定和代理

3.1 数据绑定

单向数据绑定

• 语法：v-bind: 或简写为 :
• 特点：数据只能从 data 流向页面

双向数据绑定

• 语法：v-mode:value="xxx" 或简写为 v-model="xxx"
• 特点：data数据不仅能从 data 流向页面，还能从页面流向

3.2 数据代理

概念

• 通过一个对象代理对另一个对象中属性的操作（读/写）

好处

• 更加方便的操作data中的数据

基本原理

• 通过Object.defineProperty()把data对象中所有属性添加到vm上。
• 为每一个添加到vm上的属性，都指定一个getter/setter。
• 在getter/setter内部去操作（读/写）data中对应的属性。

四、 事件处理

效果：

4.1 事件的基本使用

• 使用v-on:xxx 或者 @xxx 绑定事件，其中xxx是事件名；
• 事件的回调需要配置在methods对象中，最终会在vm了；
• methods中配置的函数，不要用箭头函数！否者this就不是执向vm；
• methods中配置的函数，都是被Vue管理，this指向 vm 或者 组件实例对象
• @click="demo" 和 @click="($event)" 效果一样，但后者可以传参

4.2 事件修饰符（可以连续写）

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

4.3 键盘事件

（1）常用按键别名

• 回车 => enter
• 删除 => delete (捕获“删除”和“退格”键)
• 退出 => esc
• 空格 => space
• 换行 => tab (特殊，必须配合keydown去使用)
• 上 => up
• 下 => down
• 左 => left
• 右 => right

（2）Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

（3）系统修饰键（用法特殊）

• ctrl、alt、shift、meta。
• 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
• 配合keydown使用：正常触发事件。

（4）按键修饰符

• keyCode : 操作的时某个keycode值的键。
• Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
• keyName ：操作的某个按键名的键（少部分）。

五、 计算属性与监视属性

5.1 计算属性

定义

• 要用的属性不存在，要通过已有属性计算得来。在computed对象中定义计算属性。

原理

• 底层借助了Objcet.defineproperty方法提供的getter和setter。

get函数什么时候执行

• 初次读取时会执行一次。
• 当依赖的数据发生改变时会被再次调用。

优势

• 与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

5.2 监视属性

当被监视的属性变化时, 回调函数自动调用, 进行相关操作。

监视的属性必须存在，才能进行监视！！

监视的两种写法

• new Vue时传入watch配置
• 通过vm.$watch监视

深度监视

• Vue中的watch默认不监测对象内部值的改变（一层）。
• 配置deep:true可以监测对象内部值改变（多层）。

六、指令

6.1 内置指令

v-model: 双向数据绑定

v-for: 遍历数组/对象/字符串

v-on: 绑定事件监听, 可简写为@

v-if: 条件渲染（动态控制节点是否存存在）

v-else: 条件渲染（动态控制节点是否存存在）

v-show: 条件渲染 (动态控制节点是否展示)

v-bind: 单向绑定解析表达式, 可简写为 :xxx

v-text指令：向其所在的节点中渲染文本内容。

v-cloak指令（没有值）：可以解决网速慢时页面展示出{{xxx}}的问题

v-html指令：向指定节点中渲染包含html结构的内容。

v-once指令：所在节点在初次动态渲染后，就视为静态内容了。

v-pre指令：跳过其所在节点的编译过程。

6.2 自定义指令

定义语法

• 局部指令

new Vue({new Vue({ directives:{指令名:配置对象} 或 directives{指令名:回调函数} }) 

• 全局指令

  Vue.directive(指令名,配置对象) 或   Vue.directive(指令名,回调函数)

配置对象中常用的3个回调

• bind：指令与元素成功绑定时调用。
• inserted：指令所在元素被插入页面时调用。
• update：指令所在模板结构被重新解析时调用。

注意

• 指令定义时不加v-，但使用时要加v-；
• 指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。