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

一、Vue的引入方式

1.1 方式一：CDN地址

<script src="https://unpkg.com/vue@next"></script>

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

1）官方下载地址

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

2）本地引入

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

<script src="./lib/vue.js"></script>

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的简称。

• 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">

    <!-- 1.基本使用: 直接使用data中定义的变量 -->
    <h2>{{ message }}</h2>
    <h2>当前计数: {{ number }} </h2>

    <!-- 2.js表达式 -->
    <h2>计数双倍: {{ number * 2 }}</h2>
    <h2>展示的信息: {{ info.split(" ") }}</h2>

    <!-- 3.三元运算符 -->
    <h2>{{ age >= 18? "成年人": "未成年人" }}</h2>

    <!-- 4.调用methods中函数 -->
    <h2>{{ formatDate(time) }}</h2>

    <!-- 5.注意: {{}}中不能定义语句 -->
    <!-- <h2>{{ const name = "why" }}</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">
    <!-- 1.拼接名字 -->
    <h2>{{ fullname }}</h2>

    <!-- 2.显示分数等级 -->
    <h2>{{ scoreLevel }}</h2>

    <!-- 3.反转单词显示文本 -->
    <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>