4.Vue

一套用于快速构建用户界面的渐进式前端框架

1.Vue介绍

官网：https://cn.vuejs.org

Vue.js：简称Vue，是一套用于快速构建用户界面的渐进式前端框架。
Vue.js核心实现
- 响应式数据绑定：当数据发生改变，视图可以自动更新，不用关心DOM操作，专心数据操作。
- 可组合的视图组件：把视图按照功能切分成若干个基本单元，可维护，可重用，可测试等特点。
响应式，双向数据绑定，即MVVM。是指数据层（Model）-视图层（View）-数据视图（ViewModel）的响应式框架。

1.2引入Vue.js

参考文档：https://cn.vuejs.org/guide/quick-start.html

在html中使用CDN包的形式引入
- <script src="https://unpkg.com/vue@3"><script>
下载js文件保存到本地再导入
使用npm安装
- npm install @vue/cli@4.5.12
使用官方vuecli脚手架创建项目（不建议新手使用）
- vue create vue-demo

番外：

const var let的区别
var有设计缺陷，不建议使用
用const和let定义变量，const本身是常量的意思
let 定义函数内局部变量

function xxx() {
    let xxx
}

1.3声明式渲染

Hello World示例:Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>demo</title>
    <script src="https://unpkg.com/vue@3"></script>
    <style>

    </style>
</head>
<body>
    <div id="hello-vue">
        {{ message }}
    </div>
    <script>
        const { ref } = Vue
        const HelloVueApp = {
            setup() {
                const message = ref('Hello,Vue')
                return {
                    message
                }
            }
        }
        Vue.createApp(HelloVueApp).mount('#hello-vue')
    </script>
</body>
</html>

现在数据和DOM已经被建立了关联，所有东西都是响应式的，可通过下面示例确认:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>demo</title>
    <script src="https://unpkg.com/vue@3"></script>
    <style>

    </style>
</head>
<body>
    <div id="hello-vue">
        Conter: {{ counter }}
    </div>
    <script>
        //引入vue原生方法
        const { ref,onMounted } = Vue
        const HelloVueApp = {
            setup() {
                //变量定义
                const counter = ref(5)

                //生命周期钩子
                onMounted(() => { //在挂载时去干什么事
                    //定时器
                    setInterval(() => {
                        //ref定义的变量，在js内部使用，必须加value
                        counter.value ++
                    },1000) //每隔一秒执行一次
                })

                //如果需要html使用，则需要返回出去
                return {
                    counter
                }
            }
        }
        Vue.createApp(HelloVueApp).mount('#hello-vue')
    </script>
</body>
</html>

1.4模版语法

Vue.js使用了基于HTML的模板语法，允许开发者声明式的将DOM绑定致底层组件实例的数据，所有Vue.js的模板都是合法的HTML，所以能被遵循规范的浏览器和HTML解析器解析，
数据绑定最常见的形式就是使用{{ }}，语法在HTML中插入文本：<span>Message：{{ msg }}</span>
{{ msg }}将被替换为对应组件实例中msg属性的值，无论何时，绑定的组件实例上msg属性发生改变，传入HTML的值也会随之改变。

2.Vue3响应式

解决了：Vue2中新增属性，删除属性(对象)，界面不会更新的问题。
解决了：Vue2中直接通过下标修改数组，界面不会刷新的问题。

2.1`ref`函数(基本数据类型的定义)

作用：定义一个响应式的数据即变量(基本类型)。
语法： let a = ref('Hello Vue!')
创建一个包含响应式数据的引用对象（reference对象）。
JS中操作数据： a.value
模板中读取数据，不需要 .value，直接：<div>{{ a }}<div>
接收的数据可以是基本类型，也可以是对象类型（自动转reactive）。
基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的（vue2响应式的实现方式）。
对象类型的数据：内部使用了Vue3中的一个新函数：reactive函数

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>demo</title>
    <script src="https://unpkg.com/vue@3"></script>
    <style>

    </style>
</head>
<body>
    <div id="hello-vue">
        {{ message }}
    </div>
    <script>
        const { ref } = Vue
        const HelloVueApp = {
            setup() {
                const message = ref('Hello,Vue')
                return {
                    message
                }
            }
        }
        Vue.createApp(HelloVueApp).mount('#hello-vue')
    </script>
</body>
</html>

2.2`reactive`函数

