Vue.js是一个轻巧、高性能、可组件化的MVVM库。Vue 的核心库只关注视图层，并且非常容易学习，同时拥有非常容易上手的API（中英文都有提供）Vue快速入门准备：Vue.js 地址：http://cn.vuejs.org/Bootstrap.js 地址：http://v3.bootcss.com/getting-started/#download两个概念：MVVM ---- M model模型(当前视图中可用的数据) V view视图(渲染UI HTML) VMMVC------ M mo

vue.js的一大功能便是实现数据的双向绑定，本文就表单处理时运用v-model指令实现双向绑定做一个介绍v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上，所谓双向绑定，指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会相应的更新为相同的数据。下面我们看看v-model 在各类表单元素上的用法：&lt;script&gt; let my=new Vue({ el:"#my",

自定义指令除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。注册一个全局自定义指令 `v-hello`Vue.directive('hello',{ //可以有参数el binding,binding中包括以写属性：name,value //binding.value=>绑定的变量 //

组件是可复用的 Vue 实例，与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。组件的创建方式一var myComponent=Vue.extend({ template:'<h2>hello</h2>'});Vue.component('hello',myComponent);组件的创建方式二Vue.component('world',{ template:'<h2>wo

效果图如下：需求：实现添加到购物车，删除，计算金额功能一 、购买功能实现思路：点击购买将商品添加到购物车,先循环对比看要添加的商品是否已经存在与购物车，如果存在，只加数量，不存在则添加实现代码 add(val) { //购买 ，这里我是传了对应的item 过来 var result=true; for(var i of this.goods){ if(val.book==i.book){ //判断名称是否已经存在

1. 父组件传子, 在子组件写props 接收数据。2. 子组件可以使用 $emit 触发父组件的自定义事件。vm.$emit(事件名称, 要传递的参数 )触发当前实例上的事件var vm;window.onload=function () { vm=new Vue({ el:'#box', data:{ flag:'my-hello',//设置标记,写的哪个组件就显示哪个组件 leftwords:''

vue router路由钩子详解导航钩子正如其名，vue-router 提供的导航钩子主要用来拦截导航，让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子：全局的, 单个路由独享的, 或者组件级的。全局钩子你可以使用 router.beforeEach 注册一个全局的 before 钩子：const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ...})同样可以注册一个全局的 af

我们先看看下面这个面试题：vue-router第一次加载组件资源过多导致加载缓慢，如何解决？答案是：通过路由懒加载的形式来解决这个问题那么什么是路由懒加载呢？懒加载也叫延迟加载，路由懒加载是利用Vue.js的异步组件和webpack的代码分割，把不同路由对应的不同组件分割成不同的代码块，当路由被访问时，再去加载对应的组件，然后每次进入一个新页面才加载该页面所需要的资源（也就是异步加载路由）了解 Vue 的异步组件 Webpack 的代码分割功能刚开始我们使用路由可能是下面这样（index.js）