watched属性,vue中的观察属性,可用来监听一个值的变化 默认有两个参数,新值,旧值 data (){ return { currentCity: "深圳" } } watch:{ 'currentCity':{ handler:function (val,oldval) { this.ctFontSize = val.length > 3 ? true: false; } } }, 当currentCity的值发生变化时就会运行上面的代码

数组: this.$set(Array,index, newValue) 对象: this.$set(Object, key, value)

Vue.extend 是构造一个组件的语法器. 用法 Vue.extend ( options ),options 是对象: 使用基础Vue构造器,创建一个子类,参数是一个包含组件选项的对象,data选项是特例,它必须是函数. 1. 第一种用法--挂在到元素上 输出如下: 2. 第二种用法--将组件注册到Vue.component 全局方法里面 3. 第三种方法--将组件注册为局部组件

概述 上一篇我们介绍了如何将$.ajax和Vue.js结合在一起使用,并实现了一个简单的跨域CURD示例.Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没有必要引入jQuery.vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应.也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的API更为简洁.另外,vue-re

npm 更新 cnpm install -g npm Vue 的基本用法 Vue 相比于 React 和 Angular 容易上手多了,因此我对 Vue 的学习主要以文档为主,视频为辅(只有像我这种菜鸟才看视频教程,真正的牛人文档瞄几眼就会了(-_-#)). 下载使用(两种方式) 直接下载并用 <script> 标签引入, Vue 会被注册为一个全局变量. 平时对于 Dom 操作比较频繁的小项目可以直接这样使用. Vue.js 提供一个 官方命令行工具 ,可用于 快速搭建大型单页应用 .该工具

Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着.销毁等过程进行js控制. 5.1. Vue实例初始化的选项配置对象详解 前面我们已经用了很多次 new Vue({...})的代码,而且Vue初始化的选项都已经用了data.methods.el.computedd等,估计您看到这里时,应该已经都明白了他们的作用,我们就详细讲解一下他们的使用情况.更

计算属性 在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> {{ message.split('').reverse().join('') }} </div> 在这种情况下,模板不再简单和清晰.在实现反向显示 message 之前,你应该确认它.这个问题在你不止一次反向显示 message 的时候变得更加糟糕. 这就是为什么任何复杂逻辑,你都应当使用计算属性

本文的主要内容如下: 介绍vue-resource的特点 介绍vue-resource的基本使用方法 基于this.$http的增删查改示例 基于this.$resource的增删查改示例 基于inteceptor实现请求等待时的loading画面 基于inteceptor实现请求错误时的提示画面 本文11个示例的源码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星! GitHub Source 本文的所有示例如下: http get示例 http jsonp示例

插件和Preset 插件 Vue CLI 使用了一套基于插件的架构 Vue CLI 使用了一套基于插件的架构.如果你查阅一个新创建项目的 package.json,就会发现依赖都是以 @vue/cli-plugin- 开头的.插件可以修改 webpack 的内部配置,也可以向 vue-cli-service 注入命令.在项目创建的过程中,绝大部分列出的特性都是通过插件来实现的. 基于plugin的架构是的Vue CLI 灵活且可扩展. TIP 可以通过 vue ui 命令使用GUI instal

Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一)  http://www.cnblogs.com/gdsblog/p/7804785.html (二)   http://www.cnblogs.com/gdsblog/p/7804770.html (三)   http://www.cnblogs.com/gdsblog/p/7804758.html (四) http://www.cnblogs.com/gdsblog/

  本节目录 一 vue获取原生DOM的方式 二 DIY脚手架 三 vue-cli脚手架的使用 四 webpack创建项目的玩法 五 element-ui的使用 六 xxx 七 xxx 八 xxx 一 vue获取原生DOM的方式$refs 之前我们获取dom是通过原生js或者jQuery的选择器来获取的,那么vue也给我们提供了一些获取dom的方法. 方式:给标签或者组件添加ref属性,将来我们通过this.$refs属性可以获取到这个标签或者组件. <div ref="chao"

本篇文章主要介绍了谈谈Vue.js——vue-resource全攻略,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧   概述 上一篇我们介绍了如何将$.ajax和Vue.js结合在一起使用,并实现了一个简单的跨域CURD示例.Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没有必要引入jQuery.vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并

http://www.jianshu.com/p/b5858f1e6e76 Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着.销毁等过程进行js控制. Vue实例初始化的选项配置对象详解 前面我们已经用了很多次 new Vue({...})的代码,而且Vue初始化的选项都已经用了data.methods.el.computedd等,估计您看到这里时

let 变量 1. 局部作用域 2. 不会存在变量提升 3. 变量不能重复声明 const 变量 1. 局部作用域 2. 不会存在变量提升 3. 变量不能重复声明 4. 只能声明常量,不可变得量 this 指向 与vm实例没有任何关系.而是与箭头函数和普通函数的区别.总结: 不是看到{ }就是一个对象 1.es5的普通函数,this指向是指向了调用者,比如vue实例的方法(在methods中声明了一个方法)是由vue实例vm调用的,所以this指向vm. (vm 是 new Vue({}) 的返

Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着.销毁等过程进行js控制. 5.1. Vue实例初始化的选项配置对象详解 前面我们已经用了很多次 new Vue({...})的代码,而且Vue初始化的选项都已经用了data.methods.el.computedd等,估计您看到这里时,应该已经都明白了他们的作用,我们就详细讲解一下他们的使用情况.更

使用 pug 的原因: 使得 HTML 写起了来更加清晰和快捷 用法: Vue 的用法没有变化: <template lang="pug"> transition(name="sider") div.hello h3 {{msg}} p(:style="{color:'#000'}", :htmlData="msg") p label button(@click="clickMe") click

前后端分离.微服务框架是当下比较流行的词汇,而vue就是前端框架的佼佼者.下面重点介绍一下vue的用法: vue起步:1.引包    2.启动new Vue({el:目的地,template:模板内容})  其中options参数除了 el.template还有数据data 在html中如何使用vue: 按照上述步骤, 引包   <script src='./node_modules/vue/dist/vue.js'></script> new Vue对象  <script&

前后端分离.微服务框架是当下比较流行的词汇,而vue就是前端框架的佼佼者.下面重点介绍一下vue的用法: vue起步:1.引包    2.启动new Vue({el:目的地,template:模板内容})  其中options参数除了 el.template还有数据data 在html中如何使用vue: 按照上述步骤, 引包   <script src='./node_modules/vue/dist/vue.js'></script> new Vue对象  <script&

前言 今天花一天时间阅读完Vue Router的官方文档的基础部分,简单的做一下总结和记录 Vue Router是什么 Vue Router 是 Vue.js 官方的路由管理器,用于构建单页应用(SPA).地址栏url的变化并不会去发请求去服务器取新的页面,而是按需加载局部组件,看起来就像无刷新一样.包括的功能包括: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数.查询.通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接

## .es6的基本语法 ​ let---是局部作用于,不会存在变量提升,变量不能重复声明 ​ const--局部作用域,不会存在变量提升 不能重复声明,只声明常亮,不可变的量 ​ ```javascript -模板字符串 tab键上面的反引号 $(变量名) -箭头函数 function(){}===()=>{} this的指向发生了改变 -对象的使用 var person={ name:'alex', fav2:function(){ //this指向了person }, fav:()=>{

Vue 组件通讯 ——常见使用场景可以分为三类: 父子通信: 父向子传递数据是通过 props,子向父是通过 events($emit):通过父链 / 子链也可以通信($parent / $children):ref 也可以访问组件实例:provide / inject API:$attrs/$listeners 兄弟通信: Bus:Vuex 跨级通信: Bus:Vuex:provide / inject API.$attrs/$listeners 1.require.context() 1.场