vue的实例属性和方法 除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法.它们都有前缀 $,以便与用户定义的属性区分开来.例如: var data = { a: 1 } var vm = new Vue({ el: '#example', data: data }) vm.$data === data // => true vm.$el === document.getElementById('example') // => true // $watch 是一个实例方法 vm.$wa…

1.router是VueRouter的一个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,这个对象中是一个全局的对象,他包含了所有的路由包含了许多关键的对象和属性. 举例:history对象 $router.push({path:'home'});本质是向history栈中添加一个路由,在我们看来是 切换路由,但本质是在添加一个history记录 方法: $router.replace({path:'home'});//替换路由,没有历史…

学习的router-view路由一直不显示,我翻看vue文档,花费1个小事终于找到原因,希望我的问题能给初学的同学,带来福音,版本不一样,真的烦 在此总结记录,以免以后在此遇到此问题 //配置路由 const router = new VueRouter({ //在vue2.0中这里是routes而不是routers,否则<router-view>标签是不会显示的 routes:[ {path:'/',component:Home}, {path:'/helloworld', componen…

Vue2.0较Vue1.0,路由有了较大改变.看一下Vue2.0中的路由如何配置: 步骤一: 在main.js文件中引入相关模块以及组件及实例化vue对象配置选项路由及渲染App组件 默认设置如下: import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el:…

Vue目前的的开发模式主要有两种:1.直接页面级的开发,script直接引入Vue2.工程性开发,webpack+loader或者直接使用脚手架工具Vue-cli,里面的文件都配置好了 webpack可以进行配置,配置多文件入口,进行多页面开发 第二种Vue开发,结合webpack打包完文件会很大,怎么解决这个问题?1.webpack代码拆分:code-spliting2.提取公共(如提取css,js)3.预渲染:使用prerender-spa-plugin插件4.后台————开启压缩,gzip…

vue2.0中router-link详解:https://blog.csdn.net/lhjuejiang/article/details/81082090 在vue2.0中,原来的v-link指令已经被<router-link>组件替代了 <router-link>组件支持用户在具有路由功能的应用中点击导航.通过to属性指定目标地址,默认渲染为带有正确连接的<a>标签,可以通过配置tag属性生成别的标签.另外,当目标路由成功激活时,链接元素自动设置一个表示激活的css…

https://www.zhihu.com/question/51907207?rf=55052497 徐飞 在我看来,渐进式代表的含义是:主张最少. 每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主张,主张有强有弱,它的强势程度会影响在业务开发中的使用方式. 比如说,Angular,它两个版本都是强主张的,如果你用它,必须接受以下东西: - 必须使用它的模块机制- 必须使用它的依赖注入- 必须使用它的特殊形式定义组件(这一点每个视图框架都有,难以避免) 所以An…

组件的过度 Vue1.0中transition做为标签的行内属性被vue支持.但在Vue2.0中.Vue放弃了旧属性的支持并提供了transition组件,transition做为标签被使用. 使用transition完成任何元素进入/离开的过渡组件需要满足下列条件 条件渲染(v-if) 条件展示(v-show) 动态组件 组件根节点 Elample <div id="demo"> <button v-on:click="show = !show"…

vue2.0相比vue1.0 有哪些改变,今天总结了一下 vue2.0组件中 template 不在支持代码片段 //vue1.0组件中template写法 <template> <h3>我是vue1.0的写法</h3> <h2>我是vue1.0的写法</h2> </template> //vue2.0组件中 template 写法 //必须有根元素 <template> <div> <h3>我是v…

第一部分:pug(jade)模板引擎 pug,原名jade,是流行的HTML模板引擎,它是HAML在JavaScript上的实现,最大的特色是使用缩进排列替代成对标签. 它简化了HTML的成对标签的写法,使代码更加简洁.开发效率更高,但是同时它也带来了一些副作用:可移植性差.调试困难.性能并不出色. 第二部分:vue2.0中使用pug(jade)       Step1:安装pug和jade依赖 #安装支持pug依赖 npm install pug pug-loader pug-filters…

