VUE基础知识(1)

我是小z呀

已于 2023-09-14 16:33:02 修改

阅读量147

点赞数

分类专栏： VUE 文章标签： vue

于 2023-08-09 17:00:36 首次发布

本文链接：https://blog.csdn.net/weixin_38226321/article/details/132191572

版权

VUE 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

之前学习flask后端时接触到了vue，感觉比大学学的基础html，css，javascript要好用效果还好，所以就看看vue的相关知识，具体的环境搭建，在我之前的flask的后台cms博客里面有。用官网手册进行学习。

1.创建工程

vue create 工程名#然创建工程，后选择vue3
cd my_vue#进入目录
npm run serve#运行开发服务器

2.模板语法

1.文本插值：“Mustache”语法 (即双大括号)，支持单一 JavaScript 表达式

<template>
<p>{{ msg }}</p>
</template>

<script>
export default {
 data(){
  return{msg:"模板插值"
  }
}
};
</script>

2.原始 HTML：双大括号会将数据解释为纯文本，而不是 HTML。若想插入 HTML，你需要使用 v-html 指令：

<template>
<p v-html="rawhtml"></p>
</template>

<script>
export default {
 data(){
  return{
    rawhtml:"<a href='http://localhost.com'>图片连接</a>"
  }
}
};
</script>

3.动态响应绑定CSS属性Attribute：v-bind 指令;如果绑定的值是 null 或者 undefined，那么该 attribute 将会从渲染的元素上移除;简写语法:;布尔型 attribute 依据 true / false 值来决定 attribute 是否应该存在于该元素上;还可以动态绑定多个值

<template>
<div v-bind:id="dynamicid" v-bind:class="dynamicclass">绑定class和id</div>
<div :title="dynamictitle">绑定值是null或undefined</div>
<button :disabled="isButtonDisabled">根据布尔值确定button是否可用</button>
<div v-bind="objectOfAttrs">一次绑定多个值</div>
</template>

<script>
export default {
 data(){
  return{
    dynamicid:"appid",
    dynamicclass:"appclass",
    dynamictitle:undefined,//null
    isButtonDisabled:false,
    objectOfAttrs:{
      id:'apid',
      class:"apclass",
    }
  }
}
};

</script>
<style scoped>
.appclass{color:red;}
</style>

3.条件渲染

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。
v-else 元素添加一个“else 区块”，必须跟在一个 v-if 或者 v-else-if 元素后面，否则它将不会被识别。
v-else-if 提供的是相应于 v-if 的“else if 区块”。它可以连续多次重复使用。
另一个按条件显示一个元素的指令是 v-show。
v-if有较高的切换开销，v-show有较高的初始渲染开销。

<template>
    <div v-if="flag">能看见1么</div>
    <div v-else>看不见1就能看见2</div>
    <div v-if="type==='A'">A</div>
    <div v-else-if="type==='B'">B</div>
    <div v-else-if="type==='C'">C</div>
    <div v-else>not abc</div>
    <div v-show="flag">我切换开销少</div>
</template>
<script>
export default{
    data(){
        return {
            flag:true,
            type:"C"
        }
    }
}
</script>

4.列表渲染

1.数组遍历时，每个循环项都要提供一个唯一的 key，以便 Vue 能够高效地跟踪每个元素的状态变化，:key=“item”。可选的第二个参数表示当前项的索引index；for …of …=for …in …
2.也可以遍历对象，它里面有三个参数（value,key,index）。:key=“value”。

<template>
    <div>
        <p v-for="(item,index) in names" :key="item">{{ item }}-{{ index }}</p>
        <div v-for="item in results" :key="item">
            <p>{{ item.title }}</p>
            <img :src="item.avatar" alt="">
        </div>
        <p v-for="(value,key,index) of userInfo " :key="value">{{ value }}-{{ key }}-{{ index }}</p>
    </div>
</template>
<script>
export default {
    data() {
        return {
            names: ['python', 'flask', 'php', 'vue'] ,
            results:[{
                "title":"A",
                "avatar":"https://lmg.jj20.com/up/allimg/4k/s/02/2109250006343S5-0-lp.jpg"
            },{
                "title":"B",
                "avatar":"https://img1.baidu.com/it/u=1187129814,1675470074&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
            }],
            userInfo:{
                name:"zoe",
                age:27,
                gender:"f"
            }
            }
    }
}
</script>

