关于Vue.js的一些总结(1)
2017-04-01 17:47
861 查看
下面记录一些vue中的skill.
1、如何获取vuejs powered plain data?
有时候我们可能需要一个未经vuejs define propery(get/set)处理过的原始js数据,一个workaround方案:
2、所有Vue实例本身暴露的属性和方法,都以$为头来区别,对应Vue.set global API
例如:vm.$data,vm.$elvm.$watch,这个有利于和data属性对象的数据来区分;
3、v-for列表数据渲染(注意在v-for子块内可以访问父组件作用域内的属性,还有一个$index)
4、v-on内联语句访问event参数:如果是一个函数作为v-on绑定的表达式的话,该函数自动带有(event参数),这个和普通的js事件处理函数是一样的。
5、在vuejs2.0中初次mount的组件并不会调用watch,而只有数据变化后才会调用
6、chrome下vue dev-tool无法显示问题
您还可以使用
有时你想向已有对象上添加一些属性,例如使用
7、Vue 不允许在已经创建的实例上动态添加新的根级响应式属性(root-level reactive
property)。然而它可以使用
您还可以使用
有时你想向已有对象上添加一些属性,例如使用
8、vm.$nextTick() vs Vue.nextTick(callback)
到底nextTick是干什么的:
看一个牛人的回答: it's a way to execute a callback function after the data is set.
To add an example to that, lets say you have a jQuery plugin that creates
a pie chart. The data on those charts are fetched and set by vuejs. You can't initialize the charts until after the data is set / until the "next tick". Here's a quick example...
https://jsfiddle.net/kr9b4o8f/
If you try to initialize the charts without
9、什么是抽象组件以(transition组件为例)?
抽象组件具有以下特点:
1. 它是以引入功能而不是构建视图为目的而存在的
2. 它不会在DOM中有任何节点
3. 它也不会在inspect component hierarchy中显示出来
抽象组件和无template的组件有什么区别??
非常典型的例子是vuejs2.0中引入的transition组件:
10、路由嵌套
路由嵌套会将其他组件渲染到该组件内,而不是进行整个页面跳转
这里首先将根组件注册进来,用于将路由中配置好的各个页面渲染出来,然后将根组件挂载到与#app匹配的元素上。
1、如何获取vuejs powered plain data?
有时候我们可能需要一个未经vuejs define propery(get/set)处理过的原始js数据,一个workaround方案:
JSON.parse(JSON.stringify($vm.action.roles))
2、所有Vue实例本身暴露的属性和方法,都以$为头来区别,对应Vue.set global API
例如:vm.$data,vm.$elvm.$watch,这个有利于和data属性对象的数据来区分;
3、v-for列表数据渲染(注意在v-for子块内可以访问父组件作用域内的属性,还有一个$index)
4、v-on内联语句访问event参数:如果是一个函数作为v-on绑定的表达式的话,该函数自动带有(event参数),这个和普通的js事件处理函数是一样的。
<button v-on:click="say('hello!', $event)">Submit</button> // ... methods: { say: function (msg, event) { // 现在我们可以访问原生事件对象 event.preventDefault() } }
5、在vuejs2.0中初次mount的组件并不会调用watch,而只有数据变化后才会调用
6、chrome下vue dev-tool无法显示问题
Vue.config.devtools = true; //在new Vue()之前执行 //Vue.config.debug = true; //window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = Vue;Vue 不允许在已经创建的实例上动态添加新的根级响应式属性(root-level reactive property)。然而它可以使用
Vue.set(object, key, value)方法将响应属性添加到嵌套的对象上:
Vue.set(vm.someObject, 'b', 2) |
vm.$set实例方法,这也是全局
Vue.set方法的别名:
this.$set(this.someObject,'b',2) |
Object.assign()或
_.extend()方法来添加属性。但是,添加到对象上的新属性不会触发更新。在这种情况下可以创建一个新的对象,让它包含原对象的属性和新的属性:
// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 }) |
property)。然而它可以使用
Vue.set(object, key, value)方法将响应属性添加到嵌套的对象上:
Vue.set(vm.someObject, 'b', 2) |
vm.$set实例方法,这也是全局
Vue.set方法的别名:
this.$set(this.someObject,'b',2) |
Object.assign()或
_.extend()方法来添加属性。但是,添加到对象上的新属性不会触发更新。在这种情况下可以创建一个新的对象,让它包含原对象的属性和新的属性:
// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 }) |
到底nextTick是干什么的:
看一个牛人的回答: it's a way to execute a callback function after the data is set.
To add an example to that, lets say you have a jQuery plugin that creates
a pie chart. The data on those charts are fetched and set by vuejs. You can't initialize the charts until after the data is set / until the "next tick". Here's a quick example...
https://jsfiddle.net/kr9b4o8f/
If you try to initialize the charts without
nextTick(), it won't work because the data has not been changed yet.
<div id="example">{{msg}}</div> 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 }) // 对于component下面的调用方法 Vue.component('example', { template: '<span>{{msg}}</span>', data: function () { return { msg: 'not updated' } }, methods: { updateMessage: function () { this.msg = 'updated' console.log(this.$el.textContent) // => 'not updated' this.$nextTick(function () { console.log(this.$el.textContent) // => 'updated' }) } } })
9、什么是抽象组件以(transition组件为例)?
抽象组件具有以下特点:
1. 它是以引入功能而不是构建视图为目的而存在的
2. 它不会在DOM中有任何节点
3. 它也不会在inspect component hierarchy中显示出来
抽象组件和无template的组件有什么区别??
非常典型的例子是vuejs2.0中引入的transition组件:
<transition> <div v-if="ok">toggled content</div> </transition>
10、路由嵌套
路由嵌套会将其他组件渲染到该组件内,而不是进行整个页面跳转
router-view本身就是将组件渲染到该位置,想要进行页面跳转,就要将页面渲染到根组件,在起始配置路由时候写到:
var App = Vue.extend({ root }); router.start(App,'#app');
这里首先将根组件注册进来,用于将路由中配置好的各个页面渲染出来,然后将根组件挂载到与#app匹配的元素上。
相关文章推荐
- 关于Vue.js的一些总结(2)
- 关于MFC中CDHtmlDialog嵌入flash和调用JS一些技术总结
- js关于事件的一些总结(系列一)
- 关于html,servlet、css、js一些总结
- 第三方工具 - 关于echarts下钻功能的一些总结.js
- 关于JS和浏览器的一些总结
- 关于vue的一些总结
- 关于vue.js v-bind 的一些理解和思考
- 关于js设计模式的一些总结和理解
- 关于cometd的一些经验总结-js端
- 关于Vue.js一些问题和思考学习笔记(2)
- js 关于node节点的一些总结
- vue.js(2.0)常用指令总结以及一些指令的坑!
- 关于Vue.js一些问题和思考学习笔记(1)
- 关于JS解析机制、作用域的一些总结
- js-关于性能优化的一些学习总结
- 关于vue.js弹窗组件的知识点总结
- 关于js运动的一些总结
- 关于js的一些总结
- 收集关于angular与JS的一些常见问题 总结