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.1ref函数(基本数据类型的定义)

  • 作用：定义一个响应式的数据即变量(基本类型)。
  • 语法： 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.2reactive函数

  • 作用：定义一个对象类型的响应式数据（基本类型数据不能用，要用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>

Last updated 11 Nov 2024, 23:39 +0800 . history