5.事件处理

1.监听事件：使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click="handler" 或 @click="handler"。分为内联事件处理器和方法事件处理器。
2.可以使用event并可以传参。
3.事件修饰符。

<template>
    <h>1.内联事件处理器</h>
    <button v-on:click="count++">Add</button>
    <p>{{ count }}</p>
    <h>2.方法事件处理器</h>
    <button @click="add_2">Add_2</button>
    <p>{{ count2 }}</p>
    <h>事件传参event和$event</h>
    <p @click="get_e">无外参</p>
    <p @click="get_name_e(item,$event)" v-for="(item,index) of names" :key="index">{{ item }}</p>
    <h>3.事件修饰符</h>
    <div @click="clockDiv">
        <p @click.stop="clockP">测试冒泡</p>
    </div>
</template>
<script>
export default{
    data(){
        return {
            count:0,
            count2:0,
            names:['zoe','jane','frank']
        }
    },
    methods:{
        add_2(){
            this.count2++;
        },
        get_e(event){
            console.log(event);
        },
        get_name_e(name,event){
            console.log(name);
            console.log(event);
        },
        clockDiv(){
            console.log('Div');
        },
        clockP(){
            console.log('P');
        }
    }
}
</script>

6.数组变化侦测

1.Vue 能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新，会对调用它们的原数组进行变更，这些变更方法包括：

push() pop() shift() unshift() splice() sort() reverse()

2.对调用它们的原数组不会变更的方法包括如下，只能通过复制给原数组实现变更

filter()，concat() 和 slice()

<template>
    <h3>数组变化侦听</h3>
    <button @click="addListHandler">添加数组</button>
    <p v-for="(item,index) of names" :key="index">{{ item }}</p>
</template>
<script>
export default{
    data(){
        return {
            names:['zoe','janey','jake']
        }
    },
    methods:{
        addListHandler(){
            // this.names.push("frank")#√
            // this.names.concat(['frank'])#×
            this.names=this.names.concat(['frank'])//√
        }
    }
}
</script>

7.计算属性

1.在script里面可以写computed属性，他和methods的区别是调用时不用(),而且只要内部的东西不变，它只会在页面出此渲染，而方法会消耗渲染成本。

<template>
    <h3>{{code.name}}</h3>
    <h3>{{ yon }}</h3>
    <h3>{{ yon_m() }}</h3>
</template>
<script>
export default{
    data(){
        return{
            code:{
                name:'zoe',
                skill:['python','php','vue']
            }
        }
    },
    computed:{
        yon(){
            return this.code.skill.length>0?'yes':'no';
        }
    },
    methods: {
        yon_m(){
            return this.code.skill.length>0?'yes':'no';
        }
    }
}
</script>

8.类与样式绑定

1.为 class 和 style 的 v-bind 用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组以及数组嵌套对象。

<template>
    <p :class="{'activate':isActive,'text-danger':hasError}">1.绑定对象</p>
    <p :class="classObject">2.绑定多对象</p>
    <p :class="[arrActivate,arrHasError]">3.绑定数组</p>
    <p :class="[isArray?'activate text-danger':'activate']">4.绑定简单运算</p>
    <p :class="[isArray?'activate':'',{'text-danger':hasError}]">5.数组嵌套对象</p>
</template>
<script>
export default{
    data(){
        return{
            isActive : false,
            hasError : true,
            classObject:{
                'activate':true,
                'text-danger':true
            },
            arrActivate:"activate",
            arrHasError:"text-danger",
        }
    }
}
</script>
<style scoped>
.activate{
    font-size:30px;
}
.text-danger{
    color:red;
}
</style>

9.侦听器

watch 函数在每次响应式状态发生变化时触发回调函数，可以保存旧数据和新数据。

<template>
    <h3>侦听器</h3>
    <p>{{ myname }}</p>
    <button @click="upnamehandle">修改名字</button>