作用：定义一个对象类型的响应式数据（基本类型数据不能用，要用ref函数）。
语法：const 代理对象=reactive(原函数)，接收一个对象或数组，返回一个代理对象（proxy对象）。
reactive定义的响应式数据是深层次的。
内部基于ES6的Proxy实现，通过代理对象操作源内部数据进行操作。
用法与ref创建的代理对象类似，不过操作时不需要再加.value了

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>demo</title>
    <script src="https://unpkg.com/vue@3"></script>
    <style>

    </style>
</head>
<body>
    <div id="hello-vue">
        {{ student }}
        <br>
        {{ student.name }}
    </div>
    <script>
        const { ref,reactive,onMounted } = Vue
        const HelloVueApp = {
            setup() {
                onMounted(() => {
                    student.name = "chi"
                })
                //定义对象 reactive返回一个proxy对象，实现对象类型的响应式
                //使用const定义对象，对象本身不能改变，但是对象的属性可以改变
                    //  错误：student = "xxx"
                    //  正确：student.name = "xxx"
                const student =  reactive({
                    name: "fei",
                    age: "2",
                    score:70
                })
                console.log(student)
                return {
                    student
                }
            }
        }
        Vue.createApp(HelloVueApp).mount('#hello-vue')
    </script>
</body>
</html>

3.Vue常用指令

指令:带有 v- 前缀的特殊属性。
指令的作用:当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

3.1v-text

v-text 作用与双大花括号作用一样，将数据填充到标签中。但没有闪烁问题!

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>demo</title>
    <script src="https://unpkg.com/vue@3"></script>
    <style>

    </style>
</head>
<body>
    <div id="hello-vue">
        <p v-text="msg"></p>
        <!--v-text插入这个p标签的值-->
        <p>{{ msg }}</p>
    </div>
    <script>
        const { ref } = Vue
        const HelloVueApp = {
            setup() {
                const msg = ref("Hello Vue!")
                return {
                    msg
                }
            }
        }
        Vue.createApp(HelloVueApp).mount('#hello-vue')
    </script>
</body>
</html>

3.2v-html

某些情况下，从服务端请求的数据本身就是一个HTML代码，如果用双大括号会将数据解释为普通文本，而非HTML代码，为了输出真正的HTML，需要使用v-html指令:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>demo</title>
    <script src="https://unpkg.com/vue@3"></script>
    <style>

    </style>
</head>
<body>
    <div id="hello-vue">
        {{ msg }}
        <br>
        <span v-html="msg"></span>
    </div>
    <script>
        const { ref } = Vue
        const HelloVueApp = {
            setup() {
                const msg = ref("<span style='color: brown'>Hello Vue!<span>")
                return {
                    msg
                }
            }
        }
        Vue.createApp(HelloVueApp).mount('#hello-vue')
    </script>
</body>
</html>

3.3v-on

在前端开发中，我们经常监听用户发生的事件，例如点击、拖拽、键盘事件等。在Vue中如何监听事件呢?使用 v-on指令
v-on : 冒号后面是event参数，例如click、change

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>demo</title>
    <script src="https://unpkg.com/vue@3"></script>
    <style>

    </style>
</head>
<body>
    <div id="hello-vue">
        <p>点击次数： {{ counter }}</p>
        <button v-on:click="counter++">按钮</button>
        <br>
        <a type="text" id="fname" v-on:mouseout="counter++">鼠标离开计数</a>
    </div>
    <script>
        const { ref } = Vue
        const HelloVueApp = {
            setup() {
                const counter = ref(0)
                return {
                    counter
                }
            }
        }
        Vue.createApp(HelloVueApp).mount('#hello-vue')
    </script>
</body>
</html>

3.4v-bind

用于动态绑定一个或多个属性值，或者向另一个组件传递props值(这个后面再介绍)
应用场景:图片地址src、超链接href、动态绑定一些类、样式等等

3.4.1绑定超链接

v-bind 指令后接收一个参数，以冒号分割。
v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>demo</title>
    <script src="https://unpkg.com/vue@3"></script>
    <style>

    </style>
</head>
<body>
    <div id="hello-vue">
        <a href="https://cakepanit.com">MaxBit</a>
        <br>
        <a v-bind:href="url">MaxBitDocs</a>
    </div>
    <script>
        const { ref } = Vue
        const HelloVueApp = {
            setup() {
                const url = "https://docs.cakepanit.com"
                return {
                    url
                }
            }
        }
        Vue.createApp(HelloVueApp).mount('#hello-vue')
    </script>
</body>
</html>

3.4.2绑定Class

