Vuejs
文章平均质量分 70
米白蓝
这个作者很懒,什么都没留下…
展开
-
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 · 78 阅读 · 0 评论 -
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 · 449 阅读 · 0 评论 -
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 · 77 阅读 · 0 评论 -
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 · 111 阅读 · 0 评论 -
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 · 291 阅读 · 0 评论 -
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 · 204 阅读 · 0 评论 -
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 · 63 阅读 · 0 评论 -
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 · 101 阅读 · 0 评论 -
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 · 103 阅读 · 0 评论 -
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 · 112 阅读 · 0 评论 -
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 · 1109 阅读 · 0 评论 -
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 · 908 阅读 · 0 评论 -
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 · 78 阅读 · 0 评论 -
Vuejs组件的创建使用十一
<body> <div id="root"> <my-school></my-school> <msg></msg> <hr> <student></student> </div> <div id="root2"> <hr> <msg></msg> </div>原创 2022-04-19 11:32:18 · 637 阅读 · 0 评论 -
Vuejs生命周期十
<body> <div id="root"> <h2>让n加一:{{n}}</h2> <button @click="add">加一</button> <button @click="goodbye">销毁vm</button> </div> <script> new Vue({ el: '#root', data: {原创 2022-04-18 15:24:04 · 209 阅读 · 0 评论 -
Vuejs内置指令和自定义指令九
<style> [v-cloak] { display: none; } </style></head><body> <div id="root"> <div>你好,{{name}}</div> <div v-text="str"></div> <div v-html="str"></div> <di原创 2022-04-16 17:11:21 · 591 阅读 · 0 评论 -
Vuejs收集表单数据和过滤器八
<body> <div id="root"> <form @submit.prevent="demo"> 账号:<input type="text" v-model.trim="userInfo.account"><br><br> 密码:<input type="password" v-model="userInfo.password"><br><br>原创 2022-04-15 14:57:29 · 530 阅读 · 0 评论 -
Vuejs监测数据的原理七
<body> <div id="root"> <button @click="persOwn">更改第一个</button> <ul> <li v-for="(p, index) in persons" :key="p.id"> {{p.name}}-{{p.age}}-{{p.sex}} </li> </ul> <hr&g原创 2022-04-15 13:18:42 · 496 阅读 · 0 评论 -
列表渲染和列表过滤六
<body> <div id="root"> <ul> <li v-for="(p, index) in persons" :key="p.id"> {{p.name}}-{{p.age}} </li> </ul> <ul> <li v-for="(value, key) in auto" :key="key"> {{原创 2022-04-14 16:05:36 · 228 阅读 · 0 评论 -
Vuejs样式绑定和列表渲染五
<body> <div id="root"> <div class="basic" :class="mood" @click="changeMood">{{msg}} </div> <br> <div class="basic" :class="classArr">{{msg}}</div> <br> <div class="basic" :class="原创 2022-04-14 13:46:05 · 97 阅读 · 0 评论 -
Vuejs计算属性和监视属性四
<body> <div class="box"> 性:<input type="text" v-model="firstName"><br> 名:<input type="text" v-model="lastName"><br> 全名:<span>{{fullName}}</span> </div> <script> let vm = new原创 2022-04-14 11:00:30 · 87 阅读 · 0 评论 -
Vuejs事件三
<body> <div class="box"> <h1>欢饮来到{{adress}}</h1> <div class="box2" @click="showInfo"> <div class="box1" @click="showInfo"> <button v-on:click.stop="showInfo">点击我</button> </di原创 2022-04-13 10:43:28 · 435 阅读 · 0 评论 -
Vuejs数据绑定和数据代理二
<body> <div class="box"> <span>单项数据绑定</span> <input type="text" :value="value1"> <br> <span>双项数据绑定</span> <!-- <input type="text" v-model:value="value2"> --> <input ty原创 2022-04-09 14:53:29 · 484 阅读 · 0 评论 -
Vuejs初识一
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue引入</t原创 2022-04-09 11:45:30 · 407 阅读 · 0 评论