Vue学习—基础篇
文章平均质量分 73
我家小薇薇
这个作者很懒,什么都没留下…
展开
-
Vue学习—选项(三) mixins混入
mixins:mixins 选项接受一个混入对象的数组。这些混入实例对象可以像正常的实例对象一样包含选项,他们将在 Vue.extend() 里最终选择使用相同的选项合并逻辑合并。举例:如果你的混入包含一个钩子而创建组件本身也有一个,两个函数将被调用。Mixin 钩子按照传入顺序依次调用,并在调用组件自身的钩子之前被调用。也就是说同一个生命周期钩子写在构造器外部的会比构造器里面的先调用,如下例子...原创 2018-04-16 17:40:35 · 937 阅读 · 0 评论 -
vue学习—常用指令(三)
v-pre:v-pre显示源码,即{{}}里面是什么就直接显示什么;v-cloak:v-cloak指令,必须配合style标签使用 [v-cloak] {display: none; }。使用这个指令之后的效果:在浏览器渲染完成之前看不到v-cloak控制的这条内容。v-once:v-once指令,只显示一次,也就是说v-once控制的这条内容第一次显示是按照{{}}里面的内容来显示的,但是在这之...原创 2018-04-11 11:23:56 · 145 阅读 · 0 评论 -
vue学习—常用指令(二)
v-model:-model通常用于表单组件的绑定,例如input,select等。它实现的是表单组件的双向绑定,如果用于表单控件以外标签是没有用的。如代码所示,v-model有三个修饰符: (1) v-model.lazy在改变这个input输入框里message的值的时候,原始的message值不会发生改变,只有当v-model.lazy这个输入框失去焦点的时候原始的message值才发生...原创 2018-04-11 11:20:52 · 181 阅读 · 0 评论 -
vue学习—常用指令(一)
v-if,v-else:v-if显示条件为真的时候的数据; v-else显示条件为假的的时候的数据<el-table-column fixed="right" label="操作" min-width="200" v-if="userInfo.manager == 1"> <template slot-scope="scope"> &l原创 2018-04-11 11:09:56 · 210 阅读 · 0 评论 -
Vue学习—选项(四)
extends:允许声明扩展另一个组件(可以是一个简单的选项对象或构造函数),而无需使用 Vue.extend。这主要是为了便于扩展单文件组件。这和 mixins 类似。如下代码,点击加号按钮后执行结果如图:<body> <h1>mixins混入</h1> <div id="app"> {{message}} ...原创 2018-04-17 11:36:40 · 226 阅读 · 0 评论 -
Vue学习—实例(一)
创建Vue实例:每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的:var vm = new Vue({......}),当创建一个 Vue 实例时,你可以传入一个选项对象。一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例,以及可选的嵌套的、可复用的组件树组成。数据与方法:(1) 当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 dat...原创 2018-04-17 15:07:16 · 679 阅读 · 0 评论 -
Vue学习—实例(二)实例方法
vm.$mount:用法:如果 Vue 实例在实例化时没有收到 el 选项,则它处于“未挂载”状态,没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。如果没有提供 elementOrSelector 参数,模板将被渲染为文档之外的的元素,并且你必须使用原生 DOM API 把它插入文档中。这个方法返回实例自身,因而可以链式调用其它实例方法。<body&g...原创 2018-04-17 16:32:25 · 446 阅读 · 0 评论 -
Vue学习—实例(三)实例事件
vm.$on:监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。 //构造器外部事件: vm.$on('test', function (msg) { console.log(msg); }); vm.$emit("test", "Hi");vm.$once:监听一...原创 2018-04-17 17:03:03 · 370 阅读 · 0 评论 -
Vue学习—slot
作为Vue特殊属性的 slot 是用于标记往哪个具名插槽中插入子组件内容。slot-scope用于将元素或组件表示为作用域插槽。特性的值应该是可以出现在函数签名的参数位置的合法的 JavaScript 表达式。这意味着在支持的环境中,你还可以在表达式中使用 ES2015 解构。它在 2.5.0+ 中替代了 scope。此属性不支持动态绑定。<body> <h1>slo...原创 2018-04-19 11:55:54 · 234 阅读 · 0 评论 -
vue学习—directive自定义指令
vue实例,把所有和Vue相关的都放在这个构造器里面。el指定作用域范围。全局API不在构造器里。directive自定义指令在构造vue实例的构造器之外,注册一个全局自定义指令 Vue.directive("指令名称",{操作}),自定义指令定义的操作可以提供几个钩子函数(5个均为可选):(1) bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。(2) inse...原创 2018-04-11 11:32:27 · 262 阅读 · 0 评论 -
vue学习—vue.extend
使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。data 选项是特例,需要注意在 Vue.extend() 中data必须是函数.创建 实例,并挂载到一个元素上。<body> <h1>v.extend </h1> <div id="header"> </div> <script&原创 2018-04-11 11:49:11 · 498 阅读 · 0 评论 -
vue学习—Vue.set
什么是外部数据,就是不在Vue构造器里里的data处声明,而是在构造器外部声明,然后在data处引用就可以了。Vue.set 的作用就是在构造器外部操作构造器内部的数据、属性或者方法。比如在vue构造器内部定义了一个count为1的数据,我们在构造器外部定义了一个方法,要每次点击按钮给值加1.就需要用到Vue.set。vue.set很少用得到,但是当我们利用索引直接设置一个项时,vue不会为我们自...原创 2018-04-11 14:30:20 · 238 阅读 · 0 评论 -
Vue学习—选项(三)watch
watch:{ [key: string]: string | Function | Object | Array } ,一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性。<body> <h1>watch</h1> <di...原创 2018-04-16 16:11:39 · 422 阅读 · 0 评论 -
Vue学习—选项(二)methods
1. methods 将被混入到 Vue 实例中。可以直接通过 app实例访问这些方法,或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。不应该使用箭头函数来定义 method 函数 (例如 plus: () =>this.a++)。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例,this.a 将是 undefined。2....原创 2018-04-16 11:08:28 · 3847 阅读 · 0 评论 -
Vue学习—选项(一)
propsData:只用于 new 创建的实例中。创建实例时传递 props。主要作用是方便测试。一般用得很少<body> <h1>propsData</h1> <div id="header"> </div> <script> var header_aa = Vue.extend({原创 2018-04-12 16:38:31 · 154 阅读 · 0 评论 -
vue学习—组件03
如下代码,建立父子组件关系时报错: Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead. 这个错误翻译为:模板语法错误组件模板应该正好包含一个根元素,如果你使用的是v-i...原创 2018-04-12 14:40:35 · 244 阅读 · 0 评论 -
Vue学习—组件02
组件组合:组件设计初衷就是要配合使用的,最常见的就是形成父子组件的关系:组件 A 在它的模板中使用了组件 B。它们之间必然需要相互通信:父组件可能要给子组件下发数据,子组件则可能要将它内部发生的事情告知父组件。然而,通过一个良好定义的接口来尽可能将父子组件解耦也是很重要的。这保证了每个组件的代码可以在相对隔离的环境中书写和理解,从而提高了其可维护性和复用性。在 Vue 中,父子组件的关系可以总结为...原创 2018-04-12 11:47:13 · 228 阅读 · 0 评论 -
Vue学习—组件01
组件 (Component) 是 Vue最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue的编译器为它添加特殊功能。在有些情况下,组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。所有的Vue 组件同时也都是 Vue 的实例,所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。全局化注册组件组件在注册之...原创 2018-04-12 10:25:17 · 172 阅读 · 0 评论 -
Vue学习—Vue模板的写法
选项模板:不需要外部构造器,直接渲染到作用域视图中,使用与比较少的内容量可以使用它,可以利用ES6模板字符串``的方式来实现,也可以直接用字符串即"<h1 style="color:red">我是选项模板</h1>",这时template和data、el一样都是Vue实例的一个选项,所以叫做选项模板。<body> <h1>模板的写法—01<原创 2018-04-11 17:13:30 · 1904 阅读 · 0 评论 -
Vue学习—生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。注意生命周期钩子的 this 上下文指向调用它的 Vue 实例。不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.f...原创 2018-04-11 15:56:53 · 293 阅读 · 0 评论 -
Vue学习—vue-resource
Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没有必要引入jQuery。vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的API更为简洁。另外,vue-resou...原创 2018-04-20 14:37:56 · 363 阅读 · 0 评论