</template>
<script>
export default{
    data(){
        return {
            myname:"zoe"
        }
    },
    methods:{
        upnamehandle(){
            this.myname = "queen";
        }
    },
    watch:{
        myname(newValue,oldValue){
            console.log(newValue,oldValue);
        }
    }
}
</script>

10.表单输入绑定

v-model 指令将表单输入框的内容同步给 JavaScript 中相应的变量。
修饰符：.lazy，.number，.trim。

<template>
    <h>表单绑定输入</h>
    <form>
        <input type="text" v-model="message">
        <p>{{ message }}</p>
        <input type="checkbox" id="c" v-model="checked"/>
        <lable for="c">{{ checked }}</lable>
    </form>
</template>
<script>
export default {
    data(){
        return {
            message:"",
            checked:false
        }
    }
}
</script>

11.模板引用

使用ref可以在一个特定的 DOM 元素或子组件实例被挂载后，获得对它的直接引用。使用this.$refs.进行获取
内容改变用{{}}，属性改变用v-bind，事件用v-on:click。

<template>
    <div ref="c" class="container">{{ content }}</div>
    <input type="text" ref="t">
    <button @click="getElementHandle">获取元素</button>
</template>
<script>
export default{
    data(){
        return{content:"内容"}
    },
    methods:{
        getElementHandle(){
            this.$refs.c.innerHTML="我变了";//innerHTML：原生js,改变了变量content
            console.log(this.$refs.t.value);//打印了input里面的内容
        }
    }
}
</script>

12.组件

1.局部注册：在App.vue里面三步。

<template>
  <IndexDemo/><!--3.显示组件-->
</template>
<script>
import IndexDemo from "./components/IndexDemo.vue"//1.引入组件
export default{
  components: {
    IndexDemo//2.注入组件
  }
}
</script>
<style scoped>
/* scoped:样式只在当前组件生效 */
</style>

2.全局注册：在main.js里面两步，然后再在App.vue里面直接显示就可以。

import { createApp } from 'vue'
import App from './App.vue'
import ArrayDemo from "./components/ArrayDemo.vue"//1.import这个组件
const app=createApp(App)
app.component("ArrayDemo",ArrayDemo)//2.绑定到全局app上，并给一个名字，之后就都用这个名字
app.mount('#app')
<template>
  <ArrayDemo/>//在App.vue里面显示
</template>

3.props数据传递：只能父亲传给孩子，可以传递静态数据和动态数据

//父亲
<template>
    <h3>parent</h3>
    <ChildDemo title="我是父亲给孩子的静态数据" :m="message"/>
</template>
<script>
import ChildDemo from './ChildDemo.vue'
export default{
    data(){
        return{
            message:"动态数据"
        }
    },
   components:{
    ChildDemo
   }
}
</script>
//孩子
<template>
    <h3>child</h3>
    <p>{{ title }}</p>
    <p>{{ m }}</p>
</template>
<script>
export default{
    data(){
        return{}
    },
    props:["title","m"]//从父亲那里拿来的数据
}
</script>

4.props的校验

type校验；
数字和字符串可以直接default；
数组和对象的默认值需要通过工厂函数返回默认值；
required必须要传参数；
props拿到的数据只读，不能修改。

<template>
    <h3>parent</h3>
    <ChildDemo :title="title" />
</template>
<script>
import ChildDemo from './ChildDemo.vue'
export default{
    data(){
        return{
            title:"类型校验",
            age:20,
            names:['zoe','joy']
        }
    },
   components:{
    ChildDemo
   }
}
</script>
<template>
    <h3>child</h3>
    <p>{{ title }}</p>
    <p>{{ age }}</p>
    <p>{{ names }}</p>
</template>
<script>
export default{
    data(){
        return{}
    },
    props:{
        title:{
            type:[String,Number,Array,Object],
            required:true//必须要传参数，
        },
        age:{
            type:Number,
            default:0//数字和字符串可以直接default
        },
        names:{
            type:Array,
            default(){
                return ["默认返回的列表"]//数组和对象的默认值需要通过工厂函数返回默认值
            }
        }
    }
}
</script>

