vue学习
关注
分享
扫一扫
vue学习
gunsmoke
这个作者很懒，什么都没留下…
展开
-
vue中watch的简单使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id="a原创 2020-05-25 14:29:28 · 106 阅读 · 0 评论 -
vue路由守卫的写法
router.js(全局守卫)import Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'import child from '../components/child.vue'import child1 from '../components/child1.vue'Vue.use(VueRouter) const routes = [ // { // pa原创 2020-05-23 20:53:06 · 2027 阅读 · 1 评论 -
vue动态路由的写法
main.vue<template> <div> <ul> <li @click="toChild('gunsmoke')">click me to go to child</li> </ul> <router-view></router-view> </div></template><s原创 2020-05-23 13:48:57 · 600 阅读 · 0 评论 -
路由声明式导航
main.vue<template> <div> <router-link to="/child" tag="li" activeClass="act">child</router-link> <router-link to="/child1" tag="li" activeClass="act">child1</router-link> <router-view>&原创 2020-05-21 20:35:11 · 186 阅读 · 0 评论 -
多组件互相引用
main.vue<template> <div> <child> <button @click="hello()">click me</button> </child> </div></template><script> import child from './components/child' expo原创 2020-05-20 10:10:36 · 277 阅读 · 0 评论 -
vue单文件模板
<template> <div> <input type="text" v-model="text"> <button @click="addList()">add</button> <ul> <li v-for="data in dataList">{{data}}</li> </ul> <原创 2020-05-20 09:14:53 · 266 阅读 · 0 评论 -
vue中自定义过滤器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <script src="../vue.js"></script></head><body> <div id="main"> {{msg | upper}}原创 2020-05-19 12:54:00 · 134 阅读 · 0 评论 -
vue中自定义指令
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <script src="../vue.js"></script> <style> </style></head><body> <div id原创 2020-05-19 08:28:59 · 147 阅读 · 0 评论 -
vue中的slot初体验
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <script src="../vue.js"></script> <style> </style></head><body> <div id原创 2020-05-18 20:39:00 · 110 阅读 · 0 评论 -
利用消息总线实现非父子组件的通信
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <script src="../vue.js"></script></head><body><div id="main"> <send></send>原创 2020-05-18 11:23:57 · 113 阅读 · 0 评论 -
父组件利用ref控制子组件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <script src="../vue.js"></script></head><body><div id="main"> <child ref="childref">原创 2020-05-18 10:35:00 · 417 阅读 · 0 评论 -
组件传值之子传父
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <script src="../vue.js"></script></head><body><div id="main"> <!--这里要么写成parent,要么写成par原创 2020-05-18 09:49:18 · 130 阅读 · 0 评论 -
组件传值之父传子
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <script src="../vue.js"></script></head><body><div id="main"> <mycomponent msg="gunsmo原创 2020-05-17 22:02:36 · 96 阅读 · 0 评论 -
第一个vue组件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <script src="../vue.js"></script></head><body><div id="main"> <mybar></mybar>原创 2020-05-16 21:29:31 · 92 阅读 · 0 评论 -
利用计算属性改写todolist示例程序
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <script src="../vue.js"></script></head><body><div id="main"> <input type="text" v-mod原创 2020-05-16 20:42:14 · 146 阅读 · 0 评论 -
计算属性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <script src="../vue.js"></script></head><body> <div id="main"> <!--下面把逻辑写在模板中看上原创 2020-05-16 16:00:42 · 120 阅读 · 0 评论 -
用fetch模拟请求
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <script src="../vue.js"></script></head><body> <div id="main"> <button @click="原创 2020-05-13 22:07:01 · 279 阅读 · 0 评论 -
表单修饰符
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <script src="../vue.js"></script></head><body> <div id="main"> <!--懒加载,这样就不是实时的原创 2020-05-13 21:23:28 · 166 阅读 · 0 评论 -
双向数据绑定实现简单列表计算
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <script src="../vue.js"></script></head><body> <div id="main"> <ul>原创 2020-05-13 20:56:35 · 139 阅读 · 0 评论 -
表单中单选与多选按钮的双向数据绑定
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <script src="../vue.js"></script></head><body> <div id="main"> <div>原创 2020-05-12 22:12:23 · 564 阅读 · 0 评论 -
按键修饰符
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <script src="../vue.js"></script></head><body> <div id="main"> <!--这里的enter可以替换原创 2020-05-12 21:49:45 · 201 阅读 · 0 评论 -
事件修饰符
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <script src="../vue.js"></script></head><body> <div id="main"> <!--这里用<ul @c原创 2020-05-12 18:34:48 · 140 阅读 · 0 评论 -
todolist示例程序实现模糊查询功能
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <script src="../vue.js"></script></head><body> <div id="main"> <input type="tex原创 2020-05-11 21:06:59 · 212 阅读 · 0 评论 -
动态改变列表元素
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <script src="../vue.js"></script></head><body> <div id="main"> <ul>原创 2020-05-11 18:56:30 · 116 阅读 · 0 评论 -
列表渲染
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <script src="../vue.js"></script></head><body> <div id="main"> <ul>原创 2020-05-11 17:09:12 · 100 阅读 · 0 评论 -
条件渲染
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <script src="../vue.js"></script></head><body> <div id="main"> <!--2个分支-->原创 2020-05-11 16:58:13 · 172 阅读 · 0 评论 -
动态修改class
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <script src="../vue.js"></script></head><body> <div id="main"> <div :class="myC原创 2020-05-10 21:55:32 · 442 阅读 · 0 评论 -
v-show与v-if指令
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <script src="../vue.js"></script></head><body> <div id="main"> <!--isShow控制是否显示原创 2020-05-10 21:27:56 · 112 阅读 · 0 评论 -
vue中使用差值表达式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <script src="../vue.js"></script></head><body> <div id="main"> <!--30-->原创 2020-05-10 21:18:05 · 658 阅读 · 0 评论