Vue基础--Vue中的引入方式、挂载方式、MVVM模型和常用OptionApi

我就是我 2024-04-06 12:26 32阅读 0赞

### 一、Vue的引入方式 ###

#### 1.1 方式一：CDN地址 ####

#### 1.2 方式二：下载vue.js后在本地引入 ####

##### 1）官方下载地址 #####

https://v2.cn.vuejs.org/v2/guide/installation.html

![在这里插入图片描述][2cc08138ab234889a589756dc6b623b8.png]

##### 2）本地引入 #####

假设下载的`vue.js`文件被放在当前目录的`lib`目录下

#### 1.3 使用npm创建一个vue应用 ####

npm init vue@latest

> 初学者最好使用CDN或者本地引入的方式，后面一般会使用Vue脚手架创建Vue项目。

### 二、创建app和挂载app ###

<div id="app"></div>
    
    <script>
        // 1.创建app
        const app = Vue.createApp({
          
        	template: `<h1>Hello Vue</h1>`
        })
    
        // 2.挂载app
        app.mount("#app")
    </script>

*  `#app` 代表把id为app的div交由vue管理。
 *  `template`是要渲染到`<div id="app"></div>`中的内容。

现在一般不会直接用上面那种方式写`template`。

因为`div`被挂载之后，它包裹的内容默认就会渲染到`template`的位置。

<div id="app">
    	<h1>Hello Vue</h1>
    </div>
    
    <script>
        // 1.创建app
        const app = Vue.createApp({
          
    
        })
    
        // 2.挂载app
        app.mount("#app")
    </script>

### 三、MVVM模型 ###

`MVVM`是`Model-View-ViewModel`的简称。

![在这里插入图片描述][5e30e279240a4ae8b1d93c9954368bce.png]

*  `MVVM`，一种软件架构模式，决定了写代码的思想和层次
    
     *  `M`： `model`数据模型 (`data`里定义)
     *  `V`： `view`视图 （`html`页面）
     *  `VM`： `ViewModel`视图模型 (`vue.js`源码)
 *  `MVVM`通过`数据双向绑定`让数据自动地双向同步 **不再需要操作DOM**
    
     *  `V`（修改视图） → `M`（数据自动同步）
     *  `M`（修改数据） → `V`（视图自动同步）

### 四、Mustache语法 ###

#### 4.1 作用 ####

在`Vue`中数据显示到模板（`template`）中，通常是使用 `Mustache`语法 (双大括号==> `{ {}}` ) 的文本插值。

`Mustache`中不仅仅可以是`data`中的属性，也可以是一个`JavaScript`的表达式。

#### 4.2 代码使用示例： ####

<div id="app">
    
        
        <h2>{
       { message }}</h2>
        <h2>当前计数: {
       { number }} </h2>
    
        
        <h2>计数双倍: {
       { number * 2 }}</h2>
        <h2>展示的信息: {
       { info.split(" ") }}</h2>
    
        
        <h2>{
       { age >= 18? "成年人": "未成年人" }}</h2>
    
        
        <h2>{
       { formatDate(time) }}</h2>
    
        
        
    
    </div>
      
    <script src="../lib/vue.js"></script>
    <script>
        // 1.创建app
        const app = Vue.createApp({
          
            // data: option api
            data: function() {
          
                return {
          
                    message: "Hello Vue",
                    number: 100,
                    info: "Hello My Mustache",
                    age: 22,
                    time: 123
                }
            },
    
            methods: {
          
                formatDate: function(time) {
          
                    return "2022-10-10-" + time
                }
            }
        })
    
        // 2.挂载app
        app.mount("#app")
    </script>

### 五、常用OptionAPI ###

`OptionAPI`就是选项`API`的意思，也是`Vue2.x`中最常用的`API`写法。

`Vue3.x`中也支持选项`API`的写法。不过`Vue3.x`主要还是以组合式`API`写法为主。

选项API可以选择有它或者没有它，由开发者根据需要自行选择。

它作为传递给`createApp()`函数的对象中的属性而存在。

#### 4.1 data ####