操作元素(标签)的 class 和 style 属性是数据绑定的一个常见需求。
例如希望动态切换class，为div显示不同背景颜色

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>demo</title>
    <script src="https://unpkg.com/vue@3"></script>
    <style>
        #default {
            height: 200px;
            width: 200px;
            border: 1px solid brown;
            margin: 2px;
        }
        .active {
            height: 200px;
            width: 200px;
            background-color: darkgreen;
        }
    </style>
</head>
<body>
    <div id="hello-vue">
        <!--如果isActive为true，那么class="active"属性出现-->
        <div v-bind:class="{active:isActive}" id="default"></div>
        <button v-on:click="Onclick()">切换</button>
    </div>
    <script>
        const { ref } = Vue
        const HelloVueApp = {
            setup() {
                const isActive = ref(false)
                function Onclick(){
                    if (isActive.value) {
                        isActive.value = false
                    } else {
                        isActive.value = true
                    }
                }
                return {
                    isActive,
                    Onclick
                }
            }
        }
        Vue.createApp(HelloVueApp).mount('#hello-vue')
    </script>
</body>
</html>

3.4.3绑定Style

v-bind:style 的对象语法看着非常像 CSS，但其实是一个 JavaScript 对象。
可以使用v-bind在style样式中传递样式变量。
使用时需要将css样式名中带”-“的转成驼峰命名法，如font-size，转为fontSize
例如后台管理系统中改变侧边栏宽度

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>demo</title>
    <script src="https://unpkg.com/vue@3"></script>
    <style>
    </style>
</head>
<body>
    <div id="hello-vue">
        <div style="background: dodgerblue;font-size: 24px">
            Hello Vue! 原生写法
        </div>
        <div v-bind:style="{background: color,fontSize: num + 'px'}">
            Hello Vue! 动态绑定写法
        </div>
    </div>
    <script>
        const { ref } = Vue
        const HelloVueApp = {
            setup() {
                const color = ref('red')
                const num = 24
                return {
                    color,
                    num
                }
            }
        }
        Vue.createApp(HelloVueApp).mount('#hello-vue')
    </script>
</body>
</html>

3.4.4指令缩写

v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的属性。但对于一些频繁用到的指令来说，就会感到使用繁琐。
因此，Vue 为 v-bind 和 v-o n 这两个最常用的指令，提供了特定简写: v-bind 缩写
v-bind缩写

<!--完整语法-->
<a v-bind:href="url"> ... </a>
<!--缩写-->
<a :href="url"> ... </a>
<!--动态参数的缩写-->
<a :[key]="url"> ... </a>

v-on缩写

<!--完整语法-->
<a v-on:click="doSomething"> ... </a>
"<!--缩写-->
<a @click="doSomething"> ... </a>
<!--动态参数的缩写-->
<a @[event]="doSomething"> ... </a>

4.Vue常用属性

4.1setup函数

setup是vue3中的一个全新的配置项，值为一个函数。
setup是所有CompositionAPI（组合API）的基础，组件中所用到的数据、方法等都需要在setup中进行配置。
- setup中的两种返回值:
- 若返回一个对象，则对象中的属性，方法，在模板中都可以使用。
- 若返回一个渲染函数（html）：可以定义渲染内容。

import { h } from 'vue'
...
setup() {
...
	return () ==> h('h1','学习')
}

setup执行的时机：在 beforeCreate(vue实例创建) 之前执行一次，this 是 undefine。
setup的参数
- props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
- context：上下文对象
- attrs：值为对象，包含组件外部传递过来，但没有在props配置中声明的属性。
- slots：收到的插槽内容，想到相当于this.$slots。
- emit：分发自定义事件的函数，相当于this.$emit。
注意点：
- 尽量不要与Vue2配置混用。
  - Vue2配置（data,methos，computed…）中可以访问到 setup 中的属性，方法。
  - 但setup中不能访问到vue2配置（data,methos,computed…）。
  - 如果重名，setup中的优先。
- setup不能是 async 函数，因为返回值不再是return的对象，而是 promise，模板中看不到 return 对象中的属性。

4.2方法

使用function关键字定义的数据处理函数。
定以后在return中返回，才能在模板中使用

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>demo</title>
    <script src="https://unpkg.com/vue@3"></script>
    <style>
    </style>
</head>
<body>
<div id="hello-vue">
    <p>{{ count }}</p>
    <button @click="increment()">增加</button>
    <button @click="subIncrement()">减少</button>
