Vue基础知识梳理（二）

vue基础知识梳理（二）

1. vue中v-bind:class动态添加class

总结：动态添加class，需要给：class=“对象”，对象中value为true，则key作为class名添加；value为false，则添加失败

• 方案一：直接在html结构中给class一个对象

//html
点我

//样式
.btn{
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: cornflowerblue;
}
.wordColor{
    color: crimson;
}
.wordSize{
    font-size: 24px;
}

效果

• 方案二：使用计算属性返回对象

//html
 
点我

//计算属性
computed:{
	//返回一个对象给class，对象中属性值为true的属性，属性名被添加到class名中
    classname(){
        return{
            wordColor:true,
            wordSize:false
        }
    }
}
//样式
.btn{
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: cornflowerblue;
}
.wordColor{
    color: crimson;
}
.wordSize{
    font-size: 24px;
}

效果图

• 动态添加style也是一样

动态style对象：

动态style数组：

---

2. vue中 ’ .native ’ 的使用

官方解释：有时候，你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native

举例说明：

• 自定义一个Button.vue组件

//js
methods:{
    clickEvent(){
        console.log('我是子组件的button')
    }
}

• 在Home.vue组件引用Button.vue组件

//html 直接引入组件，点击它，Button组件自带的点击事件生效


----
//给Button组件添加自定义事件，womenClick没生效；自带的事件生效

出现这种情况是因为在Button.vue组件中，事件是绑在原生html元素上，而在引用组件时，事件绑定在组件上，所以不会生效

需求：需要给Button.vue组件一个自定义事件，又要触发自身事件

办法一：使用vue的修饰符’ .native ’ ,简单理解其作用，穿透组件，直接到原生html元素上绑定事件

//Button.vue
点我
//home.vue  

在home.vue组件中，点击Button组件，两个事件都触发，子组件先执行

办法二：使用 this.$emit() 子向父传参，自动调用父组件的方法

//Button组件 
点我
clickEvent(){
    console.log('我是子组件的button')
    this.$emit('click')   //click要与home组件中给Button组件绑定的事件名相同
}

//home组件

---

3. vue中子组件调用父组件data和method

this.$parent 即可获取父组件的所有data和method

---

4. vue中不需要响应式的数据应该怎么处理>

开发中，会有一些数据，从始至终都未曾改变过，这种死数据，既然不改变，那也就不需要对他做响应式处理了

// 方法一：将数据定义在data之外
data () {
    this.list1 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
    this.list2 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
    return {}
 }
 
// 方法二：Object.freeze()
data () {
    return {
        list1: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
        list2: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
    }
 }

正常获取数据

---

5. keep-alive的基础使用

• 用途

一般情况下，组件进行切换的时候，默认会进行销毁；比如我在一个组件中input输入某些值，现在切换到另一个组件，再换回来，input框内容被清空了

想要组件切换后不进行销毁，而是保存之前的状态，那么就可以利用keep-alive来实现

• 用法

// keep-alive 包裹router-view占位符，所有要使用占位符的组件，都会被缓存，切换也不会被销毁

  


//keep-alive上有两个属性  include exclude

  //include 表示只有这个组件才能生效
  


  //exclude  表示出了这个组件都生效
  


  //xxx:["xxx","xx","xxxx",···]
  

注意：

include/exclude=“name”，这个name是组件内注册的name，组件必须要注册name才生效

//结合router，缓存特定的页面

    



在路由中meta中添加一个keepAlive属性，用来做判断
{
	 path: '/person',
	 name: 'Person',
	 component: ()=>import('../views/Person.vue'),
	 meta:{
	   title:'人类',
	   keepalive:true
 },

• 生命周期函数：activated与deactivated

组件在切换的时候不会被重新创建，自然也就不会调用created等生命周期函数；如果要在每次进入页面的时候获取最新的数据，需要在activated阶段获取数据，承担原来created钩子中获取数据的任务

//activated  切换回改组件
activated(){
  console.log('我被激活了，活动状态')
},

//deactivated  切换走该组件
deactivated(){
  console.log('我被缓存了，缓存状态')
},

---

6. router-view 命名视图

• router-view 是和router路由相关

（我自己私人的理解）router-view就是占位符，给组件占位，至于那些组件可以使用router-view，这个需要配合router路由设置；我觉得是路由中的分级，同一级路由使用同一个router-view；

先看路由配置

//登录页
  {
    path:'/login',
    component:Login
  },
  //首页
  {
    path:'/',
    component:Home,
    children:[{
    	 	path:'person',
    		component:Person
    },{
    	 	path:'animal',
    		component:Animal
    },{
    	 	path:'botany',
    		component:Botany
    },]
  },

注意：路由中必须要有组件，不然router-view不生效

App.vue，在最大的主组件使用router-view；那路由中第一级路由才能使用

router.js中 一级路由就是"/login"、"/" 可以使用App.vue中的router-view

在home.vue，再次使用router-view

那么对应的就该是路由中Home组件对应的子组件使用，Person、Animal、Botany使用

重点：处于哪个路由，哪个路由对应的组件就占用router-view的位置进行显示，有点像动态组件，区别还是很明显，路由传递参数很实用；动态组件一般就是小局部使用

• 这是route-view一层层嵌套，也有同时 (同级) 展示多个视图，而不是嵌套展示；我觉得很少用到
  

---