近期被问到一个问题，在你们项目中使用的是Vue的SPA（单页面）还是Vue的多页面设计？ 这篇文章主要围绕Vue的SPA单页面设计展开。 关于如何展开Vue多页面设计请点击查看。 vue-router是什么？ 首先我们需要知道vue-router是什么，它是干什么的？ 这里指的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（单页应用）的路径管理器。 换句话说，vue-router就是WebApp的链接路径管理系统。 vue-router是Vue.js官方的路由插件...
观察者模式首先话题下来，我们得反问一下自己，什么是观察者模式？ 概念观察者模式（Observer）：通常又被称作为发布-订阅者模式。它定义了一种一对多的依赖关系，即当一个对象的状态发生改变的时候，所有依赖于它的对象都会得到通知并自动更新，解决了主体对象与观察者之间功能的耦合。 讲个故事上面对于观察者模式的概念可能会比较官方化，所以我们讲个故事来理解它。 A：是共产党派往国民党密探，代号 001（发布者） B：是共产党...
组件可以有自己的data，并且data必须是一个function。 在下面这个例子中，data 返回了一个在外部定义的对象。并且这个组件在页面中使用了3次，点击+1时出现了如下情况：data中的count属性影响到了所有实例。<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" type="text/css" href="../css/bootstrap.css" rel="external nofollow" ><style type="text/css">#app{margin:...
第1步：安装cross-env npm i --save-dev cross-env 第2步：修改各环境下的参数 在config/目录下添加test.env.js、pre.env.js。 修改prod.env.js里的内容，修改后的内容如下： use strict module.exports = {NODE_ENV: "production",EVN_CONFIG:"prod",API_ROOT:"/apis/v1" } 分别对test.env.js和pre.env.js文件内容进修修改，修改后的内容如下： use strict module.exports = {NODE_ENV: "testing",EVN_CONFIG:"test",API_ROOT:"/...
最简单的Vue 实例 //html <div id="app">{{message}} </div>//javascript var vm = new Vue({el: #app,data: {message: Hello Vue!} })由于 Vue 借鉴了 MVVM 的思想，这里的字符串 "Hello Vue!" 就相当于 Model，DOM 就相当于 View，Vue 实例 "vm" 则是起连接 Mode 和 View 作用的 ViewModel，因此我们才得以通过数据驱动视图，而不需要关心它是怎么实现的，因为 Vue 已经帮我们做好了一切。 Vue 实例内置的属性和方法都是以 "$" 开...
angularjs简单介绍和特点首先angular是一个mvc框架, 使用mvc解耦, 采用model, controller以及view的方式去组织代码, 会将一个html页面分成若干个模块, 每个模块都有自己的scope, service, directive, 各个模块之间也可以进行通信, 但是整体结构上是比较清晰的, 就是说其代码组织是模块化的, angular的view可能仅仅是一个框架, , 对view的dom操作或者时间监听都是在directive中实现的, 而且一般情况下很少直接去写dom操作代码, 只要...
写了vue项目和小程序，发现二者有许多相同之处，在此想总结一下二者的共同点和区别。 一、生命周期 先贴两张图： vue生命周期小程序生命周期相比之下，小程序的钩子函数要简单得多。 vue的钩子函数在跳转新页面时，钩子函数都会触发，但是小程序的钩子函数，页面不同的跳转方式，触发的钩子并不一样。onLoad：页面加载 一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数。 onShow：页面显示 每次打开页面...
今天做项目时踩到了vue-router传参的坑（jquery和params），所以决定总结一下二者的区别。 1.jquery方式传参和接收参数 传参: this.$router.push({path:/xxxquery:{id:id}}) 接收参数: this.$route.query.id 注意:传参是this.$router,接收参数是this.$route,这里千万要看清了！！！ this.$router 和this.$route有何区别？ 在控制台打印两者可以很明显的看出两者的一些区别：1.$router为VueRouter实例，想要导航到不同URL，则使用$r...
vue 2.1.0之前，实现方式: 1 /router/index.js 配置路由元信息keepAlive: true {path: "user",name: "用户管理",component: User,meta: {requireAuth: true,keepAlive: true // 用户列表需要被缓存}},2 /app.vue<keep-alive><router-view v-if="$route.meta.keepAlive"></router-view></keep-alive><router-view v-if="!$route.meta.keepAlive"></router-view>user路由的$route.meta.keepAlive为true，便达到了被缓存的效果。 总结...
Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下： push()pop()shift()unshift()splice()sort()reverse()都有什么功能？动手试验了一下： <body><div id="app"><div>push方法：<input type="text" v-model="text" @keyup.enter="methodByPush"><input type="button" value="测试功能" @click="methodByPush"><ul><li v-for="item of items"><span v-text="item"></span></li></ul></div><div>pop方法：...
Vue 提供了11个钩子函数 1，从创建到销毁发生的一系列状态叫做什么周期，在这个过程中vue会提供状态函数给我们进行 该状态的操作，这个函数叫做钩子函数/生命周期函数/生命周期钩子过程: new Vue({}) Vue 实例初始化，读取所有的生命周期函数，并没有执行，不会调用 beforeCreate() 读取属性，计算属性，添加监听 set get方法，读取watch方法 create() 可以操作数据了 判断是否有el配置，或者是被调用了 $mount() 都会走下一步 判断...
1、组件声明 <!-- 全局组件模板father模板 --> <template id="father"> <div> <h3>这是{{name}}</h1> <div> <p>这是{{data}}</p> </div> </div> </template> var FATHER = { template: "#father", data: function() { return { name: "一个全局组件-模板-", data: "数据：18892087118" } } }; 2、组件注册 Vue.component(father, FATHER); 3、组件挂载 <h5>全局组件1</h5> <father></father> 4、组件实例 <!DOCTYPE html> <htm...
Prop 基本用法 Prop的基本用法很简单，只需要在子组件的Vue实例中定义该属性并把值设为目标属性的数组即可 Vue.component(child, {...// 接收messageprops: [message]... })tips：由于HTML中的属性是不区分大小写的，所以当使用DOM中的模板（HTML中）时，驼峰写法需要转化为短横线写法。但是，如果使用字符串模板（JS中）时，不受限制，可以为所欲为。 Prop中的静态和动态值 在正常情况下，一般在父组件中通过v-bind定义一个动态值...
computed 计算属性：通过属性计算得来的属性 计算属性,是在相关联的属性发生变化才计算，计算过一次，如果相关属性没有变化，下一次就不需要计算了，直接去缓存的值 a:<input type="number" v-model.number="a" />b:<input type="number" v-model.number="b" /><!--c:<input type="number" v-model.number="c" />-->总和：{{sum()}}总和：{{count}}平均值：{{avg}}<p v-once>单价：{{price}}</p><p>数量：<input type="number...
路由这个概念最先是后端出现的。在以前用模板引擎开发页面时，经常会看到这样 http://www.xxx.com/login 大致流程可以看成这样： 浏览器发出请求服务器监听到80端口（或443）有请求过来，并解析url路径根据服务器的路由配置，返回相应信息（可以是 html 字串，也可以是 json 数据，图片等）浏览器根据数据包的 Content-Type 来决定如何解析数据简单来说路由就是用来跟后端服务器进行交互的一种方式，通过不同的路径，来请求不同的资...