Vue 核心（一）

一、 Vue 简介

1、概述

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

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

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

如果说是JQuery是手工作坊，那么Vue.js就像是一座工厂，虽然Vue.js做的任何事情JQuery都可以做，但无论是代码量还是流程规范性都是前者较优。

Vue 的特点：

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

官方网站地址：https://cn.vuejs.org/

我们在最开始学习时会通过script标签来直接引入 Vue；后期会使用脚手架来安装 Vue

2、学前准备

学习 Vue 之前需要掌握的 JS 基础知识：

ES6语法规范
ES6模块化
包管理器
原型、原型链
数组常用方法
axios
promise
...

3、第一个程序

我们首先在资源下载处安装我们的 Vue.js ，然后在 HTML 文件中引入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初始Vue</title>
<!--    引入Vue-->
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <h1>Hello World</h1>
</div>
</body>
</html>

在提示中，要求我们安装 Dev 开发者工具：

VueDevTools

同时，我们还需要进行一些配置，来关闭生产提示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初始Vue</title>
<!--    引入Vue-->
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <h1>Hello World</h1>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false;  // 阻止 Vue 在启动时生成生产提示
</script>
</body>
</html>

我们总共进行了三件事情：

下载开发版本的 Vue
安装了 Vue 开发者调试工具
关闭生产提示

小案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初始Vue</title>
<!--    引入Vue-->
    <script src="../js/vue.js"></script>
</head>
<!--
初始 Vue：
	1. 想让 Vue 工作，就必须创建一个 Vue 实例，且要传入一个配置对象；
	2. root 容器里的代码依然符合 HTML 代码，只不过混入了模板变量；
	3. root 容器里的代码被称为【Vue 模板】
-->
<body>
<div id="root">
    <h1>Hello , {{name}}</h1>  <!-- 使用插值语法插入 -->
    <p>{{name}}现在已经{{age}}岁了</p>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false;  // 阻止 Vue 在启动时生成生产提示
    // 创建 Vue 实例
    new Vue({
        el: "#root", // el 用于指定当前 Vue 实例为那个容器服务，值通常为 CSS 选择器字符串
        data: {
            name: "steve",
            age: 18
        },  // data 用来存储数据，传入容器中，数据供 el 所指定的容器去使用，值暂时写成一个对象
    });

</script>

</body>
</html>

注意：

一个 Vue 实例不能解析多个容器，一个容器也不能对应多个 Vue 实例。Vue 实例和容器只能是一一对应的关系

模板标签里面必须写成 js 表达式

js 表达式：一个表达式会生成一个值，可以放在任何一个需要值得地方

js 代码：控制代码的走向，但是不会生成值

一旦 data 中的数据发生改变，那么模板中用到该数据的地方也会自动更新

二、模板语法

模板语法有两大类：

插值语法
- 功能：用于解析标签体内容
- 写法：{{xxx}}，xxx 是 js 表达式，且可以直接读取到 data 中的所有属性
指令语法
- 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件……）
- 举例：v-bind:href="xxx"，或者简写为 :href="xxx"，xxx 同样需要写 js 表达式，且可以直接读取到 data 中的所有属性
- 备注：Vue 中的很多指令，且形式都是：v-???，此处只是举一个例子

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>模板语法</title>
  <script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
  <h1>模板语法</h1>
  <h3>hello, {{name}}</h3>
  <hr>
    
  <h1>指令语法</h1>
  <a v-bind:href="url.toUpperCase()">个人博客网站</a>
  <a :href="url">和上面那行的作用是一样的</a>
<!-- v-bind: ===> : (简写形式)-->
</div>

<script type="text/javascript">
  Vue.config.productionTip = false;
  new Vue({
    el: "#root",
    data: {
      name: "steve",
      url: "https://www.steve1.cn",
    }
  })
</script>

</body>
</html>

三、数据绑定

Vue 中有两种数据绑定的方式：

单向绑定（v-bind）：数据只能从 data 流向页面
双向绑定（v-model）：数据不仅能从 data 流向页面，还可以从页面流向 data

注意：
- 双向绑定一般都应用在表单类元素上
- v-model:value 可以简写为 v-model ，因为 v-model 默认收集的就是 value 值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>数据绑定</title>
  <script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
  <h1>单向数据绑定</h1>
  <input type="text" :value="name">
  <h1>双向数据绑定</h1>
  <input type="text" v-model:value="name">
