遇到的坑:
1.问题:数组的更新及Object对象的属性更新后,vue视图没有及时更新
解决方案:先清空数组或对象再赋值新值 | 更新数组某一项可使用arrayObj.$set(index, newValue)方法
2.vue内置事件执行顺序
init -> created -> beforeCompile -> compiled -> attached -> ready
初始化 创建完成 编译前 编译完成 绑定事件 加载完成
detached 解绑事件
beforeDestroy 销毁前
destroyed 销毁完成
3.将数据及模板编译后填充到对应的元素内
var aVue = new Vue({ data: { firstName: 'Walter', lastName: 'White', alias: 'Heisenberg' }, template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>' });
aVue.$mount(‘#editor-box');
4.修改vm的值后,视图更新的回调
var vm = new Vue({
el: '#example',
data: {
msg: '123'
}
})
vm.msg = 'new message'// change data
vm.$el.textContent === 'new message'// false
Vue.nextTick(function () {
vm.$el.textContent === 'new message'// true
})
var vm = new Vue({
data: {
msg: 'hi'
},
computed: {
example: function () {
return Date.now() + this.msg
}
}
})
5.属性合并
全局组件属性定义,其他所有组件都会继承到其中的定义
Vue.mixin({
created: function () {
var myOption = this.$options.myOption
if (myOption) {
console.log(myOption)
}
}
})
局部属性定义及合并
var mixin = {
created: function () {
console.log('mixin hook called')
}
}
new Vue({
mixins: [mixin],
created: function () {
console.log('component hook called')
}
})
// -> "mixin hook called"
// -> "component hook called"
6.过滤器
// 默认传入当前值
Vue.filter('reverse', function (value) {
return value.split('').reverse().join('')
})
<!-- 'abc' => 'cba' -->
<span v-text="message | reverse"></span>
// 动态参数
Vue.filter('reverse', function (value, otherArg) {
console.log(otherArg); // true
return value.split('').reverse().join('')
})
<!-- 'abc' => 'cba' -->
<span v-text="message | reverse true"></span>
// 针对v-model的过滤器(双向数据绑定的值)
Vue.filter('currencyDisplay', {
// model -> view
// formats the value when updating the input element.
read: function(val) {
return'$'+val.toFixed(2)
},
// view -> model
// formats the value when writing to the data.
write: function(val, oldVal) {
var number = +val.replace(/[^\d.]/g, '')
returnisNaN(number) ? 0 : parseFloat(number.toFixed(2))
}
})
<input type="text" v-model="money | currencyDisplay"> | |
<p>Model value: {{money}}</p> |
7.自定义指令
# 示例1
<div id="demo" v-demo:hello.a.b="msg"></div>
|
Vue.directive('demo', {
bind: function () {
console.log('demo bound!')
},
update: function (value) {
this.el.innerHTML =
'name - ' + this.name + '<br>' +
'expression - ' + this.expression + '<br>' +
'argument - ' + this.arg + '<br>' +
'modifiers - ' + JSON.stringify(this.modifiers) + '<br>' +
'value - ' + value
},
unbind: function(){
console.log(‘demo unbind...');
}
})
var demo = new Vue({
el: '#demo',
data: {
msg: 'hello!'
}
})
|
#示例2
<div v-demo="{ color: 'white', text: 'hello!' }"></div>
Vue.directive('demo', function (value) {
console.log(value.color) // "white"
console.log(value.text) // "hello!"
})
8.组件
#异步组件
Vue.component('async-example', function (resolve, reject) {
setTimeout(function () {
resolve({
template: '<div>I am async!</div>'
})
}, 1000)
})
Vue.component('async-webpack-example', function (resolve) {
// this special require syntax will instruct webpack to
// automatically split your built code into bundles which
// are automatically loaded over ajax requests.
require(['./my-async-component'], resolve)
})
|
# 注册及使用
<div id="example">
<my-component></my-component>
</div>
// define
var MyComponent = Vue.extend({
template: '<div>A custom component!</div>'
})
// register
Vue.component('my-component', MyComponent)
// create a root instance
new Vue({
el: '#example'
})
#组件继承
var Child = Vue.extend({ /* ... */ })
var Parent = Vue.extend({
template: '...',
components: {
// <my-component> will only be available in Parent's template
'my-component': Child
}
})
#组件动态参数传递
<div>
<input v-model="parentMsg">
<br>
<child v-bind:my-message="parentMsg"></child>
<!— <child :my-message="parentMsg"></child> ->
</div>
Vue.component('child', {
// camelCase in JavaScript
props: ['myMessage'],
template: '<span>{{ myMessage }}</span>'
})
// 属性绑定不同写法的差异
<!-- this passes down a plain string “1” 1为字符串类型 -->
<comp some-prop="1"></comp>
<!-- this passes down an actual number 1为数字类型 -->
<comp :some-prop="1"></comp>
# v-on for Custom Events 给子组件绑定自定义事件
<child v-on:child-msg="handleIt"></child>
#子组件引用
<div id="parent">
<user-profile v-ref:profile></user-profile>
</div>
var parent = new Vue({ el: '#parent' })
// access child component instance
var child = parent.$refs.profile
#single slot
For example, suppose we have a
multi-insertion
component with the following template:
<div>
<slot name="one"></slot>
<slot></slot>
<slot name="two"></slot>
</div>
|
Parent markup:
<multi-insertion>
<p slot="one">One</p>
<p slot="two">Two</p>
<p>Default A</p>
</multi-insertion>
|
The rendered result will be:
<div>
<p slot="one">One</p>
<p>Default A</p>
<p slot="two">Two</p>
</div>
|
<my-component
:foo="baz"
:bar="qux"
@event-a="doThis"
@event-b="doThat">
<!-- content -->
<img slot="icon" src="...">
<p slot="main-text">Hello!</p>
</my-component>
9.组件场景切换动画
<div v-if="show" transition="expand">hello</div>
new Vue({
el: '...',
data: {
show: false,
transitionName: 'fade'
}
})
/* always present */
.expand-transition {
transition: all .3s ease;
height: 30px;
padding: 10px;
background-color: #eee;
overflow: hidden;
}
/* .expand-enter defines the starting state for entering */
/* .expand-leave defines the ending state for leaving */
.expand-enter, .expand-leave {
height: 0;
padding: 010px;
opacity: 0;
}
Vue.transition('bounce', {
// Vue will now only care about `animationend` events
// for this transition
type: ‘animation',
enterClass: 'bounceInLeft',
leaveClass: 'bounceOutRight'
})
// 场景切换动画 - 事件监听
Vue.transition('expand', {
beforeEnter: function (el) {
el.textContent = 'beforeEnter'
},
enter: function (el) {
el.textContent = 'enter'
},
afterEnter: function (el) {
el.textContent = 'afterEnter'
},
enterCancelled: function (el) {
// handle cancellation
},
beforeLeave: function (el) {
el.textContent = 'beforeLeave'
},
leave: function (el) {
el.textContent = 'leave'
},
afterLeave: function (el) {
el.textContent = 'afterLeave'
},
leaveCancelled: function (el) {
// handle cancellation
}
})
相关推荐
Vue.js前端开发实战-自测卷和课后习题答案.rar
Vue.js是一个数据驱动的web界面库。Vue.js只聚焦于视图层,可以很容易的和其他库整合。代码压缩后只有24kb。 以下代码是Vue.js最简单的例子, 当 input 中的内容变化时,p 节点的内容会跟着变化。 <!-- ...
数据绑定 ...message:Hello,vue.js! } 2.双向绑定 <p>{{message}} <input v-model=message /> var app = new Vue({ el:#app, data:{ message:Hello,vue.js! } 3.v-for列表渲染 <ul>
在项目中,我们时常会遇到动态的去绑定操作切换不同的CSS样式,结合自身项目中遇到的一些情况,也参考了一些文档,针对vue.js样式的动态绑定切换做出如下小结: 动态切换的核心思想: 利用vue指令v-bind来实现动态...
给大家介绍了Vue.js 表单控件操作的相关知识,本文通过实例演示了input和textarea元素中使用v-model的方法,本文给大家介绍的非常不错,具有参考借鉴价值,需要的朋友参考下吧
最近小编在学习vue.js ,发现里面有好多好玩的东东,今天小编给大家分享Vue.js2.0中的变化,小编会在日后给大家持续更新的,感兴趣的朋友参考下吧
import Button from 'element-ui/lib/Button.js' import Button from 'element-ui/lib/theme-chalk/Button.css' Vue.use(Button); 上面的写法比较繁琐,而且需要知道每个组件的实际路径,使用起来并不方便,所以我们...
主要介绍了Vue.js常用指令的使用,非常不错,具有参考借鉴价值,需要的朋友可以参考下
vue入门教程系列源码,小白级别入门教程,包含12个小结的源代码。
主要介绍了构建大型 Vue.js 项目的10条建议(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
由于最近在做一些前端的项目,并且接手了Weex的项目,所以难免和Vue打起了交道,js也是从入门到学习中。项目里用到了Vue的插件机制,所以看了看Vue.use的源码,还是比较简单的,适合新手阅读,所以记录下来以免遗忘...
3.1.2Vue.js 架构 3.1.3负载均衡简介 3.1.4 Redis 集群简介 3.2系统工作流程 3.3数据库设计 3.4系统功能模块设计 3.4.1代理商管理页面 3.4.2共享设备管理页面 3.4.3产品及套餐管理页面 3.4.4共享订单分成提现页面 ...
主要给大家汇总介绍了Vue中fragment.js使用方法的相关资料,需要的朋友可以参考下