[JavaScript知识库]vue 笔记6

vue 笔记六

v-model修饰符

1、v-model.trim

去掉输入框中的空格字符

<template>
  <div id="app">
    <input type="text" v-model.trim="msg">
    <button @click="look">查看</button>
  </div>
</template>

<script>

export default {
  data(){
    return {
     msg:"1000"
    }
  },
  methods:{
    look(){
      console.log(this.msg);
    }
  }
}
</script>

2、 v-model.lazy

懒加载，当光标失真时更新页面

<template>
  <div id="app">
    <input type="text" v-model.lazy="msg">
    <button @click="look">查看</button>
  </div>
</template>

<script>
export default {
  data(){
    return {
     msg:"1000"
    }
  },
  methods:{
    look(){
      console.log(this.msg);
    }
  }
}

3、v-model.number

<template>
  <div id="app">
    <input type="text" v-model.number="msg">
    <button @click="look">查看</button>
  </div>
</template>

<script>

export default {
  data(){
    return {
     msg:"1000"
    }
  },
  methods:{
    look(){
      console.log(this.msg);
    }
  }
}

动态组件

若希望页面中的某个地方，在不同组件之间进行动态切换，这时候除了条件渲染，还可以使用动态组件，也就是用component标签，需要绑定v-bind：is ，is后跟组件的变量名决定使用哪个组件来渲染，注意: is是组件名 :is是data中的变量中保存的组件名

<template>
  <div id="app">
    <h1>主页面</h1>
    <button @click="fn('Box')">Box</button>
    <button @click="fn('Box1')">Box1</button>
    <component :is="name1"></component>
  </div>
</template>

<script>
import Box from "./Box.vue";
import Box1 from "./Box1.vue";
export default {
  data() {
    return {
      name1: "Box1",
      // 用一个变量保存，Box代表标签名
    };
  },
  components: {
    Box,
    Box1,
  },

  methods:{
    fn (arg){
      this.name1=arg
    }
  }
};
</script>

缓存组件

keep-alive可以缓存动态切换的组件，在动态组件中，可以使用activated钩子函数，用于页面执行一次就更新一次，必须在keep-alive标签中使用

keep-alive include=“box”，指定某一组件缓存，组件名必须是

<template>
  <div id="app">
    <h1>主页面</h1>
    <button @click="fn('Box')">Box</button>
    <button @click="fn('Box1')">Box1</button>
    <keep-alive include="Box">
      <!-- 只有包含在Box的页面对应数据才会缓存 -->
    <component :is="name1"></component>
    </keep-alive>
  </div>
</template>

<script>
import Box from "./Box.vue";
import Box1 from "./Box1.vue";
export default {
  data() {
    return {
      name1: "Box1",
      // 用一个变量保存，Box代表标签名
    };
  },
  components: {
    Box,
    Box1,
  },
  methods:{
    fn (arg){
      this.name1=arg
    }
  }
};
</script>

keep-alive exclude=“box2”，除了box3 不缓存，其他组件都缓存，代码原理同上

异步组件

方法一：通过webpack2.0的按需加载

  components: {
    Box:(resolve)=>{
      return require(["./Box.vue"],resolve)
      //只有当调用Box1的时候才会调用里面的代码
    },
      Box1:()=>import("./Box1.vue")
      //最常用的方法
  }

路由环境的集成

vue-router就是专门做切换组件的功能,它是一个单独的技术,依赖vue，

环境的集成时，在入口文件引入路由 import VueRouter from “vue-router” ，可以称为插件

//安装到项目中:
npm i vue-router --save或者 npm i vue-router --S

 在main.js入口文件中引入
 import Vue from "vue"
 import VueRouter from "vue-router"//引入路由工具
 import App from "./App.vue"
 
 Vue.use(VueRouter)//注入路由,就是运行路由的相关函数和给vue绑定东西:比如$router
 var router=new VueRouter({
  routes:[
       {path:"/home",component:()=>import("./Home.vue")},
      {path:"/Car",component:()=>import("./Car.vue")},
      {path:"/Info",component:()=>import("./Info.vue")},
    ],
    mode:"history"
})

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

路由传参

路由传参有2种方式

传递的参数都在路由信息对象中: 路由对应的组件中获取 this.$route

1、query传参

<router-link to="/xx?name=karen&pwd=123">go</router-link>
this.$router.push({path:"/xx",query:{name:"karen",pwd:123}})

//在路由匹配的组件中获取数据:
mounted(){let queryObj=this.$route.query}

2、动态路由传参

const router=new VueRouter({
	 routes:[
		 {path:"/home/:id",component:()=>import("./home.vue")},
		 {path:"/Car",component:()=>import("./Car.vue")}]
 })
 
 //2种传参:
 <router-link to="/home/123">go</router-link>
 this.$router.push({path:"/home",params:{id:123}})
 
 
//在路由匹配的组件中获取数据:
mounted(){let paramsObj=this.$route.params}