<!-- 当文本输入框的 value 修改时，data 中的 name 也会改变-->
<!-- 如下代码时错误的，因为 v-model 指令只能应用在表单类元素上-->
  <h2 v-model:x="name">Hello</h2>
</div>

<script type="text/javascript">
  Vue.config.productionTip = false;
  new Vue({
    el: "#root",
    data: {
      name: "steve",
    }
  })
</script>

</body>
</html>

扩展：
Vue 挂载容器的另外一种方式：
  const v = new Vue({
    // el: "#root",
    data: {
      name: "steve",
    }
  })
  v.$mount("#root")
data 使用函数式写法：
  const v = new Vue({
    /* data: {
      name: "steve",
    } */
      data:function() {  
          console.log(this)  // 此处的 this 是 Vue 实例对象
          return {
              name: "steve",
          }
      } // 这里的 :function 是可以删除的，但是注意不能使用箭头函数，否则会出现 this 指针指向错误的问题
      data() {
          return {
              name: "steve"
          }
  	  }
  })
  v.$mount("#root")
注意，函数式写法中，函数必须要返回一个对象，推荐函数式使用。
由 Vue 管理的函数，一定不要使用箭头函数，否则 this 就不再是指向 Vue 实例对象了。

四、 MVVM 模型

M（模型 Model）：对应 data 中的数据
V（视图 View）：模板
VM（视图模型 ViewModel）：Vue 实例对象

实例：

五、数据代理

1、 defineProperty

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据代理</title>
</head>
<body>
<!-- 回顾defineProperty  -->
<script type="text/javascript">
  let addr = "China"
  let person = {
    name: "steve",
    sex: 1,
  }
  Object.defineProperty(person, "age", {
    value: 18,
    // enumerable: true,  // 控制属性是否可以枚举，默认值为false
    // writable: true,  // 控制属性是否可以被修改，默认值为false
    // configurable: true, // 控制属性是否可以被删除，默认值为false
  })  // 虽然麻烦，但是比较高级
  Object.defineProperty(person, "address", {
    // 当有人读取address 属性时，该函数会被调用
    get() {
      return addr
    },
    // 当有人修改 person 的 address 属性时，set 函数就会被调用，且会收到修改的具体值
    set(value) {
      console.log(`有人修改了address属性，且值是${value}`)
      addr = value
    }
  })
  console.log(Object.keys(person))
  console.log(person)
</script>

</body>
</html>

2、理解数据代理

数据代理：通过一个对象代理，来对另一个对象属性的操作（读、写）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据代理的理解</title>
</head>
<body>
<!--数据代理：通过一个对象代理对另一个对象中属性的操作-->
<script type="text/javascript">
  
  let obj1 = {x: 100}
  let obj2 = {y: 200}
  Object.defineProperty(obj2, "x", {
    get() {
      return obj1.x
    },
    set(value) {
      obj1.x = value
    }
  })
</script>
</body>
</html>

3、 Vue中的数据代理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的数据代理</title>
  <script src="../js/vue.js"></script>
</head>
<body>
<!--  准备一个容器-->
<div id="root">
  <h2>学校名称：{{name}}</h2>
  <h2>学校地址：{{address}}</h2>
</div>
<script type="text/javascript">
  Vue.config.productionTip = false;
  const vm = new Vue({
    data: {
      name: "steve",
      address: "Anthony"
    }
  })
  vm.$mount("#root")
</script>
</body>
</html>

六、事件处理

1、事件的基本使用

使用方法：

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

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件的基本使用</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <h1>欢迎学习{{study_name}}</h1>
<!--    <button v-on:click="showInfo">点我提示信息</button>-->
    <button @click="showInfo"></button>  <!-- 这里的@即为v-on:的简写形式 -->
    <button @click="showInfo1(66, $event)"></button>  <!--注意，如果这个函数需要event事件的话，需要传入$event参数，位置随便在哪-->
    <a href="https://www.steve1.cn" @click.prevent="showInfo">.prevent是事件修饰符，其会阻止事件默认的行为</a>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false;
    const data = {
        "study_name": "Vue核心内容",
    };
    const vm = new Vue({
        data,
        methods: {
            showInfo(event) {
                console.log(event)  // 参数为鼠标点击的事件信息
                console.log(this)  // 此处的this是vm，注意不能使用箭头函数
                alert("你好呀")
            },
            showInfo1(number, event) {
                alert(`Hello World ${number}`)
                console.log(`${number} + ${event}`)
            }
        }  // methods配置项进行事件回调
    })
    vm.$mount("#root")

