VUE
陌上浮屠
这个作者很懒,什么都没留下…
展开
-
VUE权威指南-第三章 指令
3.1 内部指令1:v-if完全根据表达式的值在DOM中生成或者移除一个元素;如果初始条件为假,则什么都不做,只有在条件第一次为真时才开始进行局部编译(编译会被缓存起来);如果想切换多个元素,可以使用 元素当做包装元素,并在上面使用 v-if。最终的渲染结果不会包含 元素。<template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p>转载 2017-07-11 20:39:45 · 403 阅读 · 1 评论 -
VUE组件之间传值
父组件获取子组件的属性,方法,元素<div id="parent"> <user-profile ref="profile"></user-profile></div>var parent = new Vue({ el: '#parent' })// 访问子组件var child = parent.$refs.profile子组件获取父组件的数据,方法1:子组件使用props从父组件获取数原创 2017-08-25 14:52:21 · 1159 阅读 · 0 评论 -
VUE中的无限循环
<template><div id=""> <ul v-for="(item,index) in listaaa"> <li v-if='dealFun(item.cdate,index)'>{{item.cdate}}</li> </ul></div></template><script>export default { name: "", data(){原创 2017-09-22 09:34:13 · 7384 阅读 · 0 评论 -
vue2-highcharts
https://github.com/superman66/vue-highcharts/tree/0a2ac236b0a31a617576d4ddb1f852cfa923db18转载 2017-10-09 17:54:34 · 2577 阅读 · 0 评论 -
子组件调用父组件的方法
父组件: 子组件: 另外需要注意的是:<child @click='send'></child> <child @click='send()'></child>send方法不带参数的时候,这里加不加()无所谓;当带参数的时候,一定不能加参数;原创 2017-11-09 14:17:12 · 2469 阅读 · 0 评论 -
vue警告问题
代码改动 改为(就不再出现进警告了)原创 2017-10-24 11:05:53 · 3037 阅读 · 0 评论 -
关于url中的#-----hash
1,#涵义代表网页中的一个位置。其右面的字符,就是该位置的标识符。http://example.com/index.html#user;就代表网页index.html的print位置。浏览器读取这个URL后,会自动将print位置滚动至可视区域。为网页位置指定标识符,有两个方法。一是使用锚点,比如,二是使用id属性,比如。2,http请求中不含#以我们平时的经验来看,的确http请求中是从来没有#出转载 2017-10-16 14:35:53 · 4565 阅读 · 0 评论 -
vue复制功能
https://github.com/Inndy/vue-clipboard2原创 2017-11-10 16:48:27 · 1684 阅读 · 0 评论 -
VUE路由去掉“#”
如果不想要很丑的 hash(地址栏去掉“#”),我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。const router = new VueRouter({ mode: 'history', routes: [...]})转载 2017-11-20 17:08:05 · 28730 阅读 · 7 评论 -
vue-router
1:npm安装npm install vue-routerimport Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)2:简单例子将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们。 html<script src="https://unpkg.com/vu转载 2017-08-05 21:00:41 · 460 阅读 · 0 评论 -
VUE-CLI搭建及其简单介绍
安装node.js(http://nodejs.cn/download/ 可以下载到)安装淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org全局安装 vue-cli$ npm install --global vue-cli以上步骤只要安装成功以后,只要不重新安装系统;以后新建项目,无须再次执行创建一个基于 webp转载 2017-08-05 10:49:50 · 980 阅读 · 0 评论 -
图片上传
https://github.com/waynecz/vue-img-inputer/blob/master/README-CN.MD原创 2017-09-08 14:03:13 · 246 阅读 · 0 评论 -
axios
如果请求的Content-Type设置为application/x-www-form-urlencoded,那么这个Post请求被认为是HTTP POST表单请求,参数出现在form data 其他情况如使用原生AJAX的POST请求如果不指定请求头Request Header,默认使用的Content-Type是text/plain;charset=UTF-8,参数出现在Request payl转载 2017-08-21 19:51:00 · 1722 阅读 · 0 评论 -
vue中的ref,refs使用
比如我有这么一个需求:v-if=’condition ‘组件中有一个input,每次显示组件的时候,input获得焦点;我这么写this.condition = true;this.$refs.input1.focus();发现,this.$refs每次都是undefined; 问题原因:渲染组件需要时间,并且时间没有JS执行的快;所以获取不到 解决办法:第一种利用setTimeou...原创 2018-07-25 11:36:31 · 4585 阅读 · 1 评论 -
VUE组件生命周期跟ajax的关系
讲过测试,如图:原创 2017-09-05 16:36:40 · 1777 阅读 · 0 评论 -
v-for v-if
v-if中不能加{{}}处理数据原创 2017-09-15 13:28:04 · 294 阅读 · 0 评论 -
VUE权威指南-第二章 数据绑定
2.1 语法 2.1.1插值 1:文本插值:使用{{}}形式,代码如下({{text}}会随text值的变化而变化):<span>{{text}}</span>2:有时候值需要渲染一次数据,然后不再关心后续数据变化,可以通过*来实现,代码如下:<span>{{*text}}</span>3:{{}}会把里面的值全部当做字符串来处理,如果值是HTML片段,则可以使用{{{}}},代码如下:转载 2017-07-10 09:55:11 · 303 阅读 · 0 评论 -
简洁写法
customerType() { var type; switch (this.form.AuthType) { case 0: type = '0类'; break; case 1:原创 2017-08-04 14:22:59 · 266 阅读 · 0 评论 -
vue-loader学习笔记
1:vue-loader简介vue-loader是一个webpack的loader;可以将vue文件转换为JS模块;2:vue-loader特性(1)ES2015默认支持 (2)允许对VUE组件的组成部分使用其他webpack loader;比如对< style >使用SASS(编译CSS语言),对< template >使用JADE(jade是一个高性能的模板引擎,用JS实现,也有其他语言的实现转载 2017-08-05 13:56:27 · 28172 阅读 · 3 评论 -
VUE 全局变量的几种实现方式
1、全局变量专用模块就是以一个特定模块来组织管理这些全局量,需要引用的地方导入该模块便好。全局变量专用模块 Global.vueconst colorList = [ '#F9F900', '#6FB7B7',]const colorListLength = 20function getRandColor () { var tem = Math.round(Math.random(转载 2017-08-22 13:35:54 · 8154 阅读 · 0 评论 -
vue-router2
1:导航钩子vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子:全局的, 单个路由独享的, 或者组件级的。 1:全局钩子 可以使用router.beforeEach注册一个全局的before钩子:const router=new VueRouter({...})router.beforeEach((to,form,next)=>{转载 2017-08-09 14:32:10 · 387 阅读 · 0 评论 -
VUE iscroll
https://github.com/Dafrok/vue-iscroll-view 基本使用方法:$ npm i vue-iscroll-view$ npm i iscrollimport IScrollView from 'vue-iscroll-view'/* Using these kinds of IScroll class for different cases. */import转载 2017-08-21 11:28:54 · 13905 阅读 · 6 评论 -
VUE-cli全局变量,路由跳转引起计算属性函数的执行
定义全局变量 路由跳转的时候改变全局变量的值 在app.vue文件中的正确使用 下面2种方式都是错误的使用方式,这2种方式的progressFlag2,progressFlag1的值都不会随全局变量global的值改变而改变; (1)data属性 (2)计算属性 计算属性跟全局变量值VUE的监测情况实测 事实证明: (1)路由的router.beforeEac原创 2017-08-23 14:30:17 · 985 阅读 · 0 评论 -
jquery在vue脚手架中的使用方式
1:在各个vue文件中使用<script>import '../assets/js/jquery-1.10.2.min.js'export default { data() { return { }, watch: { }, created: function() { }, methods: { list() { this.$router.转载 2017-08-28 14:33:43 · 1424 阅读 · 0 评论 -
v-if,v-show连续使用
1:v-if当条件为真时会创建元素,为假时会销毁页面元素, 2:v-show只是基于CSS的显示隐藏,不支持 < template> 语法,也不支持 v-else。 3:如果我想同时拥有v-if,v-show的功能,当第一次条件为真时才创建元素,创建以后不再销毁元素,可以同时使用这2个标签,代码如下:<div v-show='flag'> <div v-if='condition'></原创 2017-08-24 10:27:23 · 2083 阅读 · 0 评论 -
forceUpdate
强制刷新,适用于像数组或者对象改变的时候,视图没有更新的情况;updated函数会执行;不是刷新整个组件;原创 2017-09-05 17:26:20 · 2763 阅读 · 0 评论 -
vue中less公共文件的使用
1:如果我封装一个less文件,这个文件中包括了一些颜色变量,封装了一些less方法;我改如何引入vue脚手架中呢? 在main.js , app.vue中引入以后,其他VUE文件中是不能引用这个文件中的东西的;现在发现的唯一的可用方法就是每个vue文件中都引入一次;如果一个页面包含8个子组件,那么我就得引入9次这个公共less文件;原创 2017-08-24 14:48:19 · 2400 阅读 · 1 评论 -
VUE计算属性
1:computed属性 VS methods属性<div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> <p>Computed reversed message: "{{ reversedMessage1()转载 2017-08-17 10:34:41 · 608 阅读 · 0 评论 -
element UI的checkbox的问题
element UI的checkbox的依赖data值,不能通过计算属性来改变,否则通过ajax来判断后的选中值无法再次选取; 解决办法, 1:如果依赖性是ajax,只能通过watch计算属性来改变data值(checkbox的v-model值绑定在data); 2:如果不是依赖ajax的话,可用mounted,watch来改变原创 2017-09-07 08:51:52 · 2825 阅读 · 0 评论 -
路由传值介绍
传值1:query传值:(path,name都行)this.$router.push({ query: { name:'username' }, name: 'details'});this.$router.push({ query: { name:'username' }, path: 'details'});2:params传值原创 2017-09-07 10:16:30 · 1611 阅读 · 0 评论