Vue3基础

官方文档

1. 搭建vue项目-vite方式

参考官方文档：

2. Vue声明式语法与数据双向绑定

<template>
    <h1 @click="changeMsg">{{msg}}h1>
    <input type="text" v-model="msg" />   
template>

<script>
    export default {
        name: 'App',
        data(){
            return {
                msg: "Hello Vue"
            }
        },
        methods: {
            changeMsg(){
                this.msg="开心开心"
            }
        }
    }
script>

3. Vue模板语法

3.1 插值

{{ 文本插值 }}

<template>
    
    <h1>{{msg}}h1>
    <input type="text" v-model="msg" />   
    
    <h1 @click="changeMsg" v-once>这个值不会发生改变：{{ msg }}h1>
    
    <div v-html="content">div>
    
    <div :id="id">div>
    
    <h1>{{msg.split('')}}h1>
    <h1>{{msg.split('').reverse()}}h1>
    <h1>{{msg.split('').reverse().join('')}}h1>
template>

<script>
    export default {
        name: 'App',
        data(){
            return {
                msg: "Hello Vue",
                content: "
标题1
标题2
",
                id: "d1"
            }
        },
        methods: {
            changeMsg(){
                this.msg="开心开心",
                this.id="d2"
            }
        }
    }
script>

<style>
    #d1{
        width: 100px;
        height: 100px;
        background-color: blue;
    }
    #d2{
        width: 100px;
        height: 100px;
        background-color:blueviolet;
    }
style>

3.2 动态指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

<template>
    
    <div v-bind:[attributeName]="d1">div>     
    <button @click="toggleColor">点击切换颜色button>
template>

<script>
    // 声明式
    export default{
        name: 'App',
        data() {
            return {
                attributeName: "class",
                d1: 'd1'
            }
        },
        methods: {
            toggleColor: function() {
                this.attributeName = "id"
            }
        }
    }
script>

<style>
    .d1{
        width: 100px;
        height: 100px;
        background-color: purple;
    }
    #d1{
        width: 100px;
        height: 100px;
        background-color: blue;
    }
style>

4. 计算属性和侦听器

4.1 计算属性

计算属性与方法的不同之处在于：计算属性将基于它们的响应依赖关系缓存。

<template>
    
    <div>{{ msg.split('').reverse().join('') }}div>
    <div>{{ reverseMsg }}div>
template>

<script>
    // 声明式
    export default{
        name: 'App',
        data() {
            return {
                msg: "Hello World"
            }
        },
        computed: {
            reverseMsg:function() {
                return this.msg.split('').reverse().join('')
            }
        }
    }
script>

4.2 watch侦听器

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

<template>
    
    <div>{{ msg.split('').reverse().join('') }}div>
    <div>{{ reverseMsg }}div>

    <input type="text" v-model="msg">    
    <h1>{{msg}}h1>
template>

<script>
    // 声明式
    export default{
        name: 'App',
        data() {
            return {
                msg: "Hello World"
            }
        },
        computed: {
            reverseMsg:function() {
                return this.msg.split('').reverse().join('')
            }
        },
        watch: {     //侦听值的变化
            msg:function(newValue, oldValue){
                if(newValue.length < 8){
                    alert('输入的值太少了')
                }
            }
        }
    }
script>

5. Class与Style绑定

5.1 类的样式

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组

<template>
    
    
    
    <h1 :class="msg">Hello1h1>
    
    <h1 :class="{active:isActive}">Hello2h1>
    <button @click="toggleActive">切换activebutton>
    
    <h1 :class="arr">Hello3h1>
    
    <h1 :class="[classname4,{active:!isActive}]">Hello4h1>
template>

<script>
    // 声明式
    export default{
        name: 'App',
        data() {
            return {
                msg: "Hello World",
                isActive:false,
                arr:['swiper','active'],    //arr是一个数组
                classname4:"abc"
            }
        },
        methods: {
            toggleActive:function(){
                this.isActive = !this.isActive
                this.arr.pop()     //点击按钮之后删除arr的最后一个样式
                this.classname4="cba"
            }
        }
    }
script>

<style>
    .active{       /*active为true时显示该样式，为false时不显示该样式，这样就实现了一个切换的效果   */
        background-color:blue
    }
    .swiper{
        color: blueviolet;
    }
    .abc{
        color: white;
    }
    .cba{
        color: brown;
    }
    
