目錄
- Vue實體最后掛載el容器
- data給一個函式
- Vue參考MVVM模型
- 物件的操作
- vscode開發工具小技巧
Vue實體最后掛載el容器
<script type="text/javascript">
//global config
Vue.config.productionTip = false
const v = new Vue({
// el: '#test',
data: {
name: 'jack',
}
})
// 最后掛載到容器中
v.$mount("#test")
</script>
data給一個函式
在函式的內部必須放回一個物件{ }
<script type="text/javascript">
Vue.config.productionTip = false
const v = new Vue({
el: '#test',
//data: {
// name: 'jack',
//}
data: function(){
//this 是Vue的實體物件
return {name:"jack"}
}
//簡寫
data1(){
return {name: "lucy"}
}
})
// 最后掛載到容器中
v.$mount("#test")
</script>
Vue參考MVVM模型
data中的所有屬性，最終賦給在Vue實體！
Vue實體的所有屬性及原型中的屬性 都可以在模板中使用
const vm = new Vue({xxx})
物件的操作
let a = {
name: "jack",
age: 23,
sex: "male",
}
//直接寫的物件屬性，可以任意更新、洗掉、遍歷
Object.defineProperty(a, "addr", {
value: "xxxx",
enumerable: true, //控制是否可以遍歷，為false時，無法遍歷Object.keys(obj)獲取不到該屬性
writable: true， //控制是否可以更改
configurable: true，//控制是否可以洗掉 delele a.addr
get(){ //獲取屬性addr時執行該方法 即getter
return 'xxx'
}
set(value){ //設定屬性時，執行該方法 即setter
b = value
}
})
vscode開發工具小技巧
定義代碼片段：
- 點擊左下角的齒輪（管理）
- 選擇’用戶代碼片段‘
- 新建代碼片段
"vue":{
"prefix": "v1", //代碼指令
"body":[ //代碼內容
"new Vue({",
"el: '#test',",
"data: {",
"name: 'jack',",
"}",
"})",
],
}
- 在vscode中輸入 v1 + tab 就會輸入定義的代碼內容，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/379461.html
標籤：其他