Vue3之入门知识学习

最新推荐文章于 2024-05-14 20:09:44 发布

咖啡，巫师与猫

最新推荐文章于 2024-05-14 20:09:44 发布

阅读量388

点赞数

分类专栏：前端开发基础知识学习笔记文章标签：学习 vue.js javascript

本文链接：https://blog.csdn.net/zysp158/article/details/125776302

版权

前端开发基础知识学习笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Vue学习笔记

安装方法

将https://unpkg.com/vue@3中的代码保存到项目目录下的lib文件夹中的vue.js中，在使用时引入即可。

简单入门案例

实现步骤
在页面中引入vue框架的核心文件
创建一个div标签，该标签要被Vue控制(挂载点)
使用Vue 对象调用createApp方法来创建Vue应用实例，再调用mount方法将应用挂载到页面上( div标签中)
data方法用来配置数据
内部必须使用return来返回一个对象
对象内的数据就是可用的数据，该数据可以在被控制的div区域内和createApp参数内使用
{{msg}}:差值表达式
双大括号中填的是key值, 将数据插入到页面中
插值表达式支持基本的(四则运算)计算操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 第一步: 在页面中引入vue框架的核心文件 -->
    <script src="./lib/vue.js"></script>
</head>
<body>
    <!-- 第二步: 在body中设置一个标签，vue会控制该标签 -->
    <div id="app">
        {{msg}}
    </div>

    <script>
        Vue.createApp({
            data() {
                return {
                    msg: 'Hello Vue3 '
                }
            }
        }).mount('#app')
    </script>
</body>
</html>

常用指令

Vue封装了一些自定义属性，这些自定义属性就叫指令
指令可以用来控制标签的数据显示、注册事件、样式设置等等
指令的核心作用就是帮助我们更好的操控页面

数据填充指令

差值表达式、v-html指令、v-text指令
v-html、v-text 会覆盖标签内原有的内容，插值表达式不会
v-html:能识别标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
        <p v-html="msg"></p>
        <p v-text="msg"></p>
    </div>

    <script>
        Vue.createApp({
            data() {
                return{
                msg:'<h3>Hello World</h3>'
            }
            }
        }
        ).mount('#app')
    </script>
</body>
</html>

v-bind指令

v-bind用来为标签的属性节点绑定数据，可以简写为:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <a v-bind:href="url" v-bind:title="title">
            {{website}}
        </a>
        <img :src="src" alt="">
    </div>

    <script src="./lib/vue.js"></script>
    <script>
        const app = {
            data () {
                return {
                url: 'https://www.baidu.com/',
                title: '百度网搜索',
                website: '百度',
                src: './images/001.png'
                }
            }
        }
        Vue.createApp(app).mount('#app');
    </script>
</body>
</html>

v-bind绑定class属性
v-bind 用来绑定class属性时有两种方式∶
对象方式: <div v-bind:class=“{ active: isActive }”></div>
active:类名，定义在style标签中的类
isActive :布尔值，true类起效、false类失效，定义在data 中
数组方式: <div v-bind:class=“[fs, bgc]”></div>
fs、bgc:变量，要定义在data中
fs、bgc的值是类名，定义在style标签中的类名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <script src="./lib/vue.js"></script>
    <style>
    .active {
        text-align: center;
        font-size: 14px;
    }
    .aaa {
        background-color: orange;
    }
    </style>
<body>

    <div id="app" >
        <p :class="{active: isActive, aaa: isAAA}">对象绑定class属性</p>
        <p :class="[c1, c2]">数组绑定class属性</p>
    </div>
    <script>
        const app = {
            data () {
                return {
                isActive: true,
                isAAA: false,
                c1: "active",
                c2: "aaa"
                }
            }
        }
        Vue.createApp(app).mount('#app');
    </script>
</body>
</html>

v-bind绑定style属性
v-bind用来绑定style属性时有两种方式:
对象方式: <div :style=“{ fontSize: fs }”></div>
fontSize :属性名
fs :样式值（变量），要定义在data中
数组方式: <div :style=“[fs, bgc]”></div>
c1, c2∶变量，定义在data中
c1, c2 ︰的值是对象形式，内部是样式属性和值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>
<body>

    <div id="app" >
        <p :style="{fontSize: fs, backgroundColor: bgc}">对象绑定style属性</p>
        <p :style="[a, c]">数组绑定style属性</p>
    </div>
    <script>
        const app = {
            data () {
                return {
                fs: '18px',
                bgc: 'orange',
                a: {
                    fontSize: '20px',
                    textAlign: 'center'
                },
                c: {
                    backgroundColor: 'lightblue'
                }
                }
        }
        }
        Vue.createApp(app).mount('#app');
    </script>