style>

点击切换按钮后：

5.2 内联样式

<template>
    
    
    
    <h1 :style="msg">Hello1h1>
    
    <h1 :style="{background:'lightblue'}">Hello2h1>
    <button @click="toggleActive">切换activebutton>
    <h1 :style="styleObj">Hello3h1>
    
    <h1 :style="[styleObj,{width:'500px'}]">Hello4h1>
template>

<script>
import { getCurrentInstance } from "vue"

    // 声明式
    export default{
        name: 'App',
        data() {
            return {
                msg: "background:yellow",    //这里msg就用于设置样式了
                styleObj:{
                    'background-color':'green',     //如果遇到需要多个单词组成的样式，需要用引号引起来，也可以使用驼峰命名法
                    border:'3px solid black'
                }
            }
        },
        methods: {
            toggleActive:function(){
                this.styleObj.backgroundColor="skyblue"
            }
        }
    }
script>

切换后：

6. 条件渲染与列表渲染

6.1 条件渲染： v-if 与 v-show

<template>
    <div>
        <h1 v-if="user=='超级vip'">欢迎金主爸爸h1>
        <h1 v-else>充值会让你更强大h1>
        <button @click="toggleUser">vip过期button>

        
        <h1 v-show="isShow">切换显示内容h1>
        <button @click="toggleShow">切换button>
    div>
template>

<script>
import { getCurrentInstance } from "vue"

    // 声明式
    export default{
        name: 'App',
        data() {
            return {
                user:"超级vip",
                isShow:true
            }
        },
        methods:{
            toggleUser:function(){
                this.user="普通用户"
            },
            toggleShow:function(){
                this.isShow=!this.isShow
            }
        }
    }
script>

6.2 列表渲染： v-for

<template>
    <div>
        <ol>
            
            <li v-for="(item,i) in news" :key="i">{{item}}--->{{i}}li>
            
        ol>

        <ol>
            
            <li v-for="(item,i) in news1" :key="i">{{item.title}}--{{item.tag}}--{{item.num}}--->{{i}}li>
        ol>

        <ol>
            
            <li v-for="(item,i) in obj" :key="i">{{item}}li>
        ol>
    div>
template>

<script>
    // 声明式
    export default{
        name: 'App',
        data() {
            return{
                // news是数组
                news:[
                    'news1-balabala',
                    'news2-balabala',
                    'news3-balabala'
                ],
                // news1是对象
                news1:[
                    {
                        title:'news1-balabala',
                        tag:"沸",
                        num:"450万"
                    },
                    {
                        title:'news2-balabala',
                        tag:"新",
                        num:"520万"
                    },
                    {
                        title:'news3-balabala',
                        tag:"热",
                        num:"360万"
                    }
                ],
                obj:{
                    name:"zhao",
                    age:24,
                    city:"杭州"
                }
            }
        }
    }
script>

7. 事件处理

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

<template>
    <div>
        
        
        <h1 @click="addEvent">{{num}}h1>
        <h1 @click="num+=2">{{num}}h1>
        
        <h1 @click="addNumEvent(10)">{{num}}h1>
        
        <h1 @click="addNumEvent1(10,$event)">{{num}}h1>
        
        <h1 :style="{background:color}" @click="addNumEvent(10),changeColor()">{{num}}h1>
        
        <h1 @click.once="addNumEvent(10)">{{num}}h1>

        
         <input type="text" @keydown.enter="searchEvent">

         
    div>
template>

<script>
    // 声明式
    export default{
        name: 'App',
        data() {
            return{
                num:0,
                color:'blue'
            }
        },
        methods:{
            addEvent:function(){
                this.num += 2
            },
            addNumEvent:function(number){
                this.num += number
            },
            addNumEvent1:function(number,event){
                console.log(number)
                this.num += number
            },
            changeColor:function(){
                this.color='purple'
            },
            searchEvent:function(){
                console.log('按下了回车键')
            }
        }
    }
script>

8. 表单输入绑定