<div id="app">
    	<h2>{
       {message}}</h2>
    </div>
    <script>
        // 1.创建app
        const app = Vue.createApp({
          
            data: function() {
          
                return {
          
                    message: "Hello Data"
                }
            },
        })
    
        // 2.挂载app
        app.mount("#app")
    </script>

*  `data`中定义的数据，可以使用`{ {}}`渲染到页面上，`{ {}}`可以直接写变量或者`js`表达式。
    
     *  这也是`mustache`语法的一种使用
 *  `data`属性是传入一个函数，并且该函数需要返回一个对象
    
     *  在Vue2.x的时候，也可以传入一个对象，但是官方推荐传递一个函数。
     *  在Vue3.x的时候，则必须传入一个函数，否则会直接在浏览器中报错。
 *  `data中`返回的对象会被`Vue`的响应式系统拦截，之后对该对象的修改或者访问都会在拦截中被处理。

#### 4.2 method ####

<div id="app">
        <button @click="alertMessage">弹出message</button>
    </div>
    
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
          
            // methods: option api
            methods: {
          
                changeMessage: function() {
          
                    alert("hello methods");
                }
            }
        })
    
        app.mount("#app")
    </script>

*  `methods`属性是一个对象，通常我们会在这个对象中定义很多的方法：
 *  这些方法可以被绑定到模板中。
 *  在该方法中，我们可以使用`this`关键字来直接访问到`data`中返回的对象的属性。
 *  `methods`中定义的函数不能使用箭头函数
    
     *  理由：箭头函数绑定了父级作用域的上下文，所以 `this`将不会按照期望指向组件实例。
 *  不使用箭头函数的情况下，`this`到底指向的是什么？
    
     *  `Vue`的源码当中就是对`methods`中的所有函数进行了遍历，并且通过`bind`绑定了`this`。

#### 4.3 computed ####

对于任何**包含响应式数据的复杂逻辑**，都应该使用计算属性。

那哪些数据算是响应式数据？就是`data`中定义的数据就是`Vue`中的响应式数据。

计算属性将被混入到组件实例中，所有 `getter` 和 `setter` 的 `this` 上下文自动地绑定为组件实例。

##### 1）计算属性基础写法 #####

**格式：**

computed: {
        
        计算属性名 () {
        
       	 	return 值
        }
    }

**使用示例：**

<div id="app">
        
        <h2>{
       { fullname }}</h2>
    
        
        <h2>{
       { scoreLevel }}</h2>
    
        
        <h2>{
       { reverseMessage }}</h2>
    </div>
    
    <script src="../lib/vue.js"></script>
    <script>
        // 1.创建app
        const app = Vue.createApp({
          
            data() {
          
                return {
          
                    // 1.姓名
                    firstName: "kobe",
                    lastName: "bryant",
    
                    // 2.分数
                    score: 80,
    
                    // 3.一串文本: 
                    message: "my name is why"
                }
            },
            computed: {
          	// 计算属性默认对应的是一个函数
                
                //拼接完整姓名
                fullname() {
          
                    return this.firstName + " " + this.lastName
                },
    
                //判断分数是否及格
                scoreLevel() {
          
                    return this.score >= 60 ? "及格": "不及格"
                },
    			
                //对文本中的单词进行反转显示
                reverseMessage() {
          
                    return this.message.split(" ").reverse().join(" ")
                }
            }
        })
    
        // 2.挂载app
        app.mount("#app")
    </script>

##### 2）计算属性完整写法 #####

计算属性在大多数情况下，只需要一个`getter`方法即可，所以我们会将计算属性直接写成一个函数。

但是有时确实需要设置计算属性的值，这时候可以给计算属性设置一个`setter`的方法。

**格式：**

computed: {
        
        "计算属性名": {
        
        	set(值){
        
    
            },
            get(){
        
            	return 值
            }
        }
    }

**使用示例：**