</div>
<script>
    const { ref } = Vue
    const HelloVueApp = {
        setup() {
            //定义变量
            const count = ref(1)
            //普通方法         入参
            function increment(){
                count.value ++
            }
            //箭头函数             入参
            const subIncrement = (()=> {
                count.value --
            })

            return {
                count,
                increment,
                subIncrement
            }
        }
    }
    //用vue实例调用方法
    const vm = Vue.createApp(HelloVueApp).mount('#hello-vue')
    console.log(vm.count)
    vm.increment()
    vm.increment()
    vm.subIncrement()

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

4.3计算属性

计算属性(computed):根据所依赖的数据动态显示新的计算结果。
示例:需要在 {{ }} 里添加计算再展示数据，例如统计分数
数值计算一般用法：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>demo</title>
    <script src="https://unpkg.com/vue@3"></script>
    <style>
    </style>
</head>
<body>
<div id="hello-vue">
    <span>总分：{{ math + chinese + english }}</span>
    </p>
    <span>总分：{{ sum }}</span>
    </p>
    <span @click="sumFunc()">总分：{{ sum1 }}</span>
</div>
<script>
    const { ref,computed } = Vue
    const HelloVueApp = {
        setup() {
            //方式1
            const math = ref(90)
            const chinese = ref(101)
            const english = ref(102)

            //方式2，当使用了计算属性时，返回的属性名和变量名是相同的用法，在模版种用{{  }}就可以
            const sum = computed(()=>{
               return  math.value + chinese.value + english.value
            })

            //方式3，函数计算
            const sum1 = ref(0)
            function sumFunc(){
                sum1.value = math.value + chinese.value + english.value
            }
            return {
                math,chinese,english,sum,sum1,sumFunc
            }
        }
    }
    Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>
</body>
</html>

computed计算属性用法：
小结:计算属性一般就是用来通过其他的数据算出一个新数据，而且它有一个好处就是，它把新的数据缓存下来了，当其他的依赖数据没有发生改变，它调用的是缓存的数据，这就极大的提高了我们程序的性能。而如果写在function里，数据根本没有缓存的概念，所以每次都会重新计算。这也是为什么不用function的原因!

4.4监听属性

监听属性(watch):是一个观察动作，监听data数据（setup中的变量）变化后触发对应函数，函数有newValue (变化之后结果)和oldValue (变化之前结果)两个参数。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>demo</title>
    <script src="https://unpkg.com/vue@3"></script>
    <style>
    </style>
</head>
<body>
<div id="hello-vue">
    <p @click="change()">消息：{{ msg }}</p>
    <p>观察消息：{{ watchMsg }}</p>
</div>
<script>
    const { ref,watch } = Vue
    const HelloVueApp = {
        setup() {
            const msg = ref('hello Vue!')
            const watchMsg = ref()

            function change(){
                msg.value = 'hello Go!'
            }
            //msg表示被监听的数据；newVal,oldVal是指被监听数据发生变化时，新值和旧值
            watch(msg,(newVal,oldVal)=>{
                console.log(newVal,oldVal)
                watchMsg.value = newVal
                //或者 watchMsg.value = msg.value
            })
            return {
                msg,watchMsg,change
            }
        }
    }
    Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>
</body>
</html>

常见场景：表单选择时，下面的选项依赖上面的选项。就可以使用watch监听上面的选项（如实时调借口去getlist）下面的选项。

Last updated 25 Nov 2024, 23:56 +0800 . history

3.JavaScript

使网页具有交互性，例如响应用户点击，给用户提供更好的体验

1.Kubernetes-v1.28.3高可用集群二进制部署(IPv4+IPv6双栈)

Kubernetes（简称k8s）是Google在2014 …

4.Vue

1.Vue介绍 link

1.2引入Vue.js link

1.3声明式渲染 link

1.4模版语法 link

2.Vue3响应式 link

2.1ref函数(基本数据类型的定义) link

2.2reactive函数 link

3.Vue常用指令 link

3.1v-text link

3.2v-html link

3.3v-on link

3.4v-bind link

3.4.1绑定超链接 link

3.4.2绑定Class link

3.4.3绑定Style link

3.4.4指令缩写 link

4.Vue常用属性 link

4.1setup函数 link

4.2方法 link

4.3计算属性 link

4.4监听属性 link

1.Vue介绍

1.2引入Vue.js

1.3声明式渲染

1.4模版语法

2.Vue3响应式

2.1`ref`函数(基本数据类型的定义)

2.2`reactive`函数

3.Vue常用指令

3.1v-text

3.2v-html

3.3v-on

3.4v-bind

3.4.1绑定超链接

3.4.2绑定Class

3.4.3绑定Style

3.4.4指令缩写

4.Vue常用属性

4.1setup函数

4.2方法

4.3计算属性

4.4监听属性