<template>
    <div>
        <input v-model="searchKey" type="text" @keydown.enter="searchEvent">
        <h1>{{searchKey}}h1>
        
        <input type="checkbox" name="like" v-model="checked" value="123">  
        <h1>{{checked}}h1>
        
        <input type="checkbox" name="likes" v-model="fruits" value="苹果">苹果
        <input type="checkbox" name="likes" v-model="fruits" value="雪梨">雪梨
        <input type="checkbox" name="likes" v-model="fruits" value="香蕉">香蕉
        <input type="checkbox" name="likes" v-model="fruits" value="葡萄">葡萄
        <h1>{{fruits}}h1>
        
        <input type="radio" name="sex" v-model="picked" value="man">男
        <input type="radio" name="sex" v-model="picked" value="woman">女
        <h1>{{picked}}h1>
        
        <select name="city" v-model="city">
            <option value="北京">北京option>
            <option value="上海">上海option>
            <option value="广州">广州option>
            <option value="深圳">深圳option>
        select>
        <h1>{{city}}h1>
        
        <select name="city" v-model="citys" multiple>
            <option value="北京">北京option>
            <option value="上海">上海option>
            <option value="广州">广州option>
            <option value="深圳">深圳option>
        select>
        <h1>{{citys}}h1>
        
        <input type="checkbox" name="like" v-model="checked1" true-value="喜欢" false-value="不喜欢">
        <h1>{{checked1}}h1>
        
        <input v-model.lazy="searchKey" class="text" @keydown.enter="searchEvent">
        <h1>{{searchKey}}h1>
        
        <input v-model.lazy.number="searchKey" class="text" @keydown.enter="searchEvent">
        <h1>{{searchKey}}h1>
        
        <input v-model.lazy.trim="searchKey" class="text" @keydown.enter="searchEvent">
        <h1>{{searchKey}}h1>
    div>
template>

<script>
    // 声明式
    export default{
        data() {
            return{    //初始化的值
                searchKey:"百度一下",
                checked:false,     //默认情况下是未选中
                fruits:[],
                picked:"",
                city:"",
                citys:[],
                checked1:""
            }
        },
        methods:{
            searchEvent:function(){
                console.log('按下了回车键')
            }
        }
    }
script>

9. 组件

9.1 组件的基本使用

一般把我们创建的组件放在component目录下，组件名一般习惯用大写字母开头。
例如我们在component文件夹下创建Header.vue

<template>
    <div>
        <h1>这是头部组件h1>
    div>
template>

然后在文件中这样使用：

<template>
    <div>
        <Header>Header>
    div>
template>

<script>
    import Header from './components/Header.vue'
    // 声明式
    export default{
        components: { Header }
    }
script>

9.2 子组件与父组件之间的数据传递

（1）通过props方式将父组件的内容传递给子组件

子组件：News.vue

<template>
    <div>
        <h1>今天的心情怎么样？{{content}}h1>
    div>
template>

<script>
    export default{
        props:['content']
    }
script>

父组件：App.vue

<template>
    <div>
        <Header>Header>
        <Main>Main>
        <Footer>Footer>
        
        <News :content="Content">News>
    div>
template>

<script>
    import Header from './components/Header.vue'
    import Main from './components/Main.vue'
    import Footer from './components/Footer.vue'
    import News from './components/News.vue'
    // 声明式
    export default{
        data(){
            return{
                Content:"超开心"
            }
        },
        components: { Header,Main,Footer,News }
    }
script>

（2）通过自定义事件将子组件数据传递给父组件

子组件：Login.vue

<template>
    <div>
        <input type="text" v-model="username">
        <button @click="sendMsg">将数据提交给父组件button>
    div>
template>

<script>
    export default{
        data:function(){
            return {
                username:""
            }
        },
        methods:{
            sendMsg:function(){
                // 触发自定义事件，$emit(事件名称,传递的参数)
                this.$emit("sendParentMsg",this.username)   //将username传递给父组件
            }
        }
    }
script>

父组件：App.vue

<template>
    <div>
        
        <Login @sendParentMsg="getChildMsg">Login>   
        <h1>从子组件获取到的值：{{msg}}h1>
    div>
template>

<script>
    import Login from './components/Login.vue'
    export default{
        data(){
            return{
                msg:""
            }
        },
        methods:{
            getChildMsg(value){
                this.msg=value
            }
        },
        components: { Login }
    }
script>

10. vue2中的 过滤器 filter

过滤器主要用于在视图中再次去处理你绑定的数据。
但是在vue3.x不能用过滤器，需要使用方法调用或计算属性来替换它们。
过滤器的用法参考官方文档