vue
宇智波幽助
这个作者很懒,什么都没留下…
展开
-
VUE中的render:h=>h(App)理解(转)
1、常规写法: render: function (createElement) { return createElement(App); }2、进一步缩写为(ES6 语法): render (createElement) { return createElement(App); } 3、再进一步缩写为: ...转载 2018-07-05 09:20:22 · 1368 阅读 · 0 评论 -
vue2.0+基础知识连载(11)--- 生命周期
<!DOCTYPE html><html><head> <title>vue2.0+基础知识连载(11)--- 生命周期</title></head><body> <h3>vue2.0+基础知识连载(11)--- 生命周期</h3> <div id='app'> <p>{{msg}}</p> <p><input type="button" va原创 2018-01-20 19:10:37 · 171 阅读 · 0 评论 -
vue2.0+基础知识连载(10)--- 键盘事件
<!DOCTYPE html><html><head><title>vue2.0+基础知识连载(9)--- 实例简单方法</title></head><body><h3>vue2.0+基础知识连载(9)--- 实例简单方法</h3><div id = 'app'> {{a}}</div><script src="https://cdn.bootcss.com/vue/2.5.8/vue.原创 2018-01-19 14:03:09 · 143 阅读 · 0 评论 -
vue2.0+基础知识连载(09)--- 默认事件
<!DOCTYPE html><html><head><title>vue2.0+基础知识连载(8)---指令</title></head><body><h3>vue2.0+基础知识连载(8)---指令</h3><div id = 'app'> <h3>v-html指令</h3> <p><span>{{msg}}</span></p> <p><span v-html="m原创 2018-01-19 12:18:47 · 199 阅读 · 0 评论 -
vue2.0+基础知识连载(08)--- 事件冒泡
<!DOCTYPE html><html><head><title>vue2.0+基础知识连载(7)---默认事件</title></head><body><h3>vue2.0+基础知识连载(7)---默认事件</h3><div id = 'app'> <!-- contextmenu();点击右键触发事件 --> <!--<input type="butto原创 2018-01-19 12:12:40 · 156 阅读 · 0 评论 -
vue2.0+基础知识连载(07)--- 事件对象
<!DOCTYPE html><html><head><title>vue2.0+基础知识连载(6)---键盘事件</title></head><body><h3>vue2.0+基础知识连载(6)---键盘事件</h3><div id = 'app'> <p><input type="text" @keydown="downShow1()" value="按下事件1"></p> <p原创 2018-01-19 12:04:47 · 150 阅读 · 0 评论 -
vue2.0+基础知识连载(06)--- 常见事件介绍
<!DOCTYPE html><html><head><title>vue2.0+基础知识连载(5)---事件对象</title></head><body><h3>vue2.0+基础知识连载(5)---事件对象</h3><div id = 'app'> <input type="button" value="按钮" @click="show(12,$event)"> <input原创 2018-01-19 11:47:57 · 138 阅读 · 0 评论 -
vue2.0+基础知识连载(05)--- 绑定class样式
vue2.0+基础知识连载(05)--- 绑定class样式 .f-size { font-size: 30px; } .fSize{ font-size: 30px; } .c-red { color: red;原创 2018-01-19 11:44:02 · 137 阅读 · 0 评论 -
vue2.0+基础知识连载(04)--- 绑定style样式
<!DOCTYPE html><html><head> <title>vue2.0+基础知识连载(4)--- 属性</title> <style> .img{ margin-top: 100px; } </style></head><body> <h3>vue2.0+基础知识连载(4)--- 属性</h3>原创 2018-01-19 11:15:52 · 148 阅读 · 0 评论 -
vue2.0+基础知识连载(12)--- 监听数据变化
<!DOCTYPE html><html><head> <title>vue2.0+基础知识连载(12)--- 监听数据变化</title></head><body> <h3>vue2.0+基础知识连载(12)--- 监听数据变化</h3> <div id='app'> <h5>浅度监听</h5> <p><input type='button'原创 2018-01-20 19:11:36 · 271 阅读 · 0 评论 -
vue2.0+基础知识连载(13)--- 计算属性的使用
<!DOCTYPE html><html><head> <title>vue2.0+基础知识连载(13)--- 计算属性的使用</title></head><body> <h3>vue2.0+基础知识连载(13)--- 计算属性的使用</h3> <div id='app'> <p><span>没用计算属性computed:</span><button @cli原创 2018-01-20 19:12:46 · 138 阅读 · 0 评论 -
vue2.0+基础知识连载(14)--- 局部组件与全局组件
<!DOCTYPE html><html><head> <title>vue2.0+基础知识连载(14)--- 局部组件与全局组件</title></head><body> <h3>vue2.0+基础知识连载(14)--- 局部组件与全局组件</h3> <div id='app'> <h5>局部组件</h5> <fatherlocal></fa原创 2018-01-20 19:13:37 · 217 阅读 · 0 评论 -
element-ui 动态的生成select的v-model
**<div v-for="(attrItm, attrItmGrpIndex) in DataItem.attrItmGrp" :key="attrItmGrpIndex">** {{attrItm.entrAttrNm}} <div v-if="attrItm.pdAttrValTpcd === '01'"> <el-input p...原创 2018-07-16 17:37:26 · 7422 阅读 · 0 评论 -
VUE实战项目(转)
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(一)基础知识概述: http://blog.csdn.net/FungLeo/article/details/77575077Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(二)安装 nodejs 环境以及 vue-cli 构建初始项目 http://blog.csdn转载 2018-04-10 16:05:19 · 1816 阅读 · 0 评论 -
vue2.0+基础知识连载(20)--- 自定义键盘信息
<!DOCTYPE html><html><head> <title>vue2.0+基础知识连载(20)--- 自定义键盘信息</title></head><body> <h3>vue2.0+基础知识连载(20)--- 自定义键盘信息</h3> <div id='app'> <p><span>请按c键:</span><input type="text" @ke原创 2018-01-20 19:19:10 · 211 阅读 · 0 评论 -
vue2.0+基础知识连载(19)--- 自定义指令
<!DOCTYPE html><html><head> <title>vue2.0+基础知识连载(19)--- 自定义指令</title></head><body> <h3>vue2.0+基础知识连载(19)--- 自定义指令</h3> <div id='app'> <h3>局部指令</h3> <h5>v-purple指令:</h5>原创 2018-01-20 19:18:27 · 167 阅读 · 0 评论 -
vue2.0+基础知识连载(18)--- 动画(transition)
<!DOCTYPE html><html><head> <title>vue2.0+基础知识连载(18)--- 动画(transition)</title> <link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet"> <style> .dem原创 2018-01-20 19:17:41 · 157 阅读 · 0 评论 -
vue2.0+基础知识连载(17)--- 路由
<!DOCTYPE html><html><head> <title>vue2.0+基础知识连载(17)--- 路由</title> <link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet"> <style> .router-link-act原创 2018-01-20 19:16:39 · 124 阅读 · 0 评论 -
vue2.0+基础知识连载(16)--- 非父子组件通信
<!DOCTYPE html><html><head> <title>vue2.0+基础知识连载(16)--- 非父子组件通信</title></head><body> <h3>vue2.0+基础知识连载(16)--- 非父子组件通信</h3> <div id='app'> <component-a></component-a> <hr>原创 2018-01-20 19:15:48 · 132 阅读 · 0 评论 -
vue2.0+基础知识连载(15)--- 父子组件通信
<!DOCTYPE html><html><head> <title>vue2.0+基础知识连载(15)--- 父子组件通信</title></head><body> <h3>vue2.0+基础知识连载(15)--- 父子组件通信</h3> <div id='app'> <father></father> </div> <!-- 模板 -->原创 2018-01-20 19:14:48 · 189 阅读 · 0 评论 -
vue2.0+基础知识连载(03)--- 常用属性介绍
<!DOCTYPE html><html><head> <title>vue2.0+基础知识连载(3)---事件</title></head><body> <h3>vue2.0+基础知识连载(3)---事件</h3> <div id = 'app'> <input type="button" value="显隐" @click="isShow()">原创 2018-01-19 11:03:40 · 128 阅读 · 0 评论 -
vue2.0+基础知识连载(02)--- 常用指令介绍
<!DOCTYPE html><html><head> <title>vue2.0+基础知识连载(2)---style</title></head><body> <h3>vue2.0+基础知识连载(2)---style</h3> <div id = 'app'> <!-- 方式一 :常规 --> <!--<p :style="{color:'原创 2018-01-19 10:43:09 · 118 阅读 · 0 评论 -
computed属性和watch属性的区别之一【watch的基本用法】
<body> <div id = 'app'> <h3>Demo_1---computed1</h3> <div> <p><button @click = 'm_test'>点击</button></p> <p>a={{ a }}</p> <p>b={原创 2017-11-27 15:40:47 · 494 阅读 · 0 评论 -
测试在vue下点击事件传参和不传参的区别
<div id = 'app'> <p><button @click = 'test_click1'>{{btn_text1}}</button></p> <br> <p><button @click = 'test_click2("123")'>{{btn_text2}}</button></p> </div> <script src=原创 2017-11-25 11:58:07 · 12202 阅读 · 0 评论 -
Vue2.0使用props传递数据【methods篇】
<body> <div id = 'app'> <div> <h3>正常的数据</h3> <p> HTML特性不区分大小写。名字形式为camelCase的prop用作特性时,需要转为kebab-case(短横线隔开) </p> </div> <hr原创 2017-11-28 17:22:01 · 3885 阅读 · 0 评论 -
Vue2.0使用props传递数据【data篇】
<body> <div id = 'app'> <div> <h3>正常的数据</h3> <p> 组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用props把数据传给子组件 </p> </div> <h原创 2017-11-28 17:12:35 · 9108 阅读 · 0 评论 -
Vue2.0使用props传递数据---5
<body> <div id = 'app'> <div> <h3>正常的数据</h3> <p> prop默认是单向绑定:当父组件的属性变化时,将传导给子组件,但是反过来不会。 这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。原创 2017-11-28 18:26:35 · 357 阅读 · 0 评论 -
Vue2.0使用props传递数据---4
<body> <div id = 'app'> <div> <h3>正常的数据</h3> <p> 如果在为vue组件prop定义或者赋值的时候用了“v-bind:”的动态语法,则会先将其转化为js表达式,然后计算结果赋值。 下面示例中,第一个传递的是字符串,第二个传递的原创 2017-11-28 18:08:03 · 242 阅读 · 0 评论 -
Vue2.0使用props传递数据---3
<body> <div id = 'app'> <div> <h3>正常的数据</h3> <p> 动态Props </p> </div> <hr> <div> <h3>组件的数据</h3>原创 2017-11-28 17:54:01 · 199 阅读 · 0 评论 -
Vue2.0使用props传递数据---6
<body> <div id = 'app'> <div> <h3>正常的数据</h3> <p> Prop验证 </p> <div> <p>name:{{dr.name}}</p> <p>转载 2017-11-28 18:44:47 · 372 阅读 · 0 评论 -
computed属性和watch属性的区别之二【computed的基本用法】
<body> <div id = 'app'> <div> <ul> <li v-for = 'el in list'> 名称:{{el.name}} - 价格:{{el.price}} <input v-model = 'el.price' /> - 购买数量:{{el.number原创 2017-11-27 21:22:00 · 206 阅读 · 0 评论 -
computed属性和watch属性的区别之三【购物车之watch】
<body> <div id = 'app'> <div> <ul> <li v-for = 'el in list'> 名称:{{el.name}} - 价格:{{el.price}} <input v-model = 'el.price' /> - 购买数量:{{el.number原创 2017-11-27 21:25:11 · 335 阅读 · 0 评论 -
computed属性和watch属性的区别之四【购物车之computed】
<body> <div id = 'app'> <ul v-for = '(value, key) in map'> {{key}} - {{value}} </ul> </div> <script type="text/javascript" src = 'https://cdn.bootcss.com/vue/2.5.原创 2017-11-27 21:30:50 · 269 阅读 · 0 评论 -
vue2.0+基础知识连载(01)--- Vue实例简介
vue2.0+基础知识连载(01)--- Vue实例简介 vue2.0+基础知识连载(01)--- Vue实例简介 {{a}} var vm = new Vue({ // el: '#app', // "选择器",挂载到页面的那个元素里,即确定vue的作用范围。外部可通过vm.$e原创 2018-01-19 10:33:41 · 218 阅读 · 0 评论 -
vuex2.0基本使用---3、终极版
1、初始化项目:vue init webpack vuex_demo 2、安装vuex:npm install vuex -D 3、在src文件夹里新建一个vuex文件夹 4、在vuex文件夹里依次新建一个index.js、actions.js、mutations.js、mutations-types.js、 getters.js。 5、在index.js里写上以下代码:impo原创 2018-02-03 15:50:37 · 221 阅读 · 0 评论 -
vuex2.0基本使用---2、进阶版
1、初始化项目:vue init webpack vuex_demo 2、安装vuex:npm install vuex -D 3、在src文件夹里新建一个vuex文件夹 4、在vuex文件夹里新建一个store.js的文件 5、在store.js里写上以下代码:import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)//原创 2018-01-26 18:30:17 · 235 阅读 · 0 评论 -
vuex2.0基本使用---1、初始版
1、初始化项目:vue init webpack vuex_demo 2、安装vuex:npm install vuex -D 3、在src文件夹里新建一个vuex文件夹 4、在vuex文件夹里新建一个store.js的文件 5、在store.js里写上以下代码:import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)var st原创 2018-01-26 14:12:25 · 191 阅读 · 0 评论 -
(转)Eslint 规则说明
“no-alert”: 0,//禁止使用alert confirm prompt “no-array-constructor”: 2,//禁止使用数组构造器 “no-bitwise”: 0,//禁止使用按位运算符 “no-caller”: 1,//禁止使用arguments.caller或arguments.callee “no-catch-shadow”: 2,//禁止catch子句参数与原创 2018-01-22 20:41:49 · 295 阅读 · 0 评论 -
(转)Vue 脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案)
Vue 脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案)前言 文章内容覆盖范围,芝麻绿豆的破问题都有,不止于vue; 给出的是方案,但不是手把手一字一句的给你说十万个为什么!问题汇总 Q:安装超时(install timeout)方案有这么些:cnpm : 国内对npm的镜像版本 /* cnpm website: https://npm.taobao.org/ *原创 2018-01-22 11:03:52 · 201 阅读 · 0 评论 -
vue2.0+基础知识连载(21)--- 自定义过滤器
<!DOCTYPE html><html><head> <title>vue2.0+基础知识连载(21)--- 自定义过滤器</title></head><body> <h3>vue2.0+基础知识连载(21)--- 自定义过滤器</h3> <div id='app'> <p>{{a | toDou(1, 2)}}</p> <p>{{dataT原创 2018-01-21 19:32:09 · 181 阅读 · 0 评论