常用语法vue实战

Base

1.方法传参 注意单双引号的问题，不能同时使用

@click = "clickHandler($event,123)" // "clickHandler($event,'要单引号')"

 function(e,args){
	console.log(e) //event{}
	console.log(args) // 123
}

2.v-bind绑定class,可结合checked使用(勾选）

<p :class="myclasses1">绑定多个class['class1','class2']</p>
<p :class="{'class1':checkValue1,'class2':checkValue3}">绑定多个或单个class用这种写法 "{'class1':checkValue1,'class2':checkValue3}"</p>
<p :class="[checkValue1?'class1':'',checkValue3?'class2':'']">绑定多个class的数组写法"[checkValue1?'class1':'',checkValue3?'class2':'']"</p>
<h2>属性 与 绑定class一样的写法</h2>
<p :style="checkValue2?{textShadow:'3px 5px 5px #656B79'}:''">绑定多个或单个属性,增加对象子项即可</p>
<p :style="checkValue2?myshadow:''">绑定属性</p>

3.v-if v-show

//多个来回切换怎么写呢？

4.监听数组，对象的变化(3.0版本以下）

data(){
	return {

	}

}

watch: {
    newArr: {
      handler: function (val, oldVal) {
        console.log("watch");
        console.log(val, oldVal);
      },
      deep: true,
    },
  },
  computed: {
    newArr: function () {
      console.log("computed");
      return JSON.parse(JSON.stringify(this.myArr));
    },
  },

// 或者 简写
watch: {
	'myobj.name' :function(val,oldval) {
		
	}
}
methods: {
    myclick: function () {
      // this.$set(this.myArr, 0, 4);
      this.$delete(this.myArr, 0);
    },
  },

5.vue-router路由语法

页面中直接跳转

6.页面缓存keep-alive

//没有父子组件之分

{
	path: "/about",
    name: "About",
    component: About,
		component:()=>import('./Abuout'),//异步加载组件，性能方面。
    meta:{
      keepAlive: true //需要被缓存，不需要就不写。
    }
}

<keep-alive>
	<router-view><router-view/>
<keep-alive/>

//以上是常规的基本用法，但是不太实用会改动一下
<keep-alive>
    <!-- 需要缓存的视图组件 -->
  <router-view v-if="$route.meta.keepAlive">
  </router-view>
</keep-alive>

<!-- 不需要缓存的视图组件 -->
<router-view v-if="!$route.meta.keepAlive">
</router-view>

//业务场景的用法
export default {
      name: "app",
      data: () => ({
        include: []
      }),
      watch: {
        $route(to, from) {
          //如果 要 to(进入) 的页面是需要 keepAlive 缓存的，把 name push 进 include数组
          if (to.meta.keepAlive) {
            !this.include.includes(to.name) && this.include.push(to.name);
          }
          //如果 要 form(离开) 的页面是 keepAlive缓存的，
          //再根据 deepth 来判断是前进还是后退
          //如果是后退
          if (from.meta.keepAlive && to.meta.deepth < from.meta.deepth) {
            var index = this.include.indexOf(from.name);
            index !== -1 && this.include.splice(index, 1);
          }
        }
      }
    };
以上是调整后的
原来是这样：include和exclude指定是否缓存某些组件

<keep-alive :inclued = "about"> 就是组件名字 name:about

created mounted update destroy

初始进入和离开 created ---> mounted ---> activated --> deactivated
后续进入和离开 activated --> deactivated

7.nextTick

vue是异步渲染的

methods:{
console.log(
this.$nextTick(()=>{
	
})
}
<ul ref='xx'>

this.$ref.xx //获取当前Dom节点

//eslint-disable-next-line

8.动态渲染组件

用法：
<component :is = "component-name">

import NextTick from 'xx'
components:{
	NextTcik
}
data(){
	component-name:NextTick
}

动态加载组件

结合v-for
<v-for (val,key) in componentList :key="key">
	<component :is = "val.type">

data(){
	componentsList = [
		1:{
			type:component-name
		},

	]
}

实用场景，就是更加数据来加载对应类型的组件

例如：一个页面有很多类型的数据，内容，图片，视频等等。
数据是内容文本 = 》TextConponent

9.v-mode自定义

这里就涉及到父子组件
效果跟input双向绑定一样

//父组件

<p> {{name}}<p/>
<About v-model = "name'></About>

improt About from 'xx';

components:{
	About
},
data(){
	return {
			name:'xx'
	}
}

// 子组件

<input type = "text" :value="textInput"
 @input = "$emit('change',event.target.value)">

model:{
	prop:'textInput',
	enent: 'change'
}
props:{
	textInput:String,
	defualt(){
	return ''
}
}

10.兄弟组件之间传值

enventBus.js
import Vue from "vue"
export default new Vue

//x1.vue
improt eventBus from ./enventBue

eventBut.$emit('add',value);

//x2.vue
improt eventBus from ./eventBus.js

eventBus.$on('add',value);

beforeDestroy(){
		eventBus.$off('add',callBack)
}

npm install event-emitter

用法同上

vue3 课程

生命周期的理解

• before created 实例创建之前

• create 实例创建成功

• before mount 组件内容被渲染到页面之前

• mount 组件内容被渲染到页面后

• before update 数据改变就会执行，打印是之前的内容

• update 是数据改变后，打印是新数据

插槽

//父组件
<layout>
	<div> 父传子让插槽显示的内容</div>
</layout>

//子组件
<solt> default data</solt>

//父组件
<layout>
	<div v-solt=“header”></div>
	<div v-solt=“footer”></div>
</layout>
//或者用temple语法
<layout>
	<template v-solt:header> </template>
	<template v-solt:footer> </template>
</layout>

//子组件
<solt name="header"></solt>
	<div> content</div>
<solt name="footer"></solt>

//1.父组件 app
<list v-solt = "soltprops">
	<div> {{soltprops.bindattrs}}</div>
</list>
//可以用另外的简写
<list v-solt = "bindattrs">
	<div>{{bindattrs}}</div>
</list>

//2.子组件 list
<solt v-for ="item in list" :bindattrs =“item”/>

动态组件

基本语法查漏

插件

vue 渲染的一个过程：template render h 虚拟dom（js对象）真实的dom

render 函数用法

render(){
	const {h} = Vue
	return h ("div",｛｝，'这是内容')
}
**插件场景（数据检验）**

配合mixin
this.$xxx
//父组件
rules:{
	key:{
	validate:key =>key===0
}
vue.mixin(｛
	create()｛
		获取规则
		this.$options.rules
		监听数据变化
		this.$watch(key,())
	｝
｝)
//封装
const xxx = (app,options)=>{
}
vue.use(xxx)

vue3开发笔记