vue项目的学习

最新推荐文章于 2022-08-08 10:43:41 发布

子非鱼emma

最新推荐文章于 2022-08-08 10:43:41 发布

阅读量376

点赞数

分类专栏： VUE

本文链接：https://blog.youkuaiyun.com/qq_38998319/article/details/118156267

版权

VUE 专栏收录该内容

28 篇文章

订阅专栏

keepAlive的使用

keepAlive用于将页面中修改后的数据进行缓存,

案例1:

有home页面和about页面,将home页面中的数据添加后跳转到about页面,操作about页面后跳转回home页面,页面内容仍然报错,但about页面无法缓存.

用到了如下页面

index.js

在对应的路由中添加meta属性,属性值为{keepAlive:true}

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    //********* */ 给routes中的对应路由添加meta属性
    meta:{
      keepAlive:true
    }
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

about.vue
<template>
  <div class="demo01">
    <h1>我是About.vue的模板</h1>
    <button @click="fun()">点击加数</button>
   这里丫丫 {{name}} 
  </div>
</template>


<script>
export default {
  name: "About",
data(){
    return{
name:0
    }
},
  methods: {
    fun() {
      this.name++
    },
  },
};
</script>
Home.vue中的代码

<template>
  <div class="home">
    <button @click="haha()">点击加数</button>
    <h1>这里{{msg}}</h1>
  </div>
</template>


<script>
export default {
  name: "Home",
  data(){
    return{
      msg:1
    }  
  },
  methods:{
    haha(){
      this.msg++
    }
  }
};
</script>

App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <!-- 类似于动态组件 -->
    <keep-alive>
    <!-- *******获取路由中的meta总的值,系统给我们留了后路 $route -->
    <router-view v-if="$route.meta.keepAlive"/>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"/>
  </div>
</template>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

实现效果:

ref和$refs的使用

标签中的erf的title的值为该标签

我是写了ref的东西

组件中的ref的值为整个组件

案例2,点击demo08组件中的按钮,获取到demo08s的组件数据方法

使用了这些文件

demo08s
<template>
  <div class="demo01">
    <h1>我是demo08s的模板</h1> 
  </div>
</template>


<script>


export default {
  name: "demo08",
data(){
    return{
       age:1 
    }
},
  methods: {
    fun() {
     console.log(this.$refs.title.age);
    },
  },
};
</script>


demo08.vue

<template>
  <div class="demo01">
    <h1>我是demo08的模板</h1>
    <button @click="fun()">点击获取this.$refs.title的值</button>
    <!-- <p ref="title">我是写了ref的东西</p> -->


    <demo8s ref="title"></demo8s>
  </div>
</template>


<script>
// 引入demo8组件
import demo8s from "@/components/demo08s.vue";
export default {
  name: "demo08",
  components: {
    //   注册demo8s组件
    demo8s,
  },
  methods: {
    fun() {
      //  获取demo08s的整个组件
      console.log(this.$refs.title);
      //  获取demo08中的age值
      console.log(this.$refs.title.age);
      //  获取demo08中的方法
      console.log(this.$refs.title.fun);
    },
  },
};
</script

使用ref获取当前的标签

demo8

<template>
  <div class="demo01">
    <h1>我是demo08的模板</h1>
    <button @click="fun()">点击获取this.$refs.title的值</button>
    <p ref="title">我是写了ref的东西</p>

  </div>
</template>

<script>

export default {
  name: "demo08",
  methods: {
    fun() {
      //  获取p标签元素
      console.log(this.$refs.title);
    },
  },
};
</script>

watch监听

watch和computed 区别:
1.watch中的函数不需要手动调用,computed内部的函数需要调用,调用的时候不需要()
2.watch(属性监听),监听属性的变化,而computed(计算属性),计算是统计计算得到的数据

<template>
  <div class="demo01">
   obj对象专用输入框
    <input type="text" v-model="obj.age" />
    <br>
    <br>
    <br>
普通变量专用输入框
    <input type="text" v-model.number="num" />

    <!-- <button>点我</button> -->
    <h1>{{ num }}</h1>
    这里丫demo06 {{name}}
  </div>
</template>


<script>
export default {
  name: "demo06",
  data() {
    return {
      num: 0,
      obj: {
        age: 0,
      },
    };
  },

  methods: {},

  watch: {
    //   当值发生改变的时候执行
    num(nval, oval) {
      console.log(nval, oval);//和下面的这个两种方式一起执行只会执行下面的内容
    },





    // 组件注册后就执行
    num: {
      handler(nval, oval) {
        console.log(nval, oval);
      },
      immediate: true,
    },




// 对象里的值监听要加引号
    "obj.age":{
        handler(nval, oval) {
        console.log(nval, oval);
      },
    },



// 使用deep:true获取整个对象的值
    obj:{
        handler(nval, oval) {
        console.log(nval, oval);
      },
      deep:true
    }
  },
};
</script>

