- 博客(101)
- 收藏
- 关注
RSS订阅
1原创 vue3生命周期和hook函数四
setup() { let sum = ref(0) console.log('---setup---'); onBeforeMount(() => { console.log('---onBeforeMount---'); }) onMounted(() => { console.log('---onMounted---'); }) onBeforeUpdate(() => { console.l
2022-05-28 11:35:33
347
原创 vue3中watch函数三
<!--Demo.vue组件--><template> <div> <h1>我是Demo组件</h1> <span>求和为：{{sum}}</span> <button @click="sum++">sum++</button> </div></template><script>import {ref,watch,watch
2022-05-11 12:38:24
200
原创 vue3的ref函数和reactive函数二
<!-- App.vue-ref --><template> <div> <h1>我是APP组件</h1> <h2>姓名：{{ name }}</h2> <h2>年龄： {{ age }}</h2> <h2>工作： {{job.type}}</h2> <h2>薪水： {{job.salary}}</h2>
2022-05-08 15:02:24
546
原创 初识vue3一
//main.js入口文件import { createApp } from 'vue'import App from './App.vue'const app = createApp(App)console.log(app);app.mount('#app')// setTimeout(() => {// app.unmount('#app')// }, 1000); <!-- App.vue --><template> <div&g
2022-05-08 12:39:53
1467
原创 Vuejs路由守卫二十四
//route>index.js{ name: 'xinwen', path: 'news', component:News, meta: {isAuth:true,title: '新闻'}, },// 前置路由守卫router.beforeEach((to,from,next) => { console.log('前置路由守卫',to,from,); if(to.meta.isAuth) { if(localStorage.ge
2022-05-07 11:32:32
82
原创 Vuejs路由配置项和$router二十三
//index.js{ name: 'xiangqing', path:'detail/:id/:title', component: Detail, // props: {a:1,b:'hello'} // props: true props($route) { return { id:$route.params.id, title:$route.params.title }}<-- !detail.vue-->&l
2022-05-06 13:28:35
454
原创 Vuejs路由参数二十二
<--! message.vue query参数--><li v-for=" m in message" :key="m.id"> <!-- query参数 --> <!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>  
2022-05-06 11:19:26
89
原创 Vuejs路由1二十一
<--!app.vue--><template> <div> <div class="row"> <banner/> </div> <div class="row"> <div class="col-xs-2 col-xs-offset-2"> <div class="list-group"> <!-- &
2022-05-05 10:54:18
123
原创 Vuejs中vuex的四个map方法二十
<--!Count.vue--><template> <div> <h2>当前的和为{{sum}}</h2> <h2>当前的和为{{bigSum}}</h2> <h2>我在{{school}}，遨游{{learn}}</h2> <select v-model.number="n"> <option value="1">1<
2022-04-30 11:17:15
308
原创 Vuejs中Vuex插件的基本使用十九
//store中的index.js// 引入vueximport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)// 创建actions-用于响应组件中的动作const actions = { // jia(context, value) { // console.log('actions被调用了'); // context.commit('JIA', value) // }, // jian(context, v
2022-04-29 12:37:53
210
原创 Vuejs插槽十八
<--! 使用插槽的组件（父组件）--><template> <div class="container"> <div class="one"> <category title="美食"> <img src="./assets/logo.png" slot="center" /> <a href="#" slot="footer">美食</a>
2022-04-28 13:57:08
68
原创 Vuejs动画十七
//Test.vue<template> <div> <button @click="isShow = !isShow">显示/隐藏</button> <transition name="change" appear> <h1 v-show="isShow">你好呀</h1> </transition> </div></template>
2022-04-27 13:45:20
107
原创 Vuejs组件通信十六
//main.jsbeforeCreate() { Vue.prototype.$bus = this },//接收数据 School组件mounted() { this.$bus.$on('hello', data=> { console.log('我是school组件，收到了数据', data); }) }, beforeDestory() { this.$bus.$off('hello') }//传递数据组件 Student
2022-04-27 11:42:57
107
原创 Vuejs自定义事件十五
//App.vue组件<template> <div class="app"> <h2>{{ msg }}</h2> <h2>子组件传递过来的数据，{{studentName}}</h2> <School :getSchoolName="getSchoolName" /> <!-- 使用$emit触发事件 --> <Student v-on:getStudent
2022-04-25 13:13:21
115
原创 Vuejs中props、mixin、插件十四
//父组件App.vue<Student name="张三" :age="18" sex="男" ref="stu"/>//子组件Student.vueprops: ['name','age', 'sex'],// props: { // name: { // type: String, // required: true // }, // age: { // type: Number, // default: 9
2022-04-21 15:25:24
1116
原创 Vuejs脚手架十三
import Vue from 'vue'import App from './App.vue'//设置vue生产环境Vue.config.productionTip = falsenew Vue({ el: '#app', components: { App }, render: h => h(App)})CLI： command line interface；main.js中的render：在脚手架中，引入的vue是一个残缺版的vue，所以没有模板解
2022-04-21 11:11:36
911
原创 Vuejs单文件组件十二
// app Vue组件<template> <div> <School></School> </div></template><script>import School from './School.vue'export default {name: 'App',components: { School}}</script>//入口文件import App fr
2022-04-19 14:27:20
84
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人