frwupeng517的博客_vue

vue-router 入门学习

对于单页面应用，尤其是移动端的网页应用，使用<a></a>标签实现页面切换和跳转会有300ms的延迟，遇到网速慢就会一直加载。所以在SPA应用中，用视图切换来模拟页面的切换vue-router 是Vue.js官方的路由插件，它和 Vue.js是深度集成的，适用于构建SPA单页面应用。Vue的单页面应用是基于路由和组件的，相对于传统页面基于 a 链接和页面，路由用于设定访问路

router

vue

原创 2017-08-05 23:18:08 3109 阅读 1收藏

安装 node-sass 时报错

安装 node-sass 时报错在安装 node-sass 时报错，截图如下解决方法如下：npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-s

npm

node

scss

原创 2017-07-27 15:09:58 1684 阅读

vue实现双击编辑

JS 实现双击编辑原始 HTML代码：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc

双击

js

实现

原创 2017-07-22 00:04:20 10000+阅读

Vue.js 生命周期

生命周期示意图：beforeCreate --> Function在实例初始化之后，数据观测（data observer）和event/watcher 事件配置之前调用created --> Function实例已经创建完成之后被调用，在这一步，实例已经完成以下的配置：> 数据观测（data observer）> 属性和方法运算> watch/

其他

watch

原创 2016-12-07 15:20:45 1945 阅读 1收藏

vue-cli 快速搭建脚手架

使用 Vue.js 开发大型应用时，我们需要考虑代码目录结构、项目构建和部署、热加载、代码单元测试等事情。如果每个项目都要手动完成这些工作，那无疑效率是低下的，所以通常我们会使用一些脚手架工具来帮助完成这些事情。在 Vue.js 生态中我们可以使用 vue-cli 脚手架工具来快速构建项目。1、安装vue-cli 是用 node 编写的命令行工具，我们需要进行全局安装。打开命令行工具，输入指令：$

simple

vue-cli

webpack

原创 2016-12-03 12:42:03 4203 阅读

vue-resource 与服务器端通信及跨域实际应用

与服务器端通信Vue.js 可以构建一个完全不依赖后端服务的应用，同时也可以与服务端进行数据交互来同步界面的动态更新。Vue 本身并没有提供与服务端通信的接口，但是通过插件的形式实现了基于AJAX、JSONP 等技术的服务端通信。vue-resource 是一个通过 XMLHttpRequest 或 JSONP 技术实现异步加载服务端数据的 Vue 插件，该插件提供了一般的 HTTP 请求接口和

xmlhttprequest

jsonp

cors

原创精选 2016-12-02 16:17:48 10000+阅读 1点赞

Vue.js 实例方法

Vue 实例方法实例属性1、组件树访问1-1、vm.$parent用来访问当前组件实例的父实例，如果当前实例有的话1-2、vm.$root当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自已1-3、vm.$children类型：Array<Vue instance>当前实例的直接子组件。需要注意 $children 并不保证顺序，也不是响应式的。如果你发现自己正在尝

$parent

$el

$mount

原创 2016-11-24 15:28:17 3322 阅读

Vue.js 自定义过滤器

过滤器，本质上就是一个函数。其作用在于用户输入数据后，它能够进行处理，并返回一个数据结果。Vue.js 与 AngularJS 中的过滤器语法有些相似，使用管道符（|）进行连接，代码示例如下：{{'abc' | uppercase}} 'abc' => 'ABC'这里使用了Vue.js 内置的过滤器 upp

filter

原创精选 2016-11-23 14:40:04 10000+阅读 1收藏

Vue.js Method

MethodVue.js 的事件监听一般都通过 v-on 指令配置在HTML中，虽然也可以在Javascript 代码中使用原生 addEventListener 方法添加事件监听，但Vue.js 本身并不提倡如此。看上去这种方式不符合传统的“关注点分离”的理念，但其实所有的Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上。实际上，采用它提供的 v-on 指令有以下

stop

prevent

$event

原创 2016-11-22 17:20:34 1934 阅读

Vue.js Class与Style绑定

Class与Style绑定对于数据绑定，一个常见的需求是操作元素的 class 列表和它的内联样式。因为它们都是属性，我们可以用 v-bind 来处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错，因此，在 v-bind 用于 class 和 style 时，Vue.js 专门增强了它。表达式的结果类型除了字符串以外，还可以是对象或数组。绑定HTML Class1、对象语法我们可

class

bind

style

原创 2016-11-22 16:00:02 3149 阅读 1收藏

Vue.js 计算属性computed

