codesWay的博客

属性：vm.$el:获取Vue实例关联的DOM元素    vm.$data:获取Vue实例的data选项（对象）；    vm.$options:获取Vue实例的自定义属性（如vm.$options.name,获取Vue实例的自定义属性name）；    vm.$refs:获取页面中所有含有ref属性的DOM元素（如vm.$refs.hello，获取页面中含有属性ref = “he

如果说组件的template内容结构比较简单，可以直接写在template选项中；但是当自定义组件的template内容比较复杂的时候，直接写就不合适了，也容易出错，所以：对于这种状况Vue给出了自己的解决方案：使用模板，使用Vue的内置template模板来包裹着模板内容 标签内部被包裹着的内容必须有且只有一个根元素，在这里的根元素是ul -->

Vue有很多内置的指令，比如说v-on，v-model，v-clock等等，每一个指令会完成一定的功能，但是这些内置的指令总会有些局限性，要是能够自定义指令就好了--Vue的自定义指令分类：全局指令和局部指令Vue指令的定义和用法（以全局指令为例）：1.语法：Vue.directive(指令ID，定义对象)，在这里“指令ID”就是指令的名字，“定义对象”就是一个对象，包含有该指令的钩子函数，例如：...

所谓的动态组件，就是利用Vue内置组件,来实现在同一个挂载点，多个组件的切换；在这里所谓的"同一个挂载点"就指的是组件本身，is的值时某一自定义组件的组件id例如：JS部分：var app = new Vue({ el:"#container", data:{ name:"Tom",

子组件能够通过自身的props选项获取父组件上的数据，但是在默认情况下，props是单向绑定的---当父组件数据（属性）发生变化的时候会传递给子组件，引起子组件的变化，但不能反过来并且不允许子组件直接改变父组件的数据，会报错的。例如：也就是说当通过一种方法改变父组件数据的时候，子组件与之相关联的props数据也会发生改变，从而影响子组件，但是子组件直接改变从父组件拿过来的props数据却不能影

父子组件的通信已经知道了，但是在实际的项目中如果需要拿到兄弟组件上的数据（非父子）那该如何是好呢?其实Vue已经为我们提供了一套解决方案：使用中央事件总线； 非父子组件间的通信，使用一个空的Vue实例来作为中央事件总线（就相当于中介一样），用它来抛出和监听事件         1.定义一个空的Vue实例var bus= new Vue()作为中央事件总线（bus）；       

父子组件在一个组件内定义另一个组件，称之为父子组件。但是要注意的是：1.子组件只能在父组件内部使用（写在父组件tempalte中）;    2.默认情况下，子组件无法访问父组件上的数据,每个组件实例的作用域是独立的；例如：JS部分var compo1 = new Vue({ el:"#container1",

以前，Vue组件总是一个个的空标签的形式出现的，那么如果说组件标签里面有内容，那么要获取这些内容要怎么办呢？Vue提供了一个解决方案：slot内容分发，其作用就是用来获取组件中的原内容（就是组件标签内部的内容）。用法分为两种情况:当组件内的原内容结构比较简单的时候可以使用单一slot，当原内容结构比较复杂的时候使用具名slot；单一slot：在组件模板合适的位置插入slot组件即可； <di...

组件是Vue最强大的功能之一，那么到底什么是Vue组件呢？通俗点说就是一个自定义标签：Vue组件的分类：全局组件（在任何Vue实例中均可以使用）和局部组件（只有在当前Vue实例中使用）；全局组件的定义方式：方式一： 创建组建构造器，然后再由组件构造器创建组件（不常用），例如：//1.使用Vue.extened()方法创建组件构造器 var myCom

简单的文本转换可以通过filters来转换，但是当涉及到复杂的逻辑的时候就要通过计算属性完成了计算属性都是以函数的形式写在computed选项中，计算属性中的this指向Vue实例本身，只要最后有返回的值就行，  /* getter与setter (博客上见)*/ var myApp1 = new Vue({ el:"#container1", data:{ fi

v-bind通常用来绑定属性的，格式是v-bind：属性名 = "值"，简写:属性名 = "值" 之前我们知道v-bind主要就是动态更新DOM的属性的，class作为DOM的属性当然也不例外，那么v-bind怎么动态更新class呢，分为三种方法:对象语法和数组语法，还有就是变量语法：变量语法：v-bind：class = "变量"，变量形式 ,这里的变量的值，通常是在css定义好的

v-cloak指令：说白了就是让用户看不到渲染的过程（解决闪屏现象--先出现模板然后才渲染出来页面的过程），当然一般还是要配合css：display：none的才起作用，常放在根元素上HTML部分 {{tasks}} {{tasks}}的感觉真好 点我 点我切换内容 文本 邮箱

Vue模板（{{}}）可以用来展示一些数据，但是遇到数据的逻辑比较复杂的时候，此时要怎么办呢?,这个时候就会用到Vue的计算属性：基本用法计算属性也是用来存储数据的，常用于逻辑比较复杂的计算但有着一下几个特点：          a）所有的计算属性一般以函数的形式写在Vue实例的computed选项中的，并最终返回计算后的结果。（或者是以一个对象的形式写在Vue实例中的computed

Vue的生命周期，就是从Vue实例被创建开始到实例销毁时的过程，整个过程主要可以分为八个阶段分别是：创建前（beforeCreate）、已创建（created）、编译前（beforeMount）、编译后（mounted）、更新前（beforeUpdate）、更新后（update）、销毁前（beforeDestroy）、销毁后（destroyed）,以上各个阶分别会有对应的“钩子函数”以Vue实例的

可能会经常遇到这样的问题，怎么监视数据的变化，当数据发生变化的时候，要做一些事情该如何实现，其实不用担心，Vue有一个方法来解决这个问题：vm.$watch(data,callback,[option]):监视数据的变化，当数据发生变化的时候，执行callback函数，这里的callback函数可以接受两个参数newValue和oldValue作为改变后（前）数据的值，还有option选项，其

前端页面上的数据，大部分都不会是静态的，而是来自于服务器，正是因为这样，所以前端也变得强大起来，那么在Vue中怎么使用Ajax请求呢？Vue本身不支持ajax请求，需要使用“axios”的第三方插件（2.0），axios是基于promise的http请求客户端，用来发送请求，是Vue2.0推荐使用的，同时不再对vue-resource进行更新和维护。也可以使用vue-resource进行跨域请

Vue过滤器用来过滤模型数据，在显示之前进行数据处理和筛选，按照特定的格式进行输出。使用语法:{{data|filter1(参数)|filter2（参数2）}};在Vue2.0之后就没有内置过滤器了，也就是说以后的过滤器都要自己去定义;Vue过滤器的分类：全局过滤器和局部过滤器，两者的区别：顾名思义，全局过滤器在任何一个Vue实例中均可以使用，而局部过滤器只能在该过滤器所在的Vue实例中使

v-model用于表单类元素的双向绑定数据：既然是双向，也就是说当表单元素的值（value）发生变化后，会导致绑定的Vue数据发生变化。例如：v-model绑定输入框：JS部分var myApp = new Vue({ el:"#container",//指定关联的元素 data:{//用来存储数据 context:"", placehode:"

Vue中的事件绑定一般通过v-on指令来绑定事件：事件绑定v-on：事件绑定的表达式的值可以是js语句，也可以是在methods选项中定义好的方法名(有参数的时候当然需要传参),在vue事件中，默认是含有事件对象e的，只不过在methods中定义函数的时候要将其作为形参传进去，在通过v-on调用该方法的时候，就不必写实参$event了 （如果要用的话），这个e包含了一些事件常用的信

当需要将一个数组或者对象循环遍历显示的时候可以使用v-for指令，其值类似于item in items；其中items是数组或者对象，item自然就是其中的一项，in 也可使用 of。当遍历数组的时候有一个可选项index，是当前项的索引 类似与 v-for = (item,[index]) in items; {{index}}.{{book.bookName}}

在前端开发的生涯中，很有可能会开发SPA（single page appaication）单页面应用，单页面应用少不了用到路由，那么Vue中的路由是怎么用的呢，下面我们就来探讨一下：一、Vue路由简介：用来开发SPA（单页面应用），根据不同的url地址显示不同的内容，但显示在同一个页面中。二、基本用法引用：需要额外的引用vue-router.js插件HTML部分a）.使用内