(エッセンス2020年5月5日更新)vueチュートリアル編vueインスタンス属性の使用
29448 ワード
静的インスタンスのプロパティ
ダイナミックインスタンスプロパティcrudはdataにないフィールドです.通常の設定では、dataにフィールドをリアルタイムで追加したり削除したりすることはできません.
データレンダリング完了強制変更のインスタンスメソッド
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue </title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="itapp">
{{msg}}
<h2 ref="hello">hello</h2>
<p ref="world">world</p>
<h1 ref="title">title：{{nameK}}</h1>
</div>
<script>
var vm = new Vue({
// el:'#app',
data: {
msg: 'welcome to app',
nameK: 'xixihaha'
},
name: 'xut',
age: 10,
show: function () {
console.log('show');
},
methods: {
},
mounted() {}
});
vm.$mount('#app');// vue
vm.$destroy() //
// ：vm. ， data
console.log(vm.msg)
// vm.$el vm
console.log(vm.$el)
vm.$el.style.color="red";
// vm.$data data
console.log(vm.$data)
// vm.$options
console.log(vm.$options)
console.log(vm.$options.name)
console.log(vm.$options.age)
vm.$options.show();
// vm.$refs : ref
console.log(vm.$refs);
console.log(vm.$refs.hello);
vm.$refs.hello.style.color = 'red';
// dom
vm.$nextTick(callback)
//dom ， vue ， dom ，
console.log(vm.msg);
vm.nameK = " ";
console.log(vm.$refs.title.textContent)
//
setTimeout(() => {
console.log('setTimeout');
console.log(vm.$refs.title.innerHTML)
}, 0)
//
vm.$nextTick(function () {
console.log('nextTick');
console.log(vm.$refs.title.innerHTML)
});
// $nextTick :
//
vm.msg = 'Hello'
// DOM
Vue.nextTick(function () {
// DOM
console.log('vm.msg', vm.msg);
})
</script>
</body>
</html>
ダイナミックインスタンスプロパティcrudはdataにないフィールドです.通常の設定では、dataにフィールドをリアルタイムで追加したり削除したりすることはできません.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> ：$set、$delete</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="doUpdate"> </button>
<button @click="doAdd()"> </button>
<button @click="doDelete"> </button>
<hr>
{{user}}
<h2>{{user.name}}</h2>
<h2>{{user.age}}</h2>
</div>
<script>
var vm = new Vue({
el: '#app',
// data(){
// return {
// name:'ss'
// }
// },
data: {
user: {
id: 1001,
name: 'tom'
}
},
methods: {
doUpdate() {
this.user.name = ' ';
},
doAdd() {
// this.user.age=25; // vue
// this.$set(this.user,'age',25); // vue $set ，
if (this.user.age) {
this.user.age++;
} else {
Vue.set(this.user, 'age', 20);
}
},
doDelete() {
if (this.user.age) {
//delete this.user.age; // ，
this.$delete(this.user, 'age'); //
// Vue.delete(this.user,'age'); //vue
}
}
}
});
</script>
</body>
</html>
データレンダリング完了強制変更のインスタンスメソッド
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> ：$forceUpdate</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{user.name}}
<!-- {{user.age}} -->
{{country}}
</div>
<script>
var vm = new Vue({
el: '#app',
data() {
return {
user: {
name: 'song'
}
}
},
methods: {
},
created() {
},
beforeMount() {
this.country = 'china';
},
mounted() {
// beforeMount
this.country = ' ';
//this.$set(this,'country',' '); //
this.$forceUpdate(); // vue
}
})
</script>
</body>
</html>