vue学习笔记

应用创建

每个 Vue 应用都是通过 createApp 函数创建一个新的 应用实例：

import { createApp } from 'vue'
// 从一个单文件组件中导入根组件
import App from './App.vue'

const app = createApp(App)

但应用实例必须在调用了 .mount() 方法后才会渲染出来。该方法接收一个“容器”参数，可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串：

<div id="app"></div>

app.mount('#app')

具体见 引入组件

框架

<script>
export default{
    data(){
        return{
            msg:"111",
        }
    }
}
</script>
 
<template>
    <p>{{msg}}</p>
</template>

$data$ 可以用来定义属性。

创建 $vue$ 实例

const x=new Vue({  //const x=可以不写
	el:'#root',
	//也可以这么写
	//el:document.getElementById('root'),
	data:{
		name:'gjx',
		age:18
	}
})
这个是在html文件里面写

容器和 $Vue$ 实例是一对一的

插值语法

{{name}} name是一个变量，可以返回name的内容。

例如：

<h1>{{name}}</h1>

{{ }} 双花括号里面还可以放js表达式

指令语法

url是一个变量

<a href="url">点击</a>
<a href="{{url}}">点击</a>

这两个均是不合法的

合法写法:

通过指令v-bing绑定

<a v-bind:href="url">点击</a>

一旦加了 v- 引号里面的内容会自动识别为js表达式

由于 v-bind: 十分常用

所以在vue中可简写为:

功能：用于解析标签。

数据绑定

v-bind 是单向数据绑定。（数据只能从data流向页面）

v-model 是双向数据绑定。（数据也可以从页面流向data）

但v-model只能应用在表单类元素（输入类元素）上。

所以v-model自动绑定在了value上，所以只能写出 v-model="name"

而不是 v-model:value="name"

示例：

<input type="text" :value="name">
<input type="text" v-model="name">

v-bind 绑定对象

<p v-bind="aaa"></p>
data(){
	return{
        aaa:{
            id:"s",
            color:"",
        }//写到data里面
	}
}

v-model修饰符：

默认的v-model会在每次input时更新数据。

v-model.lazy可以使其在改变时再进行数据的更新。

v-model.number只接受输入的数字

例如：<input type="number" v-model.number="msg">

v-model.trim可以去除前后空格

允许换行

<textarea v-model="msg"></textarea>
<p style="white-space: pre">{{ msg }}</p>

几个例子：

多个复选框：

<input type="checkbox" id="11" value="11" v-model="msg">
<label for="11">11</label>
<input type="checkbox" id="22" value="22" v-model="msg">
<label for="22">22</label>

msg为列表类型

单选框：

<input type="radio" id="11" value="11" v-model="msg">
<label for="11">11</label>
<input type="radio" id="22" value="22" v-model="msg">
<label for="22">22</label>

msg为普通类型

选择列表：

<select v-model="msg">
    <option value="www.baidu.com">百度</option>
    <option value="bing.com">必应</option>
</select>

条件渲染

v-if="flag"

flag为true时才会进行渲染(显示)

flag可以为js表达式

例如

v-if="a>=0"

当然也有 v-else v-if-else条件表达式

v-show跟v-if效果是一样的，但是v-show 会在初始时渲染，在条件改变时只会改变组件的可见性。

而v-if 则是在条件为true时重新渲染，为 false时进行销毁。

所以在频繁切换时，建议选用v-show，切换开销小。

列表渲染

相当于for循环遍历列表

例如

<p v-for="item in a">{{ item }}</p>

a是一个列表

item是列表中的元素

当然如果要获取列表的索引，可以这么做：

<p v-for="(item,i) in a">
    元素：{{ item }}---索引:{{ i }}
</p>

in 关键词可以用 of替代，跟 js 的语法类似。

当然 利用 v-for 关键词也可以遍历集合，

例如：

<p v-for="(value,key,index) in people">
    {{ value }}---{{ key }}---{{ index }}
</p>

value是值，key是键值，index是索引。

people集合
people:{
    name:'gjx',
    age:20,
    sex:'男',
},

v-for遍历整数值

<p v-for="n in 10">{{ n }}</p>

注意n的范围为1-10

注意：v-if 的优先级比v-for 高 ，所以不建议二者在一个标签体中同时使用。

事件处理

可以采用v-on或@对事件进行监听

例如：

<button v-on:click="count++">+1</button>
<button @click="count++">+1</button>
<p>{{ count }}</p>

既然引号里面可以填js表达式

我们也可以在里面自定义函数

例如：

export default{
    data(){
        return{
            count:0,
        }   
    },
    methods:{
        addcount(){
            this.count++
        }
    }
}
<button @click="addcount">+1</button>

事件修饰符

阻止默认事件

在form表单提交时候或者在点击a标签的时候, 会阻止提交或跳转。

clickHandle(e){
	e.preventDefault()
	//阻止默认事件
}

或者

<p @click.prevent="">点击</p>

例如：

<a @click.prevent="clickHandle" href="http://www.baidu.com" target="__blank">点击</a>

这样点击之后就不会跳转。

阻止冒泡事件

当多对标签进行重叠的时候, 你点击最上面的一层标签的时候, 会自动的冒泡到他下面的所有标签上面
而.stop就是阻止冒泡使用的。

clickHandle(e){
	e.stopPropagation()
	//阻止默认事件
}

或者

<p @click.stop="">点击</p>

里面是可以不填东西的。

例如

<div @click="addcount">
    <button @click.stop="addcount">+1</button>
</div>