5.组件事件（组件传递数据）

props只能父传子，但通过$emit可以子传父，并触发事件

<template>
    <h3>parent组件自定义事件</h3>
    <ChildDemo @someEvent="getHandle" />
    <p>父元素：{{ message }}</p>
</template>
<script>
import ChildDemo from './ChildDemo.vue'
export default{
    data(){
        return{
            message:""
        }
    },
   components:{
    ChildDemo
   },
   methods:{
    getHandle(data){
        this.message = data;
    }
   }
}
</script>
<template>
    <h3>child</h3>
    <button @click="clickEventHandle">传递数据</button>
</template>
<script>
export default{
    data(){
        return{
            msg:"child数据"
        }
    },
    methods:{
        clickEventHandle(){
            this.$emit("someEvent",this.msg)
        }
    }
}
</script>

6.组件与v-model可以将监听到的表单信息传递给别的组件

<template>
    <h3>Main组件</h3>
    <p>搜素内容为：{{ search }}</p>
    <SearchDemo @searchEvent="getSearch"/>
</template>
<script>
import SearchDemo from "./SearchDemo.vue"
export default{
    data(){
        return{
            search:""
        }
    },
    components:{
        SearchDemo
    },
    methods:{
        getSearch(data){
            this.search = data;
        }
    }
}
</script>
<template>
    搜索：<input type="text" v-model="search">
</template>
<script>
export default{
    data(){
        return{
            search:""
        }
    },
    watch:{//侦听器
        search(newValue){
            this.$emit("searchEvent",newValue)
        }
    }
}
</script>

7.透传 attribute

“透传 attribute”指的是传递给一个组件，却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。最常见的例子就是 class、style 和 id。

13.插槽slot

插槽元素slot是一个插槽出口，传递的是一个HTML结构，标示了父元素提供的插槽内容将在哪里被渲染。
插槽内容动态传递数据时，在父级传入动态数据。
没有传递插槽内容时可以在子级给默认值。
v-slot：具名插槽，给插槽名字，然后引用多个插槽。缩写是#
插槽数据要父元素和子元素都传递是，子先传给父，父再在slot里面渲染传递给子（v-slot=“slotProps”）。

<template>
  <!-- 3.显示子组件，这里传递着父元素的html -->
  <SlotDemo>
    <template v-slot:first>
      <h3>我是父元素里面的html元素1{{ message }}</h3>
    </template>
    <!-- 具名插槽v-slot的缩写# -->
    <template #seconder>
      <!-- 没有传递任何html，所以用默认值 -->
    </template>
    
  </SlotDemo>
</template>
<script>
import SlotDemo from "./components/SlotDemo.vue"//1.引入子组件
export default{
  data(){
    return{
      message:"插槽动态数据"
    }
  },
  components: {
    SlotDemo//2.注入子组件
  }
}
</script>
<template>
    <h3>我是子元素内容</h3>
    <slot name="first">默认值1</slot>
    <br>
    <slot name="seconder">默认值2</slot>
</template>

14.组件生命周期

8个生命周期函数：
创建期：beforeCreate created
挂载期：beforeMounte mounted
更新期：beforeUpdate updated
销毁期：beforeUnmount unmounted

15.动态组件

1.component :is=“XX”

<template>
  <component :is="tabComponent"></component>
  <button @click="change">切换组件</button>
</template>
<script>
  import ComponentA from "./components/ComponentA.vue";
  import ComponentB from "./components/ComponentB.vue";
  export default {
    data(){
      return{
        tabComponent: "ComponentA"
      }
    },
    components:{
      ComponentA,
      ComponentB,
    },
    methods:{
      change(){
        this.tabComponent = this.tabComponent=="ComponentA" ? "ComponentB" : "ComponentA";
      }
    }
  }
</script>

2.组件切换时，被切换的就会被卸载掉，使用keep-alive组件强制被切换的组件保持存活状态。
3.异步组件，使组件异步加载。方法：导入组件时使用异步导入方法即可：

const ComponentB=defineAsyncComponent(()=>import("./ComponentB.vue")

16.依赖注入逐级透传

1.provide，inject