vue 基础知识点
vue 的实例化对象创建
const app = new Vue({
})
挂载点
***vue 的挂载点使用id选择器 ***
vue 的挂载点必须是一个具体的元素, 不能是body或者是HTML标签
官网定义: 提供的元素只能作为挂载点。不同于 Vue 1.x,所有的挂载元素会被 Vue 生成的 DOM 替换。因此不推荐挂载 root 实例到 或者 上。
- 通过el属性设置挂载点
const app = new Vue({
el:"#app"
})
- 通过 $mount() 方法设置挂载点
const app = new Vue({
}).$mount('#app')
vue 的基础语法
vue的(插值)模板语法 “Mustache”语法 (双大括号)
- 直接使用模板语法插值
// key 就是data属性值的键名
<标签>{
{key}}</标签>
- 使用指令形式插值
- v-text : 插入文本内容(不能解析标签)
<标签 v-text='key'></标签>
- v-html : 插入HTML结构(解析标签)
<标签 v-html='key'></标签>
vue的指令
指令是作为html标签的属性存在的
- v-if v-else v-else-if 条件渲染
条件和js中的条件写法一样
<标签 v-if='条件1'></标签>
<标签 v-else-if='条件2'></标签>
<标签 v-else-if='条件3'></标签>
<标签 v-else-if='条件4'></标签>
<标签 v-else></标签>
- v-on : 绑定事件
***js中的事件在这里都可以使用 click keyup keydown mouseover ***
<标签 v-on:事件名='函数名'></标签>
<标签 v-on:事件名='函数名(参数)'></标签>
<标签 v-on:事件名.修饰符='函数名(参数)'></标签>
<!-- v-on 可以简写为 @ -->
<标签 @事件名='函数名(参数)'></标签>
- 事件处理程序都需要放到 methods属性中
const app = new Vue({
el:"#app",
methods:{
函数名(){
},
函数名(){
},
函数名(){
},
函数名(){
}
}
})
- v-show : 通过css样式控制元素的出现和隐藏(display:none; display:block)
<!-- key 是一个布尔值 -->
<标签 v-show='key'></标签>
- v-for : 列表渲染(循环)
为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key attribute:
<!-- item 是自定义的;代表数组的元素 ; index 是索引值, array是循环的数组; id 是绑定的key的唯一值 -->
<标签 v-for='item in array' v-bind:key='id'>{
{item}}</标签>
<标签 v-for='(item, index) in array' v-bind:key='id'>{
{item}}</标签>
<!-- 遍历对象 value 代表对象中的属性值, key 代表对象中的属性(键) -->
<标签 v-for='value in object' v-bind:key='id'>{
{value}}</标签>
<标签 v-for='(value, key) in object' v-bind:key='id'>{
{value}}</标签>
<!-- 这种方式不常使用 -->
<标签 v-for='(value, key, index) in object' v-bind:key='id'>{
{value}}</标签>
- v-bind: 绑定属性
<标签 v-bind:属性名="绑定的数据(data中的key)"></标签>
- v-text : 解析文本,相当于往标签中插入文本数据
<标签 v-text='绑定data中的key'></标签>
<p v-text=" hello "></p>
<标签 v-text='绑定原始的字符串类型'></标签>
<!-- 案例 -->
<p v-text=" 'hello' "></p>
<标签 v-text='字符串拼接'></标签>
<!-- 案例 -->
<p v-text=" 'hello' + msg "></p>
- v-html : 解析HTML结构, 相当于往标签中插入HTML结构
<标签 v-html='data中的key'>
- v-model : 双向数据绑定, 主要用于 input 等表单元素
<标签 v-model="data中的key">
<标签 v-model="data中的key"></标签>
- v-pre : 跳过编译不渲染, 直接显示原始的{ {}}语法
<标签 v-pre></标签>
- v-once : 只在首次加载时渲染一次, 后边数据即使改变,也不会再次渲染
<标签 v-once></标签>
- v-cloak : vue实例结束编译后渲染 , 在编译没有结束之前,处于隐藏状态, 需要结合css样式一起使用
通过该指令可以解决刷新页面时{ {}}闪现问题
<!-- css -->
[v-cloak]{
display:none;
}
<!-- html -->
<标签 v-cloak></标签>
vue绑定类名和行内样式
类名的绑定
<!-- 绑定动态类名 使用对象 // key:就是绑定的类名 value:决定绑定的类名是否显示, 是一个布尔值-->
<标签 :class="{key:value}"></标签>
<!-- 绑定固定类名和动态类名 组合形式 // key:就是绑定的类名 value:决定绑定的类名是否显示, 是一个布尔值-->
<标签 :class="['固定类名1', ... , {key:value}]"></标签>
<!-- 绑定多个类名 使用数组 // data中key的值直接是类名-->
<标签 :class="[data中的key1, data中的key2, ...]"></标签>
行内样式的绑定
<!-- 直接绑定data中的样式对象 // key 的值是一个样式对象-->
<标签 :style="data中的key"></标签>
<!-- 绑定对象形式 对象的key (property ) 就是样式名, 对象的value (data-key) 就是 data中的key, 就是具体的样式值 -->
<标签 :style="{
property:data-key}"></标签>
<!-- 绑定数组 将多个样式对象应用到同一个元素上 data中的key 直接是样式对象 -->
<标签 :style="[data中的key1, data中的key2, ... ]"></标签>
vue的计算属性
computed计算属性的用法和data的用法类似; 怎么使用data,就怎么使用计算属性
计算属性的语法
计算属性 是一个函数, 必须要有返回值, 返回值就是计算处理后得到的数据, 函数名就是计算属性绑定的key
<标签>{
{计算属性中的函数名}}</标签>
<!-- 案例 -->
<p>{
{text}}</p>
// 函数名就是绑定的key
computed:{
函数名(){
// 经过响应的处理
// value 就是处理后的数据
return value
},
...
}
// 案例
computed:{
text(){
return 'hello'
},
...
}
计算属性的应用场景
- 针对于复杂的运算 可以使用计算属性
- 对 data中已有的数据进行处理得到新的数据
———————— - 计算属性可以接受参数: 通过闭包的形式接受参数(了解即可)
计算属性和方法的区别
- 计算属性存在缓存的, 只要数据不发生变化,计算属性不会重新计算渲染
- 方法是每次调用都会执行
vue的过滤器
过滤器对数据进行过滤处理(格式化的操作)
过滤器的语法
- 过滤器可以有多个, 按照从左到右的顺序依次执行
- 过滤器默认接受的参数就是 | 前边的数据
- 过滤器也可以接受多个参数
<!-- 多个过滤器 -->
<标签>{
{key | filterName1 | filterName2 ...}}</标签>
<!-- 接受多个参数 -->
<标签>{
{key | filterName1(arg1, arg2, ...)}}</标签>
filters:{
// 默认参数
filterName1(value){
return value;
},
// 第一个参数value是默认要处理的数据, 后边就是接受的多个参数:arg1, arg2, ....
filterName2(value, arg1, arg2, ....){
return value;
}
}
vue组件
vue组件注册
- 注册组件
// 第二个参数是组件的配置项
Vue.component(自定义组件名,{
// template 组件模板 组件的HTML结构
template:`
html 结构
`
})
const app = new Vue({
el:'#app'
})
- 使用组件: 组件其实就是一段独立的HTML结构,像使用标签一样使用组件名
<div id="app">
<组件名></组件名>
</div>
组件的命名方式
- 使用短横线分割命名法(kebab-case) , 直接进使用组件名引用
Vue.component("slide-bar",{
// template 组件模板 组件的HTML结构
template:`
html 结构
`
})
// 使用 <slide-bar></slide-bar>
- 使用大驼峰命名, 转换为 短横线分割形式 引用
Vue.component("SlideBar",{
// template 组件模板 组件的HTML结构
template:`
html 结构
`
})
// 使用 <slide-bar></slide-bar>
组件的通信
父子通信(传递数据)
-
需要在父组件中传入数据(父组件给子组件传递数据)
找到父组件标签, 通过给父组件标签添加属性的形式传递数据, 属性名就是自定义的数据名(为了子组件接受),属性值就是传递的数据
<child 自定义属性名=‘传递的数据’> -
需要在子组件的注册中接受数据,通过Props 属性接受
在子组件的注册中, 使用Props 属性接受 数据, 接受的数据名就是父组件中的自定义属性名
props:[父组件自定义属性名] -
在子组件的模板中使用数据
在子组件的模板中 template 中使用接受的数据, 使用的是props中接受的名字
<div id="app">
<!-- 传递静态数据 -->
<child a='hello'></child>
</div>
Vue.component('child',{
// 组件模板 组件的HTML结构
template:`
<p>hello {
{a}}</p>
`,
props:['a']
})
子父通信
子父通信需要借助于 事件 进行传递: e m i t ( ) 和 emit()和 emit()和on
子组件中通过$emit()触发自定义事件事件,传递子组件的数据
在父组件中 通过 $on() 监听子组件的自定义事件,接受数据
子父通信的步骤:
- 在子组件的模板template中 某个元素上绑定一个原生事件,触发事件处理程序,在该事件处理程序中 通过 $emit()触发自定义事件,并且传入第二个参数(就是传递的数据)
Vue.component('SlideBar', {
template:'<div><em @click="sendMsg">world</em></div>',
data(){
return {
childMsg:'子组件的信息'
}
},
methods:{
// 事件处理程序
sendMsg(){
// 触发自定义事件
this.$emit('child:send', this.childMsg)
}
}
})
- 在父组件中进行监听: 通过v-on监听子组件的自定义事件, 然后触发父组件的methods中的方法
<div id="app">
<slide-bar v-on:child:send='getMsg'></slide-bar>
</div>
const app = new Vue({
el:'#app',
data:{
msg:'父组件传递数据'
},
methods:{
// 父组件的methods中的方法
getMsg(data){
// data 就是子组件传递的数据
console.log(data);
}
}
})
非父子通信
需要借助于一个公共的事件总线Bus进行通信
- 创建一个公共的事件总线Bus
const Bus = new Vue();
- 需要通过 Bus.$emit() 触发自定义事件
Vue.component('ComChild', {
template:`
<div>
<button @click="sendMsg">COm2 </button>
</div>
`,
data(){
return {
comMsg:'这是com2的数据'
}
},
methods:{
sendMsg(){
// 触发自定义事件
Bus.$emit('send:com1', this.comMsg)
}
}
})
- 在另一个接受数据的组件中 通过Bus. o n ( ) 监 听 自 定 义 事 件 ; 一 般 on() 监听自定义事件; 一般 on()监听自定义事件;一般on()用于 created() 生命周期中
Vue.component('Com1', {
template:`
<div>
<button>COm1</button>
</div>
`,
created(){
Bus.$on('send:com1', (data) => {
console.log(data);
})
}
})
组件标签和普通标签的区别
区别1: 添加属性
- 给普通标签(html标签)添加属性,就是给标签添加属性
- 给组件标签添加属性, 那就意味需要通过 props 进行接收, 实际就是传递数据 (实现父子通信)
区别2: 绑定事件
- 给普通标签绑定事件, 就是绑定的是原生事件,可以直接在methods中触发
- 给组件标签绑定事件,不管是什么事件名, 就是绑定的是 自定义事件 , 需要在组件内通过 $emit() 触发,需要在父组件中监听执行
<组件标签 @自定义事件名="父组件的methods中的方法名"> </组件标签>
绑定的事件要想被触发,必须在组内内部借助于原生事件 触发事件,在该事件中 通过 $emit() 进行触发;
如果要在组件标签上绑定原生事件,需要在事件后添加修饰符 .native实现
props的传入数据类型
props接受的数据类型:String Number Boolean Object Array Symbol Function Date
- 传入静态数据 默认传入的是字符串类型
<组件标签 title='hello'></组件标签>
- 传入数值或者布尔值 数组 等 通过 v-bind 进行绑定,
即便对象 数组 数值 布尔 等是静态的,我们仍然需要v-bind
来告诉 Vue 这是一个 JavaScript 表达式而不是一个字符串。
<组件标签 :title='[1,2,43,5]'></组件标签>
<组件标签 :title='{name:"tom", age:19}'></组件标签>
<!-- 直接绑定对象名 -->
<组件标签 :title='ObjName'></组件标签>
<!-- 传入一个对象所有的属性 -->
<组件标签 v-bind='ObjName'></组件标签>
插槽
插槽的作用是分发内容, 用于组件标签内插入内容, 通过slot标签分发内容, 用于组件模板内部
插槽的分类
- 默认插槽(匿名插槽)
- 具名插槽
- 作用域插槽
可以给插槽添加默认内容(在slot标签内添加默认内容): 如果用户传入内容,则使用用户传入,如果没有传入,使用默认内容渲染
默认插槽(匿名插槽)
- 定义插槽
Vue.component('Com1', {
template:`
<div>
<button>COm1</button>
<slot>默认内容</slot>
</div>
`,
})
- 使用插槽
<com1>
<!-- 使用默认插槽 -->
<template >
hello world
</template>
<!-- 使用具名插槽 -->
<template v-slot:header>
<p> 段落</p>
</template>
</com1>
具名插槽(有名字的插槽)
- 给 slot 标签 添加name属性
Vue.component('Com1', {
template:`
<div>
<button>COm1</button>
<slot>默认内容</slot>
<slot name='header'>具名插槽</slot>
</div>
`,
})
作用域插槽(传递数据的)
- 传入数据 在 slot标签上自定义属性传递数据,
<!-- 传递静态数据 需要区分数据类型,如果是数值,布尔,数组,或对象 使用 v-bind 进行绑定 -->
<slot 自定义属性名1='value1' 自定义属性名2='value2' 自定义属性名3='value3' 自定义属性名4='value4'></slot>
<!-- 传递组件data中的数据 动态数据 -->
<slot :自定义属性名='data中的key'></slot>
<!--
案例
-->
<slot :comMsg='comMsg'></slot>
Vue.component('ComChild', {
template:`
<div>
<button @click="sendMsg">COm2 </button>
<slot a='hello msg' b='100' :c='[1,3,4,56]' :comMsg='comMsg'></slot>
</div>
`,
data(){
return {
comMsg:'这是com2的数据'
}
}
})
- 接受数据 在 组件标签上 通过 v-slot:name=‘自定义对象名’ 接受数据; 接受到的是一个对象集合。 通过 obj.key 进行取值
<com-child v-slot:default='obj'>{
{obj.a}} {
{obj.b}} {
{obj.c[3]}} {
{obj.comMsg}}</com-child>