<div id="app">
        <h2>{
       { fullname }}</h2>
    </div>
    
    <script src="../lib/vue.js"></script>
    <script>
        // 1.创建app
        const app = Vue.createApp({
          
            // data: option api
            data() {
          
                return {
          
                    firstname: "coder",
                    lastname: "why"
                }
            },
            computed: {
          
                // 计算属性完整写法（本质是个有两个方法的对象）
                fullname: {
          
                    get: function() {
          
                        return this.firstname + " " + this.lastname
                    },
                    set: function(value) {
          
                        const names = value.split(" ")
                        this.firstname = names[0]
                        this.lastname = names[1]
                    }
                }
            }
        })
    
        // 2.挂载app
        app.mount("#app")
    </script>

##### 3）计算属性和mthod的区别–缓存 #####

计算属性会基于它们的依赖关系进行缓存，即计算属性对应函数执行后, 会把return值缓存起来。

在依赖的数据不发生变化时，多次调用都是从缓存取值。

依赖的数据发生变化时，计算属性"自动重新执行并缓存新的值。

**小结：**

*  何时用计算属性完整写法?
 *  需要给计算属性变量赋值时
 *  set函数和get函数作用?
    
     *  set接收要赋予的值
     *  get里要返回给这个计算属性具体
 *  计算属性解决的问题
    
     *  模板中存在大量的复杂逻辑，不便于维护（模板中表达式的初衷是用于简单的计算）；
     *  当有多次一样的逻辑时，存在重复的代码；
     *  多次使用的时候，很多运算也需要多次执行，没有缓存；

#### 4.4 watch ####

##### 1）基本写法 #####

在`Vue`代码逻辑中监听某个数据的变化，这个时候就需要用侦听器`watch`来完成了。

<div id="app">
        <h2>{
       {message}}</h2>
        <button @click="changeMessage">修改message</button>
    </div>
    
    <script src="../lib/vue.js"></script>
    <script>
        // 1.创建app
        const app = Vue.createApp({
          
            data() {
          
                return {
          
                    message: "Hello Vue",
                    info: {
           name: "why", age: 18 }
                }
            },
            methods: {
          
                changeMessage() {
          
                    this.message = "Hello watch"
                    this.info = {
           name: "kobe" }
                }
            },
            watch: {
          
                // 默认有两个参数: newValue/oldValue
                // newValue：变化后的值，oldValue：变化前的值
                message(newValue, oldValue) {
          
                    console.log("message数据发生了变化:", newValue, oldValue)
                },
                info(newValue, oldValue) {
          
                    // 如果是对象类型, 那么拿到的是代理对象
                    console.log("info数据发生了变化:", newValue, oldValue)
                    console.log(newValue.name, oldValue.name)
    
                    // 获取原生对象方式
                    // toRaw 根据一个 Vue 创建的代理返回其原始对象。
                    console.log(Vue.toRaw(newValue))
                }
            }
        })
    
        // 2.挂载app
        app.mount("#app")
    </script>

##### 2）深度监听写法 #####

默认watch监听不会进行深度监听。

<div id="app">
        <h2>{
       { info.name }}</h2>
        <button @click="changeInfo">修改info</button>
    </div>
    
    <script src="../lib/vue.js"></script>
    <script>
        // 1.创建app
        const app = Vue.createApp({
          
            data() {
          
                return {
          
                    info: {
           name: "why", age: 18 }
                }
            },
            methods: {
          
                changeInfo() {
          
                    // 2.直接修改原对象某一个属性
                    this.info.name = "lack"
                }
            },
            watch: {
          
                // 对info进行深度监听
                info: {
          
                    handler(newValue, oldValue) {
          
                        console.log("侦听到info改变:", newValue, oldValue)
                        console.log(newValue === oldValue)	//只改变其中一个属性的话，会返回true
                    },
                    // 监听器选项:
                    // 对info进行深度监听
                    deep: true,
                    // 第一次渲染直接执行一次监听器
                    immediate: true
                },
                
                //监听info中的一个属性
                "info.name": function(newValue, oldValue) {
          
                    console.log("name发生改变:", newValue, oldValue)
                }
            }
        })
    
        // 2.挂载app
        app.mount("#app")
    </script>

[2cc08138ab234889a589756dc6b623b8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/572d416f2edf4357bd277eef7f3f7e58.png
[5e30e279240a4ae8b1d93c9954368bce.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/cbec21c6457149cdb449f714c42eaa7f.png