Vue
关注
分享
扫一扫
Lvdon9
这个作者很懒，什么都没留下…
展开
-
Vue 路由传参
import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'import Hi from '@/components/Hi' import Hi1 from '@/components/Hi1' import Hi2 from '@/compone...原创 2019-03-23 19:39:42 · 118 阅读 · 0 评论 -
Vue on方法. 多次执行,执行一次, 关闭方法
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/vue.js"></script> <title></title> </head> &l...原创 2019-03-22 23:32:49 · 5815 阅读 · 0 评论 -
Vue挂载.创建销毁更新生命周期
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/vue.js"></script> <title>Examples Method Demo</title>...原创 2019-03-22 23:10:09 · 874 阅读 · 0 评论 -
Vue 里面使用jquery
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/vue.js"></script> <title></title> </head> &l...原创 2019-03-22 22:55:38 · 260 阅读 · 0 评论 -
Vue extends扩展选项(类似混入)
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/vue.js"></script> <title></title> </head> &l...原创 2019-03-21 22:01:33 · 1329 阅读 · 0 评论 -
Vue Mixins 混入选项操作 -- 不改变构造器.增加需求
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/vue.js"></script> <title></title> </head> &l...原创 2019-03-21 21:51:22 · 176 阅读 · 0 评论 -
Vue watch监听数据
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/vue.js"></script> <title>Watch 选项 监控数据</title> <...原创 2019-03-21 21:43:14 · 333 阅读 · 0 评论 -
Methods Option 方法选项以及模板绑定方法
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/vue.js"></script> <title></title> </head> &l...原创 2019-03-21 21:17:33 · 223 阅读 · 0 评论 -
computed Option 计算选项 不污染源数据.以及倒叙
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/vue.js"></script> <title></title> </head> &...原创 2019-03-21 21:08:06 · 131 阅读 · 0 评论 -
propsData Option 全局扩展的数据传递 --不常用
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/vue.js"></script> <title></title> </head> &l...原创 2019-03-21 20:55:07 · 146 阅读 · 0 评论 -
iview复选框小demo(****)
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/iview.css" /> <script type="text/javascript...原创 2019-03-21 17:37:42 · 775 阅读 · 0 评论 -
iview更换主题
通过安装工具修改 #如果没有使用 webpack，可以用我们提供的工具 iview-theme 来编译。首先需要安装主题生成工具，从 npm 全局或在项目中局部安装，以全局安装为例：npm install iview-theme -g然后在业务工程里新建一个目录，用来存放主题文件，使用下面的命令初始化主题，这时会从 iView 仓库拉取最新的样式文件：iview-theme ini...原创 2019-03-21 15:50:05 · 3440 阅读 · 0 评论 -
Vue slot传参接收属性
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/vue.js"></script> <title></title> </head> &l...原创 2019-03-22 23:52:49 · 3550 阅读 · 0 评论 -
Vue 子路由
import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'import Hi from '@/components/Hi' import Hi1 from '@/components/Hi1' import Hi2 from '@/compone...原创 2019-03-23 19:04:16 · 245 阅读 · 0 评论 -
import
//import 类似api.js// 例如 外部JS声明:// function getJSON(url, callback) {// let xhr = new XMLHttpRequest();// xhr.onload = function () {...原创 2019-04-25 16:05:19 · 163 阅读 · 0 评论 -
Vuex小demo
main.js// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'impo...原创 2019-04-06 19:20:46 · 152 阅读 · 0 评论 -
Vue 编程式导航 前进后退首页
//编程式导航. 前进后退返回首页<template> <div id="app"> <img src="./assets/logo.png"> <div> <button @click="goBack">后退</button> <button @click="goGo"&...原创 2019-03-24 00:32:36 · 483 阅读 · 0 评论 -
Vue 路由生命周期
import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'import params from '@/components/params'import Hi1 from '@/components/Hi1'import Error from '@...原创 2019-03-24 00:30:26 · 1825 阅读 · 0 评论 -
Vue 404页面与链接不加#号
import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'import params from '@/components/params'import Hi1 from '@/components/Hi1'import Error from '@...原创 2019-03-23 21:39:02 · 678 阅读 · 0 评论 -
Vue 过度动画
<template> <div id="app"> <img src="./assets/logo.png"> <br> <router-link to="/">Home</router-link>| <router-link to="/params/198/jspang websi...原创 2019-03-23 21:25:22 · 217 阅读 · 0 评论 -
Vue alias重定向(跳页加路径)
import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'import params from '@/components/params'import Hi1 from '@/components/Hi1'Vue.use(Router)e...原创 2019-03-23 21:10:29 · 423 阅读 · 0 评论 -
Vue路由重定向
import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'import params from '@/components/params'Vue.use(Router)export default new Router({ routes:...原创 2019-03-23 20:45:57 · 497 阅读 · 0 评论 -
Vue 路由传参 连接传参
import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'import params from '@/components/params'Vue.use(Router)export default new Router({ routes:...原创 2019-03-23 20:14:31 · 229 阅读 · 0 评论 -
Vue单页面多应用
<template> <div id="app"> <img src="./assets/logo.png"> <router-view/> <router-view name="left" style="float:left;width:50%;background-color:#ccc;height:300p...原创 2019-03-23 19:52:56 · 222 阅读 · 0 评论 -
Vue Component 标签
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/vue.js"></script> <title></title> </head> &l...原创 2019-03-20 22:39:08 · 477 阅读 · 0 评论 -
Vue父子组件
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/vue.js"></script> <title></title> </head> &l...原创 2019-03-20 22:26:50 · 144 阅读 · 0 评论 -
Vue定义属性获取属性值
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/vue.js"></script> <title></title> </head> &l...原创 2019-03-20 21:18:23 · 1081 阅读 · 0 评论 -
Vue动态组件传递 子往父传递方法
<template> <div id="app"> <input type="text" v-model="myVal"/> <Coma :number='myVal' @my-event='getMyEvent'> <!-- 向子级插入一个标签 --> &原创 2019-01-24 23:07:17 · 956 阅读 · 0 评论 -
Vue组件之间通讯,父级向子传参
<template> <div id="app"> <input type="text" v-model="myVal"/> <Coma :number='myVal'></Coma> </div></template>&a原创 2019-01-24 22:56:57 · 382 阅读 · 0 评论 -
Vue计算属性, 数据监听
<template> <div id="app"> <input type='text' v-model='myVal'> <!-- {{getmyValueWithoutNum()}} --> </div></template><script>//如果要使用v原创 2019-01-24 22:32:08 · 166 阅读 · 0 评论 -
Vue列表数据的同步更新方法
<template> <div id="app"> <ul> <!-- 也可以代替{{}} v-text="item.name +'-'+item.price" :class="{odd:index%2}" 当index余2的时候隔行变色原创 2019-01-13 21:04:04 · 2402 阅读 · 1 评论 -
Vue 注册子组件
<template> <div id="app"> <!--可以把参数传递给componenta组件--> <componentA v-for="(key,value) in objList" :key="value"> {{key}}--{{value}}</componentA>原创 2019-01-13 20:46:20 · 724 阅读 · 0 评论 -
Vue 遍历 for
<template> <div id="app"> <ul> <!-- 也可以代替{{}} v-text="item.name +'-'+item.price" :class="{odd:index%2}" 当index余2的时候隔行变色原创 2019-01-13 20:30:42 · 1942 阅读 · 0 评论 -
Vue v-text v-html
<template> <div id="app"> //字符串 <p v-text="HELLO"></P> //读取标签 <p v-html="HELLO"></P> {{num + 1}} {{status ? 'succes原创 2019-01-13 19:40:56 · 816 阅读 · 0 评论 -
Vue表单事件绑定
<template> <div id="app"> <ul> <li v-for="(item,index) in list" :key="index" > {{item}} </li> </ul> &原创 2019-01-23 22:56:28 · 533 阅读 · 0 评论 -
Vue组件自定义方法,传参
<template> <div id="app"> <ul> <li v-for="(item,index) in list" :key="index" > {{item}} </li> </ul> &原创 2019-01-23 22:24:06 · 2124 阅读 · 0 评论 -
Vue根组件 组件之间的关系
// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router...原创 2019-01-12 20:43:00 · 2201 阅读 · 0 评论 -
如何脚手架安装Vue与Iview
1.必须要有的环境node.js环境（npm包管理器） vue-cli 脚手架构建工具 cnpm npm的淘宝镜像2. 安装node.js 从node.js官网下载并安装node，安装过程很简单，一直点下一步就ok了，安装完之后，我们通过打开命令行工具（win+R）,输入 node -v 命令，查看node的版本，若出现相应的版本号，则说明你安...原创 2018-08-16 14:41:15 · 9744 阅读 · 1 评论 -
Vue下拉框联动.
<template> <div id="app"> <!-- 下拉框联动 --> <Select v-model="model1" @on-change="changeLevel1"> <Option v-for="item in cityList&quo原创 2019-01-25 22:39:49 · 2472 阅读 · 0 评论 -
Vue过渡动画
<template> <div id="app"> <!-- <button v-on:click="show = !show">toggle</button> --> <button v-on:click="toggleCom ">toggle<原创 2019-01-27 22:06:27 · 136 阅读 · 0 评论