选项/数据
data
-
类型： Object | Function
-
限制： 组件的定义只接受function
var data = { a: 1 } // 直接创建一个实例 var vm = new Vue({ data: data }) vm.a // => 1 vm.$data === data // => true // Vue.extend() 中 data 必须是函数 var Component = Vue.extend({ data: function () { return { a: 1 } } })
props
-
类型：Array
| Object -
详细：
-
props可以是数组或对象，用于接收来自父组件的数据。props可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测，自定义校验和设置默认值
// 简单语法 Vue.component('props-demo-simple', { props: ['size', 'myMessage'] }) // 对象语法，提供校验 Vue.component('props-demo-advanced', { props: { // 检测类型 height: Number, // 检测类型 + 其他验证 age: { type: Number, default: 0, required: true, validator: function (value) { return value >= 0 } } } })
propsData
-
类型：{[key:string]:any}
-
限制：只用于new创建的实例中
-
详细：创建实例时传递props。主要作用是方便测试
var Comp = Vue.extend({ props: ['msg'], template: '<div>{{ msg }}</div>' }) var vm = new Comp({ propsData: { msg: 'hello' } }) -
propsData Option 全局扩展的数据传递
<h1>PropsData Option Demo</h1> <hr> <header></header> <script src="vue.js"></script> <script type="text/javascript"> var header_a = Vue.extend({ template:`<p>{{message}}</p>`, data:function(){ return { message: 'Hello ,I am Header' } } }); new header_a().$mount('header'); </script> -
我们用propsData三步解决传值
-
1，在全局扩展里加入props进行接收。propsData:{a:1}
-
2、传值时用propsData进行传递。props:['a']
-
3、用插值的形式写人模板。{{a}}
var header_a = Vue.extend({ template:`<p>{{message}}--{{a}}</p>`, data:function(){ return { message: 'Hello ,I am Header' } }, props: ['a'] }); new header_a({propsData:{a:1}}).$mount('header');
computed
-
类型：{[key:string]:Function | {get: Function,set:function}}
-
详细：计算属性将被混入到vue实例中。所有getter和setter的this上下文自动地绑定为vue实例
-
计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。注意，如果某个依赖（比如非响应式属性）在改实例范畴之外，则计算属性是不会被更新的
var vm = new Vue({ data: { a: 1 }, computed: { // 仅读取 aDouble: function () { return this.a * 2 }, // 读取和设置 aPlus: { get: function () { return this.a + 1 }, set: function (v) { this.a = v - 1 } } } }) vm.aPlus // => 2 vm.aPlus = 3 vm.a // => 2 vm.aDouble // => 4
Computed Option
<h1>Computed Option 计算选项</h1>
<hr>
<div id="app">
{{newPrice}}
</div>
<script src="vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
price: 100
},
computed:{
newPrice:function(){
return this.price='￥'+this.price+'元'
}
}
})
</script>
methods
-
类型：{[key:string]:Function}
-
详细：
-
methods将混入到vue实例中，可以直接通过VM实例访问这些方法，或者在指令表达式中使用。方法中的this自动绑定为Vue实例
var vm = new Vue({ data: { a: 1 }, methods: { plus: function () { this.a++ } } }) vm.plus() vm.a // 2
Methods Option
<h1>Methods Option 方法选项</h1>
<hr>
<div id="app">
{{a}}
<p><button @click="add">add</button></p>
</div>
<script src="vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
a:1
},
methods:{
add:function(){
this.a++
}
}
})
</script>
watch
-
类型：{[key:string]:string | Function | Object | Array }
-
详细：
-
一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue实例将会在实例化时调用$watch(),遍历watch对象的每一个属性
var vm = new Vue({ data: { a: 1, b: 2, c: 3, d: 4, e: { f: { g: 5 } } }, watch: { a: function (val, oldVal) { console.log('new: %s, old: %s', val, oldVal) }, // 方法名 b: 'someMethod', // 深度 watcher c: { handler: function (val, oldVal) { /* ... */ }, deep: true }, // 该回调将会在侦听开始之后被立即调用 d: { handler: function (val, oldVal) { /* ... */ }, immediate: true }, e: [ function handle1 (val, oldVal) { /* ... */ }, function handle2 (val, oldVal) { /* ... */ } ], // watch vm.e.f's value: {g: 5} 'e.f': function (val, oldVal) { /* ... */ } } }) vm.a = 2 // => new: 2, old: 1
watch
<h1>Watch 选项 监控数据</h1>
<hr>
<div id="app">
<p>今日温度：{{temperature}}°C</p>
<p>穿衣建议：{{this.suggestion}}</p>
<p>
<button @click="add">添加温度</button>
<button @click="reduce">减少温度</button>
</p>
</div>
<script src="vue.js"></script>
<script type="text/javascript">
var suggestion = ['T恤短袖','夹克长裙','棉衣羽绒服']
var app = new Vue({
el:'#app',
data:{
temperature: 14,
suggestion: '夹克长裙'
},
methods:{
add:function(){
this.temperature+=5;
},
reduce:function(){
this.temperature-=5;
}
},
watch:{
temperature:function(newVal,oldVal){
if(newVal>=26){
this.suggestion=suggestion[0];
}else if(newVal<26 && newVal >=0)
{
this.suggestion=suggestion[1];
}else{
this.suggestion=suggestion[2];
}
}
}
})
</script>
-
用实例属性写watch监控
app.$watch('xxx',function(){})
选项/DOM
el
- 类型：string | HTMLElement
- 限制：只在new创建的实例中遵守
- 详细
- 提供一个页面上已存在的DOM元素作为Vue实例的挂载目标。可以是css选择器，也可以是一个HTMLElement实例
- 在实例挂载之后，元素可以用vm.$el访问
- 如果这个选项在实例化时有作用，实例将立即进入编译过程，否则，需要显示调用vm.$mount()手动开启编译
template
- 类型：string
- 详细
- 一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽。
- 如果值以 # 开始，则它将被用作选择符，并使用匹配元素的 innerHTML 作为模板。常用的技巧是用
<script type="x-template">包含模板。
render
- 类型：(createElement:() => VNode) => Vnode
- 详细
- 字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。
- 如果组件是一个函数组件，渲染函数还会接收一个额外的 context 参数，为没有实例的函数组件提供上下文信息。
选项/组合
mixins
mixins一般有两种用途
-
1、在你已经写好了构造器后，需要增加方法或者临时的活动时使用的方法，这时用混入会减少源代码的污染。
-
2、很多地方都会用到的公用方法，用混入的方法可以减少代码量，实现代码重用。
<h1>Mixins Option Demo</h1> <hr> <div id="app"> <p>num:{{num}}</p> <p><button @click="add">增加数量</button></p> </div> <script src="vue.js"></script> <script type="text/javascript"> var addLog = { updated:function(){ console.log('数据发生变化，变化成'+this.num+".") } } var app = new Vue({ el: '#app', data:{ num: 1 }, methods:{ add:function(){ this.num++; } }, updated:function(){ console.log('构造器里的updated方法。') }, mixins:[addLog]//混入 }) // Vue.mixin({ //全局混入的执行顺序要前于混入和构造器里的方法。 // updated:function(){ // console.log('我是全局被混入的') // } // }) </script>
extends 扩展选项
<h1>Extends Option Demo</h1>
<div id="app">
{{message}}
<p><button @click="add">增加数量</button></p>
</div>
<script src="vue.js"></script>
<script type="text/javascript">
var bbb = {
created:function(){
console.log('我是被扩展出来的')
},
methods:{
add:function() {
console.log('我是被扩展出来的方法！')
}
}
}
var app = new Vue({
el: '#app',
data:{
message: 'hello Vue!'
},
methods:{
add:function(){
console.log('我是原生方法')
}
},
updated:function(){
console.log('构造器里的updated方法。')
},
extends:bbb
})
</script>
选项/其他
delimiters 选项
-
delimiters的作用是改变我们插值的符号。Vue默认的插值是双大括号{{}}。但有时我们会有需求更改这个插值的形式
delimiters:['${','}'] -
现在插值形式就变成${}。