</script>
</body>
</html>

Vue 中的事件修饰符：

prevent：阻止默认事件（常用）

stop：阻止事件冒泡（常用）

once：事件只触发一次（常用）

capture：使用事件的捕获模式

self：只有 event.target 是当前操作的元素时才触发事件

passive：事件的默认行为立即执行，无需等待事件回调执行完毕

注意，这个修饰符可以连着使用，如：@click.stop.prevent=""

2、键盘事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘事件</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <input type="text" placeholder="按下回车提示输入" @keydown.enter="showInfo">
    <!-- .enter 为别名，其会自动捕捉 enter键 -->
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        new Vue({
            el: "#root",
            data: {},
            methods: {
                showInfo(event) {
                    console.log(event.keyCode)
                },
            }
        })
    </script>
</body>
</html>

Vue 中常用的按键别名：

回车 => enter
删除 => delete （捕获 “删除” 和 “退格” 键）
退出 => esc
空格 => space
换行 => tab
上 => up
下 => down
左 => left
右 => right

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

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

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

自定义按键别名：Vue.config.keyCodes.自定义按键名 = keyCode

七、计算属性与监视属性

1、计算属性的语法

使用 computed 来进行计算属性的配置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>监视属性</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        姓：<input type="text" v-model="firstName"> <br><br>
        名：<input type="text" v-model="lastName"><br><br>
        姓名为：<span>{{fullName}}</span>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        new Vue({
            el: "#root",
            data(){
                return {
                    "firstName": "张",
                    "lastName": "三",
                }
            },
            computed: {
                fullName: {
                    // get 的作用：当有人读取 fullName 时，get 就会被调用，且返回值为 fullName 的值
                    // get 调用的时间：1. 初次读取这个 fullName （其有缓存的作用）  2. 所依赖的数据发生变化
                    get() {
                        console.log("getter")
                        return `${this.firstName}-${this.lastName}`
                    },
                    // 这个 set 不是必须的，如果这个数据只是通过内部修饰的，就可以不需要这个 setter
                    set(value) {
                        // 当 fullName 被修改时调用
                        console.log("setter")
                        const arr = value.split("-")
                        // 只需要修改其依赖的数据即可
                        this.firstName = arr[0]
                        this.lastName = arr[1]
                    }
                }
            } // 这个为计算属性，直接使用插值语法调用
        })
    </script>
</body>
</html>

注意，不能使用箭头函数，否则会出现 this 指向错误的问题。

2、计算属性的简写

new Vue({
    el: "#root",
    data(){
        return {
            "firstName": "张",
            "lastName": "三",
        }
    },
    computed: {
        fullName() {
            console.log("getter")
            return `${this.firstName}-${this.lastName}`
        }  // 直接将 fullName 写成函数形式，只提供 getter ，不提供 setter
    } 
})

3、监视属性

使用 watch 来进行数据的监视

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>监视属性</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
    <h1>今天，天气很{{weatherInfo}}：</h1>
        <button @click="changeWeather">切换天气</button>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        new Vue({
            el: "#root",
            data(){
                return {
                    "isHot": true,
                }
            },
            methods: {
                changeWeather() {
                    this.isHot = !this.isHot
                }
            },
            watch: {
                isHot: {
                    immediate: true, // 初始化时，让 handler 调用一下
                    // handler 在当 isHot 发生改变的时候调用
                    handler(newVal, oldVal) {
                        console.log(`isHot is changed\nold value is ${oldVal}, new value is ${newVal}`)
                    }
                }
            },  // 这个为监视属性，用来监视 isHot 属性的变化
            computed: {
                weatherInfo() {
                    return this.isHot ? "炎热" : "凉爽"
                }
            }
        })
    </script>
</body>
</html>

