Vue變量
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>變量</title>
</head>
<body>
<div id="app">
<p>{{ msg }}</p>
<p>{{ info }}</p>
<h3>{{ msg }}</h3>
</div>
<div id="main">
<p>{{ msg }}</p>
<p>{{ info }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 實例成員中的data是為vue頁面模板通過數據變量的
let app = new Vue({
el: '#app',
data: {
msg: 'message',
info: 'vue變量信息'
}
});
let main = new Vue({
el: '#main',
data: {
msg: 'msg',
info: 'info'
}
});
console.log(app.info);
console.log(main.info);
// 創建vue實例（new Vue）傳進去的字典(對象)的key，稱之為vue實例成員(變量)
// 訪問實例成員，用 vue實例.$成員名, eg：app.$el
console.log(app.$el);
console.log(app.$data);
console.log(app.$data.info);
</script>
</html>
分隔符成員
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>分隔符</title>
</head>
<body>
<div id="app">
<p>{{ num }}</p>
<!--<p>{[ num ]}</p>-->
<p>{ num ]}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
num: 100
},
// 用來修改插值表達式符號
// delimiters: ['{[', ']}'],
delimiters: ['{', ']}'],
})
</script>
</html>
計算屬性成員
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<input type="text" v-model="v1">
+
<input type="text" v-model="v2">
=
<button>{{ res }}</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
v1: '',
v2: '',
// res: '結果',
},
// 1、computed中定義的是方法屬性，data中定義的也是屬性，所以不需要重復定義(省略data中的)
// 2、方法屬性的值來源於綁定的方法的返回值
// 3、方法屬性必須在頁面中渲染后，綁定的方法才會被啟用(調用)
// 4、方法中出現的所有變量都會被監聽，任何變量發生值更新都會調用一次綁定的方法，重新更新一下方法屬性的值
// 5、方法屬性值不能手動設置，必須通過綁定的方法進行設置
computed: {
res () {
console.log('該方法被調用了');
return this.v1 && this.v2 ? +this.v1 + +this.v2 : '結果';
}
}
})
</script>
<script>
console.log(1 + '2');
console.log(1 - '2');
console.log(+'2');
</script>
</html>
屬性監聽
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>屬性的監聽</title>
</head>
<body>
<div id="app">
<p>
姓名：<input type="text" v-model="full_name">
</p>
<p>
姓：<span>{{ first_name }}</span>
</p>
<p>
名：<span>{{ last_name }}</span>
</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
full_name: '',
first_name: '',
last_name: '',
},
watch: {
// 1、watch中給已有的屬性設置監聽方法
// 2、監聽的屬性值一旦發生更新，就會調用監聽方法，在方法中完成相應邏輯
// 3、監聽方法不需要返回值(返回值只有主動結束方法的作用)
full_name() {
if (this.full_name.length === 2) {
k_v_arr = this.full_name.split('');
this.first_name = k_v_arr[0];
this.last_name = k_v_arr[1];
}
}
}
})
</script>
</html>