表单修饰符 lazy number trim

lazy

使用了zazy方法后updated中的方法当输入框失去焦点或点击回车时才执行

<template>
    <div>
        <input type="text" v-model.lazy="str3">
    </div>
</template>

<script>
export default {
    data () {
        return { 
            str:'',
            str2:'',
            str3:''
        }
    },
    updated(){
        // console.log(this.str);
        console.log(this.str3);
    },
}
</script>
 
<style lang = "less" scoped>
    
</style>

number

<template>
    <div>
        <input type="number" v-model.number="str3">
    </div>
</template>

<script>
export default {
    data () {
        return { 
            str:'',
            str2:'',
            str3:''
        }
    },
    updated(){
        // console.log(this.str);
        console.log(this.str3);
    },

}
</script>
 
<style lang = "less" scoped>
    
</style>

未使用number时即使tepe类型为number输入后也是数字

使用了number之后,输入框只能是数字,而且输出后也是数字类型

trim

<template>
    <div>
        <input type="text" v-model.trim="str3">
    </div>
</template>

<script>
export default {
    data () {
        return { 
            str:'',
            str2:'',
            str3:''
        }
    },
    updated(){
        // console.log(this.str);
        console.log(this.str3);
    },

}
</script>
 
<style lang = "less" scoped>
    
</style>

空格已经去除啦

事件修饰符

.stop 阻止事件冒泡 @click.stop="方法"
.prevent 阻止默认事件
.once 阻止事件重复触发

关于组件中style的注意事项

<template></template>
<script></script>
<style lang = "less">
    这里边的样式会对当前组件及当前组件的所有子组件生效
</style>
<style lang = "less" scoped>
    此时的样式只对当前组件生效
</style>

mixin

全局mixin

1.在main.js文件中注册全局mixin'

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false


Vue.mixin({
  data(){
    return{
      name:'admin'
    }
  },
  methods:{
    funss(){
      console.log('我是全局的方法哈哈哈哈');
    }
  }
})
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

2.使用

在当前页面中显示的组件中使用全局mixin中的funss方法

<template>
    <div>
        <input type="text" v-model.trim="str3">
        
        <!-- 调用全局mixin中的方法 -->
        {{funss()}}
    </div>
</template>

<script>
import test from "../mixins/test.js"
export default {
    mixins:[test],
    data () {
        return { 
            str:'',
            str2:'',
            str3:''
        }
    },
    updated(){
        // console.log(this.str);
        console.log(this.str3);
    },

}
</script>
 
<style lang = "less" scoped>
    
</style>

局部mixin

1.在src---新建一个mixin文件夹---新建js文件填写mixin的方法和数据

2.在页面显示的的组件中引入局部的mixin文件,注册,并使用

<template>
    <div>
        <input type="text" v-model.trim="str3">

        <!-- 调用全局mixin中的方法 -->
        {{funss()}}
    </div>
</template>

<script>
// =========引入键好的局部mixin文件
import test from "../mixins/test.js"
export default {
    // =========注册引入的mixin
    mixins:[test],
    data () {
        return { 
            str:'',
            str2:'',
            str3:''
        }
    },
    updated(){
        // console.log(this.str);
        console.log(this.str3);
    },

}
</script>
 
<style lang = "less" scoped>
    
</style>

案例:通过子组件中的事件,将方法传递到父组件,

在子组件中

<template>
  <div class="demo01">
    <h1>我是demo01的模板</h1>
    <button @click="fun()">点击加数!!</button>
   <!-- 这里丫丫 {{name}} -->
  </div>
</template>



<script>
export default {
  name: "demo01",
  methods: {
    fun() {
        // 将方法发送给父组件
      this.$emit("fnn");                         
    },
  },
};
</script>

在父组件中

<template>
  <div class="home">
    <h1>这里{{msg}}</h1>   
//父组件通过子组件 传递的方法执行父组件中的方法来修改父组件中的数据
    <demo01  @fnn="haha"></demo01>
    <demo07></demo07>
  </div>
</template>

<script>

import HelloWorld from "@/components/HelloWorld.vue";
import demo01 from "@/components/demo01.vue";
import demo07 from "@/components/trim.vue";



export default {
  name: "Home",
  components: {
    HelloWorld,
    demo01,
    demo07,
  },
  // 注册mixins
  // mixins:[test],
  data(){
    return{
      msg:1
    }
    
  },
  methods:{
    haha(){
      this.msg++
    }
  }
 
  
};
</script>