正常来说如果不加.stop那么点击按钮count会+2，因为包括button和div的。

如果加上stop，那么会阻止向上冒泡（向上传递），也就可以让button只加上按钮的那个1。

只使自身触发

还是上面那个例子，如果使得div块在点击按钮时不触发效果，只当点击div块时触发，怎么做到呢，

例如：

<div @click.self="addcount">
    <button @click="addcount">+1</button>
</div>

这样就会使只有点击到div块本身而不是嵌套的其他组件时，才会执行addcount。

只执行一次

.once

顾名思义，只有第一次点击的时候才会触发效果。

数组变化侦测

常见的几个函数

push(x)往后插入一个元素 $x$ （也可以$push$多个元素）。

pop() 删除最后一个元素。

shift() 删除第一个元素。

unshift(x) 在开头插入一个元素 $x$（类似$push$）。

splice(i,len,items1,...itemsn) 从第 $i$ 个位置开始，往后 $len$ 个元素（包括 $i$）将其替换为 $items1$，$items2$，$\cdots$，$itemsn$，不填的位置默认删除。如果后面一个都不填，那么相当于删除这部分区间的元素。

sort() 对数组进行排序，注意默认是先转化为字符串进行排序。

reverse() 对原数组进行反转。

concat(arr2) 可以将两个数组拼接，注意返回一个新数组，而不是在原数组的基础上进行改变。

filter 按条件过滤掉一些不符合条件的值

例如 筛选出数组中的偶数：

a=a.filter(item=>item%2===0)

同样地，它也是返回一个新数组。

计算属性

computed:{
	check(){
		return this.name>0?"YES":"NO"
	},
},

与函数不同的是，函数每次调用都需要重新渲染一次，而计算属性则只有当表达式值改变才会重新计算。再多次调用的时候，计算属性的效率高。

需要注意的是，计算属性在调用的时候不需要加括号。

Class绑定

<p :class="{'mycolor':true,'mysize':true}">样式</p>

当然也可以这么做

<p :class="['mycolor','mysize']">样式</p>

使用数组设置可改变的style时需要使用三元表达式

例如：

<p :class="[flag?'mycolor':'']">样式</p>

style

<style>
.mycolor{
    color:red;
}
.mysize{
    font-size:100px;
}
</style>

Style绑定

<p :style="{color:'red',fontSize:'100px'}">aaa</p>

<p :style="{'color':'red','font-size':'100px'}">aaa</p>

当然为了简化可以在data里面写一个列表，然后直接绑定这个列表即可。

数组里面套列表

即style="[mystyle]" 这样也可以实现相应的功能。

侦听器

可以监听响应式数据（即data里面的数据）

例如 想要监听msg这个数据

watch:{
    msg(newmsg,oldmsg){
        console.log(newmsg,oldmsg)
    },
}

<button @click="msg='new'">修改</button>

函数名必须与监听的对象名称保持一致，也就是函数名必须为msg，第一个参数是新的数值，第二个是旧的数值，这两个参数名可以随意。

通过ref操作dom

例如：

<p ref="a">{{msg}}</p>
<button @click="$refs.a.innerHTML=12">点击</button>

ref指定名字。

挂载结束后引用会暴露在 this.$refs 上，然后就可以通过底层的js代码进行修改了。

通过 this.$refs.yourrefname 进行访问。

引入组件

在一个Vue文件里面引用其他Vue组件

可以采用下面的方法：

import UI from "./UI.vue"

另外还需要在 export default 中写上：

components:{
    UI,
},

使用时，可以这么用：
<UI> </UI>

或者

<UI/>

如果需要重命名，也可以这样做：

components:{
    'name':UI,
},

但如果通过 <script setup>，导入的组件都在模板中直接可用，无需写 components 。

全局注册方式

import UI from './ui.vue'
createApp(UI).mount('UI')

组件的传递

调用时这么传递

<UI name="gjx"/>

子组件可以这么访问 <p>{{ name }}</p>

但需要在子组件的 export default 里面加上 props:["name"] 或者

props的写法

props: ['propOne', 'propTwo']

props: {
	propOne: {
        type: Number,
        required: true,
        default: 0
    },
    propTwo: {
        type: Object,
        default() {
        	return {}
        }
    },
    propThree: {

    },
}

可以传递任何类型。

子传父

父亲里面调用，cout是函数
<UI @mytransmit="cout"/>  
儿子里面
<button @click="this.$emit('mytransmit',123)">点击</button>

methods:{
    cout(x){
        this.msg=x
    }
},

组件的切换

<component :is="jiemian"></component> 

jiemian 是一个变量，只需要动态修改它就可以实现组件切换的效果。

再进行组件的切换时，旧组件会被卸载，如果在进行频繁的组件切换时，那这样会造成很大的切换开销。我们可以采用 <keep-alive> 来保持组件的灵活。

例如：

<keep-alive>
    <component :is="jiemian"></component> 
</keep-alive>

异步组件

在大型项目中，我们可能需要拆分应用为更小的块，并仅在需要时再从服务器加载相关组件。通俗来讲，就是有需要时再进行组件的引用，Vue 提供了 defineAsyncComponent 方法来实现此功能：

import { defineAsyncComponent } from "vue";
const UI =defineAsyncComponent( ()=>
    import("./UI.vue")
)

依赖注入

如果是父亲像子孙传很多数据的话，依次写 props 会很麻烦，可以在父亲组件中写 provide 依赖，例如：

provide:{
    name:'gjx',
}

在需要用到这个数据的子组件中注入：

inject:["name"]

inject 的用法和写法同 props