一. 新建一個Vue實例可以有下列兩種方式：
1.new一個實例
var app= new Vue({
el:'#todo-app', // 掛載元素
data:{ // 在.vue組件中data是一個函數，要寫成data () {}這種方式
items:['item 1','item 2','item 3'],
todo:''
},
methods:{ // 方法成員
rm:function(i){
this.items.splice(i,1)
}
}
})
// 之后再
export default app // 默認輸出，可在其他組件引用
2. 直接
export default {
name: '',
components: {},
data: () {}, // data函數成員
watch: {}, // watch監視成員
computed: {}， // computed計算成員
created: function () {},
methods: {}, // methods對象成員
actions: {}
}
二. Vue實例，我參數options。它是一個對象?？梢赃x擇如下選項：
data函數成員
methods對象成員
模板template
掛載元素el
生命周期鉤子
props屬性聲明
computed計算成員
watch監視成員
選項：watch監視
watch監視是一個對象，鍵是需要觀察的表達式，值可以是
1.回調函數，
2.值也可以是方法名，
3.或者包含選項的對象。
ps:表達式暫時可以理解為一個可以得到值的式子
Ⅰ回調函數，來監視一個值的變化（監視data函數體的變量）
如：
data () {
return {
replaceList: []
}
},
watch: {
replaceList: function (val, oldVal) {
console.log('replaceList changed')
}
}
Ⅱ第2種形式：”值也可以是方法名“，可以把watch的函數移到methods內。
則上面的形式可以改為：
data () {
return {
replaceList: []
}
},
watch: {
replaceList: 'changed'
}，
methods: {
changed: function (val, oldVal) {
console.log('replaceList changed')
}
}
Ⅲ包含選項的對象
如：上面兩種就等同于
data () {
rerurn {
replaceList: 1
}
},
mounted: function () {
this.$watch('replaceList',function(val, oldVal){
console.log('replaceList changed')
})
},
methods: {
}
選項：computed計算成員
雖然在Mustache語法內可以使用表達式，即{{}}。比如為數字前加入￥符號，可以使用表達式：
{{‘￥'+money}}
可以，但不推薦。這種情形應盡量用計算成員：
在vue-cli腳手架的.vue組件中
實現RMB前加上美元符號
<template>
<input v-model="money"> // 響應式的
<span>{{RMB}}</span> // {{}}中可以是變量，也可以是方法名
</template>
<script>
data () {
rerurn {}
},
computed: {
RMB: function () {
return '￥'+ this.money
}
}
</script>
引入了計算成員RMB來做長表達式的計算，而在HTML內保持清晰的字段引用即可。這樣做依然可以享有響應式編程的好處：當money值改變時，引用RMB的標簽值也會被自動更新。
以上這篇Vue實例的對象參數options的幾個常用選項詳解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