第二种监听的方式，直接在 vm 上添加监听器：

vm.$watch("isHot", {
    immediate: true, 
    handler(newVal, oldVal) {
    	console.log(`isHot is changed\nold value is ${oldVal}, new value is ${newVal}`)
    }
})

监视属性 watch：

当监视的属性变化时，回调函数自动调用，进行相关操作
监视的属性必须存在，才能进行监视！！
监视的两种写法：
1. new Vue 是传入 watch 配置
2. 通过 vm.$watch("", {}) 监视

4、深度监视

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>深度监视</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
    <h1>数字为：{{numbers.a}}</h1>
        <button @click="numbers.a++">a+1</button>
        <button @click="numbers.b++">b+1</button>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        new Vue({
            el: "#root",
            data(){
                return {
                    numbers: {
                        a: 1,
                        b: 1
                    },
                }
            },
            watch: {
                "numbers.a": {  // 监视多级结构中某个属性的变化
                    handler() {
                        console.log("a被改变了")
                    }
                },
                numbers: {
                    deep: true,  // 监视多级结构中所有属性的变化
                    handler() {
                        console.log("numbers 里面的内容发生改变了")
                    }
                }
            },
        })
    </script>
</body>
</html>

深度监视：

Vue 中的 watch 默认不检测对象内部值的改变（一层）
配置 deep: true 可以监测对象内部值改变（多层）
Vue 自身可以监测对象内部值的改变，但 Vue 提供的 watch 默认不可以
使用 watch 时，根据数据的具体结构，决定是否采用深度监视

5、监视属性简写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>监视属性</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <h1>今天，天气很{{weatherInfo}}：</h1>
    <button @click="changeWeather">切换天气</button>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false;
    const vm = new Vue({
        el: "#root",
        data(){
            return {
                "isHot": true,
            }
        },
        methods: {
            changeWeather() {
                this.isHot = !this.isHot
            }
        },
        watch: {
            // 正常写法
            // isHot: {
            //     // immediate: true,
            //     // deep: true,  深度监视
            //     handler(newVal, oldVal) {
            //         console.log(`isHot is changed\nold value is ${oldVal}, new value is ${newVal}`)
            //     }
            // }
            // 简写形式
            // 简写的代价是不能使用配置项，只能写 handler 函数
            isHot(newVal, oldVal) {
                console.log(`isHot is changed\nold value is ${oldVal}, new value is ${newVal}`)
            }
        },
        computed: {
            weatherInfo() {
                return this.isHot ? "炎热" : "凉爽"
            }
        }
    })
    vm.$watch("isHot", function(newVal, oldVal) {
        console.log(`isHot is changed\nold value is ${oldVal}, new value is ${newVal}`)
    })
</script>
</body>
</html>

computed 和 watch 之间的区别：

computed 能完成的功能，watch 都可以完成

watch 能完成的功能，computed不一定能完成，例如：watch可以进行异步操作

两个重要小原则：

所被 vm 管理的函数，最好写成普通函数，这样 this 的指向才是 vm 或组件实例对象

所有不被Vue所管理的函数（定时器的回调函数、ajax 的回调函数等），最好写成箭头函数，这样this的指向才是vm或组件实例对象

posted @ 2023-03-23 19:14 Kenny_LZK 阅读(62) 评论(0) 编辑收藏举报

刷新页面返回顶部

Kenny

Vue 核心（一）

Vue 核心（一）

一、 Vue 简介

1、 概述

2、 学前准备

3、 第一个程序

二、 模板语法

三、 数据绑定

四、 MVVM 模型

五、 数据代理

1、 defineProperty

2、 理解数据代理

3、 Vue中的数据代理

六、 事件处理

1、 事件的基本使用

2、 键盘事件

七、 计算属性与监视属性

1、 计算属性的语法

2、 计算属性的简写

3、 监视属性

4、 深度监视

5、 监视属性简写

公告

1、概述

2、学前准备

3、第一个程序

二、模板语法

三、数据绑定

五、数据代理

2、理解数据代理

六、事件处理

1、事件的基本使用

2、键盘事件

七、计算属性与监视属性

1、计算属性的语法

2、计算属性的简写

3、监视属性

4、深度监视

5、监视属性简写