</body>
</html>

v-on指令

v-on用来为标签绑定事件，可以简写为@
<button v-on:click= “handle” >点我</button>
v-on :用来绑定事件，后面是事件类型
handle :事件要执行的函数，该函数要写在methods节点中
methods是一个对象
在methods 中可以书写很多函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
    <style>
        .status {
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            background-color: orange;
            color: #fff;
        }
    </style>
</head>
<body>
    <!-- 功能: 点击div清除或添加样式 -->
    <div id="app">
        <div :class="{status: isStatus}" v-on:click="handle" @mouseenter="enter('已检测到鼠标')">点击清除样式</div>
    </div>

    <script>
        const app = {
            data() {
                return {
                    isStatus: true
                }
                
            },
            methods: {
                handle(){
                    // 在对象中想调用data中的数据, 一定需要使用this指针
                    this.isStatus = !this.isStatus
                 },
                enter(str) {
                   console.log(str)
                }
            }
        }
        Vue.createApp(app).mount('#app');
    </script>
</body>
</html>

v-if指令

v-if 能够根据表达式的真假值来有条件地渲染元素
v-else、v-else-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3 v-if="age > 18">成年人</h3>
        <h3 v-else-if="age == 18">我成年啦!!。</h3>
        <h3 v-else="age < 18">未成年</h3>
    </div>

    <script>
        const app = {
            data() {
                return {
                    age: 8
                }                
            }
        }
        Vue.createApp(app).mount('#app');
    </script>
</body>
</html>

v-for指令

v-for 循环渲染元素
list 要进行循环遍历的数组
item 每次取出的单元值
index 每次取出的单元索引
:key 为当前循环项绑定唯一标示
<li v-for=“(item,index) in list”:key=“index”> {{item}} </li>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>循环列表指令测试程序</h3>
        <ul>
        <li v-for="(item, index) in ary" :key="index">{{item}}</li>
        </ul>
    </div>

    <script>
        const app = {
            data() {
                return {
                    ary: ['明日方舟天下第三', '原神就是天', '黑神话悟空什么时候上线', '瓦罗兰特什么时候出国服', '超级期待绝区零']
                }    
            }
        }
        Vue.createApp(app).mount('#app');
        </script>
</body>
</html>

v-model指令