计算属性通常我们会在模板中绑定表达式，模板是用来描述视图结构的。如果模板中的表达式存在过多的逻辑，模板会变得臃肿不堪，维护变得非常困难。因此，为了简化逻辑，当某个属性的值依赖于其他属性的值时，我们可以使用计算属性。<div id="example"> {{ message.split('').reverse().joi

watch

computed

原创 2016-11-21 17:25:59 4334 阅读

Vue.js 自定义组件 & 父子组件间的通信

什么是组件？组件（component）是Vue.js最强大的功能之一，核心目标是扩展HTML元素，封装可重用的代码。我们可以把组件代码按照template、style、script的拆分方式，放置到对应的 .vue 文件中。Vue.js的组件可以理解为预先定义好行为的ViewModel类，一个组件可以预定义很多选项，但最核心的是以下几个：模板（template） -- 模板

data

component

props

原创 2016-11-19 16:20:30 10000+阅读 2点赞 1收藏 1评论

Vue.js 自定义指令

自定义指令除了默认设置的核心指令（如：v-model，v-for），Vue.js也允许注册自定义指令，自定义指令提供一种机制将数据的变化映射为DOM行为Vue.js用 Vue.directive(id, definition)方法注册一个全局自定义指令，它接收两个参数：指令ID和定义对象。也可以用组建的directives选项注册一个局部自定义指令例如：聚焦一个 input 元素<div&n

id

Vue

directive

原创 2016-11-19 14:53:15 2040 阅读

Vue.js 条件渲染 v-if、v-show、v-else

v-if v-if 完全根据表达式的值在DOM中生成或移除一个元素。如果v-if表达式赋值为false，那么对应的元素就会从DOM中移除；否则，对应元素的一个克隆将被重新插入DOM中。<!DOCTYPE html> <html lang="en"> <head> <meta&n

v-if v-show v-else

原创 2016-11-15 23:29:03 7362 阅读

MVC 和 MVVM 设计模式

MVC模式MVC即Model-VIew-Controller。他是1970年代被引入到软件设计大众的。MVC模式致力于关注点的切分，这意味着model和controller的逻辑是不与用户界面（View）挂钩的。因此，维护和测试程序变得更加简单容易。 MVC设计模式将应用程序分离为3个主要的方面：Model，View和ControllerM: 数据保存业务数据，数据的模型，数据的封装定义。比如商品

mvc

mvvm

原创 2016-11-15 17:22:29 1094 阅读

Vue.js 属性绑定 v-bind

v-bind 主要用于属性绑定，Vue官方提供了一个简写方式 :bind，例如： <a v-bind:href="url"></a> <a :href="url"></a>绑定HTML Class一、对象语法

v-bind

原创 2016-10-22 16:55:56 7499 阅读 1评论

Vue指令实战：结合bootstrap做一个用户信息输入表格

结合前面的vue指令做了个小例子，用户在表单里面输入用户名和年龄，点击“添加”以后会保存到用户信息表里面<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> &nbs

vue

@click

v-show

原创 2016-10-22 14:59:55 3075 阅读

Vue.js 表单控件绑定 v-model

v-model 主要用于input、textarea、select等表单控件元素上创建双向数据绑定，所谓双向绑定就是js中vue实例化的data对象的数据与其渲染的dom元素上的内容保持一致1、text 文本<div id="app"> <h1>`message`</h1> &nb

v-model number lazy

原创精选 2016-10-15 16:22:49 4861 阅读

列表渲染 Vue2.0与Vue1.0的区别

v-for： v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。基本用法：<div id="app"> <ul> <li&

v-for track-by $ind

原创 2016-10-15 00:07:55 3696 阅读

Vue.js 事件处理器 v-on

Vue.js官方文档对于 v-on 这一常用指令提供了缩写方法，看看官网是怎么介绍的 <a v-on:click="doSomething"></a>  <a @click="doSomething"></a>1、方法

vue

click

事件绑定

原创 2016-10-14 13:36:32 2167 阅读

Vue.js 指令 v-html v-cloak v-pre v-once

指令(Directives)是特殊的带有前缀v-的特性。指令的值限定为绑定表达式，指令的职责就是当其表达式的值改变时把某些特殊的行为应用到DOM上HTML：<div id="test01"> <p v-if="greeting">Hello!</p> </div>这里，v-if指令将

指令

js

vue

原创 2016-10-09 17:32:09 9311 阅读 1点赞 1评论

Vue.js学习笔记：数据绑定语法---绑定表达式

1.JavaScript表达式放在双大括号标签内的文本称为绑定表达式。在Vue.js中，一段绑定表达式由一个简单的JS表达式和可选的一个或多个过滤器构成HTML：<span id="test01">数字加减：{{number+1}}</span><br> <span id="test02">三目运算：{{ok?'yes':'no'

js

数据绑定

vue

原创 2016-10-09 15:07:28 3724 阅读

Vue.js学习笔记：插值

文本：数据绑定最基础的形式就是文本插值，使用一对双大括号双大括号标签会被相应数据对象的msg属性的值替换，每当这个属性变化时它也会更新HTML：<span id="test01">Message:`msg`</span>JS：var vm = new Vue({ el:'#te

js