第一部分:Less语言 与上一篇<vue2.0中使用sass>介绍的Sass语言一样,Less语言也是一种CSS的扩展语言,增加了变量.混合(minin).函数等功能,让CSS更易维护.方便制作主题. Less既可以在客户端(IE6+.Webkit.Firefox),也可以借助Node.js或Rhino在服务器端运行,其样式扩展名为.less. Less完全兼容CSS语法,连新增的特性也是使用CSS语法. 在Less中,你可以这样写CSS: @base: #f938ab; .box-shado…

第一部分:Sass语言 Sass是一种强大的css扩展语言(css本身并不是一门语言),它允许你使用变量.嵌套规则.mixins.导入等css没有但开发语言(如Java.C#.Ruby等)有的一些特性,并且完全兼容CSS语法.Sass有助于保持大型样式表结构良好. Sass有两种语法. 一种称为SCSS,是一个CSS3语法的扩充版本,也就是说,所有符合CSS3语法的样式表也都是具有相同语法意义的SCSS文件,SCSS样式表文件要以.scss扩展名结尾.在vue中,我们可以使用<style lan…

vue1.0中 vm.$dispatch 和 vm.$broadcast 被弃用,改用$emit,$on 1. vm.$on( event, callback ) 监听当前实例上的自定义事件.事件可以由vm.$emit触发.回调函数会接收所有传入事件触发函数的额外参数. vm.$emit( event, […args] ) 触发当前实例上的事件.附加参数都会传给监听器回调. 例子: //父组件 <template> <ratingselect @select-type="onS…

再vue中,当页面加载完成以后,dom还没有加载,是无法获取进行操作的,但是在vue2.0中提供了一个方法:this.$nextTick,在这个回调函数里面写dom操作即可: 如下代码: created() { this.$nextTick(() => { //do somthing }); 其实这里还有一个小技巧,就是用settimeout(fn,20),来取代this.$nextTick,(20 ms 是一个经验值,每一个 Tick 约为 17 ms),对用户体验而言都是无感知的. 强烈推荐…

转自:http://blog.csdn.net/sinat_35512245/article/details/53966788 Vue2.0的代码中发现 $key这个值并不能渲染成功,问题如下:但是vue1.0是可以的 结果这个对象的key值并不能够显示: 后来查阅了文档才知道,这是因为在Vue2.0中,v-for迭代语法已经发生了变化: vue2.0丢弃了: $index 和 $key 新数组语法如下: 解决后: 结果:…

#vue2.0中css动画不显示的坑: transition中包含的两个标签如果相同(此处都是p标签),需要为元素指定key.如果标签名不同的话,不指定key也可以出现动画效果. #vue2.0中js动画:…

vue2.0中  怎么引用less? 第一步: 安装less依赖, npm install less less-loader --save 第二步: 修改webpack.config.js文件,配置loader加载依赖,让其支持外部的less,在原来的代码上添加 { test: /\.less$/, loader: "style-loader!css-loader!less-loader", } 现在基本上已经安装完成了,然后在使用的时候在style标签里加上lang=”less”里面…

一.前言 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.组件间如何传递数据就显得至关重要.本文尽可能罗列出一些常见的数据传递方式,如props.$emit/$on和vuex以及新出的$attrs/$listeners和provide/inject,以通俗易懂的实例讲述这其中的差别,希望对小伙伴有些许帮助. 二.props 父组件A通过props的方式向子组件B传递,B to A 通过在 B 组件中 $emit, A 组件中 v-o…

最近在公司项目中使用vue2.0做开发,在使用checkbox时遇到了一些问题,首先我们先了解一下需求. 如上如所示,在上方复选框被点击时,更改下方p标签的文本内容为:复选框已被选中.并将p标签文字颜色改为红色. 面对如此简单的需求我第一个想到的就是通过点击事件判断复选框状态,更改文本及css样式,代码如下: <template> <div id="secert-main"> <label for="label" @click.stop…

前置知识请戳这里 获取DOM对象以及组件对象 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id=…

(一)less的用法: (二)vue 2.0中如何使用less插件 1:vue先安装less插件 npm install less less-loader --save 2:修改webpack.base.conf.js文件,配置loader加载依赖,让其在项目中使用less ,配置的方法: 文件下的 rules数组中新增加配置项: { test: /\.less$/, loader: "style-loader!css-loader!less-loader", } 3:就可以在项目中使…

watch和computed均可以监控程序员想要监控的对象,当这些对象发生改变之后,可以触发回调函数做一些逻辑处理 watch监控自身属性变化 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></…

在开发过程中,有时候接口跟不上我们的进度,我们要测试,就需要自测. 现在vue已经升级到2.0版本了,早期在vue构建工程文件在build里面有dev-server.js,但是后来构建去除了该文件集成到了webpack的webpack.dev.conf.js里面.希望对大家有帮助. 1.先编写模拟数据 在本目录配置一个data.json的文件,具体的自己配置,也不难. 2.编写接口模块 进入webpack.dev.conf.js文件,在Number(process.env.PORT)后面写入以下…

element-ui是由饿了么团队开发的一套基于 Vue 2.0 的桌面端组件库. 官网:http://element.eleme.io/ 安装 npm i element-ui -S 引用完整的element-ui import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); 需要注意的是,样式文件需要单独引入. 如果报错,在 webpack.conf…

vue中父组件通过prop传递数据给子组件,而想要将子组件的数据传递给父组件,则可以通过自定义事件的绑定. 每个Vue实例都实现了[事件接口],即: 1.使用 $on(eventName) 监听事件 2.使用 $emit(eventName) 触发事件 父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件. html代码 <div id="container"> <my-component v-on:addpar="priceAll"…

计算属性是一个很邪门的东西,只要在它的函数里引用了data中的某个属性,当这个属性发生变化的时候,函数仿佛可以嗅探到这个变化,并自动重新执行. 上代码会源源不断的打印出a的值.如果希望b依赖data中的x而变化,只需要保证b函数中有this.x即可.如果函数中没有出现data中的属性,那么无论data中的属性怎么变,b对应的函数一次也不会执行. Vue是怎么知道计算属性在函数中引用了哪个data属性?这个函数又是怎么知道data属性变了,而且只关心它内部引用的那个属性,别的都不管?官方文档是这么…

开发后台系统的时候,富文本编辑器肯定是必不可少的,然后呢~在天朝当然要属百度编辑器(UEditor)最成熟了,功能全面,文档齐全(相对),ui优美(...,对于程序员来说)等等许多方面(MMP,还不是因为有中文文档和国人使用经验参考),所以使用百度编辑器就是不二之选了,早前再angular1的项目中使用过UE,主要是由后端配置好用,直接扔一个demo给我们,照着插入就OK了,现在呢,只能自己封装个组件咯,网上其实已经有很多关于在vue项目中引入UE的博文了,我也是看着那些博文摸索过来的,也遇到了…

vue中父组件通过prop传递数据给子组件,而想要将子组件的数据传递给父组件,则可以通过自定义事件的绑定. 每个Vue实例都实现了[事件接口],即: 1.使用 $on(eventName) 监听事件 2.使用 $emit(eventName) 触发事件 父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件. html代码: <div id="counter-event-example"> <p>{{ total }}</p> <…

v-on注册事件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"…

什么是生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期. 在Vue的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册js方法,可以让我们用自己注册的js方法控制整个大局,在这些事件响应方法中的this直接指向的是vue的实例. 再上图,对生命周期图的标注 特别值得注意的是created钩子函数和mounted钩子函数的区…