v-model 用于数据的双向绑定
双向绑定∶
data中定义的数据发生变化时，页面中的数据也跟着变化
修改页面中的数据时，data中的数据也会跟着变化
account修改，input中的值就会修改
input中的值修改，
account得值也会修改
<input type=“text” v-model=“account”
data (){
return {
account:‘用户名’
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>
<body>
    <div class="app">
        <input type="text" v-model="account" @keyup="change">
        <p>输入内容为:{{textInput}}</p>
    </div>    

    <script>
        const app = {
            data() {
                return {
                    account: '',
                    textInput: ''
                }    
            },
            methods: {
                change() {
                    this.textInput = this.account;
                }
            }
        }
        Vue.createApp(app).mount('.app');
        </script>
</body>
</html>

MVVM开发模式

Vue是一种采用MVVM开发模式的框架
MVVM是—种分离开发思想，将页面开发分为三个部分
MVVM是Model-View-ViewModel的简写
Model :模型，简单理解就是要操作的数据
View :视图，就是页面结构
ViewModel:视图模型，是连接Model和View的桥梁
MVVM的核心思想是让前端程序员专注于业务的实现，最大限度的减少DOM操作

响应式数据声明

CompositionAPI提供了两种响应式数据声明方式
ref()和reactive()
setup()是CompositionAPI的入口函数
通过ref()和reactive()声明的数据必须在setup 中return
ref():
ref()方法通常用来定义简单数据类型（数值型、字符串等)
const { ref } = Vue
let name = ref(‘王小明’);
let age = ref(8);
setup () {
return { name, age }}
<ul>
<li>姓名:{{ name }}</li>
<li>姓名:{{age }}</li>
</ul>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>
<body>
    <div id="app">
        请输入年龄:<input type="text" v-model="age">
        <button @click="add">+</button>
        <p>当前年龄为:{{age}}</p>
    </div>    

    <script>
    // 1.从Vue对象中将ref方法解构出来
        const {ref} = Vue;

	// 使用ref来声明响应式数据
        let age = ref(0);
        const app = {
            setup () {
                const add = () => {
                    console.dir(age);
                   	// 返回的age是一个对象,通过修改其value属性来修改age的值
                    age.value ++ ;
                }
                return {age, add}
            }   
        }
        Vue.createApp(app).mount('#app');
        </script>
</body>
</html>

reactive:
reactive()方法通常用来定义复杂数据类型（数组、对象)
const { reactive } = Vue
const state = reactive({
id: 10001,
name: ‘王小明’，age: 8,
gender: ‘男’})
setup () { return {state} }
<ul>
<li>id : {{ state.id }}</li>
<li>姓名:{{ state.name }}</li>
<li>年龄:{{ state.age }}</l\i>
<li>性别:{{ state.gender }}</li>
</ul>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>游戏信息列表</h3>
        <ul>
        <li v-for="(item, index) in list" :key="index">{{item.name}} - {{item.type}}</li>
        </ul>
    </div>

    <script>
        const {reactive} = Vue;
            const list = reactive([
                {name: '明日方舟', type: '塔防二次元'},
                {name: '原神', type: '开放世界'},
                {name: '黑神话悟空', type: '动作玄幻'},
                {name: '瓦罗兰特', type: 'fps射击竞技'},
                {name: '绝区零', type: '肉鸽动作'}
            ])
        const app = {
            setup () {
                return {list};
            }
        }
        Vue.createApp(app).mount('#app');
        </script>
</body>
</html>

生命周期函数

生命周期: Vue实例挂载、更新、销毁的过程
Vue实例的生命周期会伴随各种事件，这些事件对应的函数叫做生命周期函数/生命周期钩子/生命周期钩子函数
生命周期函数会在某一时刻自动运行
optionsAPI:
挂载︰创建Vue 实例并挂载到页面上
beforeCreate :创建之前
created :创建完成，一般用来初始化页面需要的数据
beforeMount :挂载之前
Mounted :挂载完成，挂载完成后可以直接操作DOM对象
更新︰页面发生变化
beforeUpdate :更新之前
updated :更新完成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>生命周期函数测试代码</h3>
        <p>{{msg}}</p>
        <button @click = "change">更新</button>
    </div>

    <script>
        const {ref} = Vue;

        let msg = ref('Hello World !');
        const app = {
            beforeCreate () {
                console.log('beforeCreate');
            },
            created () {
                console.log('created');
            },
            beforeMount () {
                console.log('beforeMount');
            },
            mounted () {
                console.log('mounted');
            },
            beforeUpdate () {
                console.log('beforeUpdate');
            },
            updated () {
                console.log('updated');
            },           
            setup () {
            const change = () => {
                msg.value = "Vue3 page updated !!.";
                }
        return {msg, change}
            }
        }
        Vue.createApp(app).mount('#app');
        </script>    
</body>
</html>

compositionAPI:

CompositionAPI取消了beforeCreate和created，直接使用setup即可
所有的钩子函数必须从Vue对象中解构出来
所有的钩子函数前都要加on

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>生命周期函数测试代码</h3>
        <p>{{msg}}</p>
        <button @click = "change">更新</button>
    </div>

    <script>
        const { ref,
                onBeforeMount,
                onMounted,
                onBeforeUpdate,
                onUpdated} = Vue;

        let msg = ref('Hello World !');
        const app = {   
            setup () {
                const change = () => {
                msg.value = "Vue3 page updated !!.";
                } 
            onBeforeMount (() => {
                console.log('onBeforeMount');
            })
            onMounted (() => {
                console.log('onMounted');
            })
            onBeforeUpdate (() => {
                console.log('onBeforeUpdate');
            })
            onUpdated (() => {
                console.log('onUpdated');
            })
            return {msg, change}
            }
        }
        Vue.createApp(app).mount('#app');
        </script>
</body>
</html>