Vue.js之Vue計算屬性、偵聽器、樣式綁定
前言
上一篇介紹了Vue的基本概念，這一篇介紹一下Vue的基本使用。javascript
1、搭建一個Vue程序
1.1 搭建Vue環境
搭建Vue的開發環境總共有三種方法：css
- 引入CDN
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
- 直接下載源碼引入
從官網中下載vue.js的源碼複製下來便可，而後在頁面中引入
地址：https://cn.vuejs.org/v2/guide/installation.html
點擊開發版本，直接複製到已經建立好的vue.js的文件當中便可。
- NPM安裝
1.2 構建一個Vue實例
1）el（掛載點）
建立一個Vue這個實例去接管頁面中的某個Element（元素）。也就是說el代表和頁面上
哪個節點作綁定！
2）data
vue實例都有一些數據，咱們把數據都存放在data中。html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vue入門</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="root">{{msg}}</div>
<script>
new Vue({
el: '#root',
data: {
msg:'hello world'
}
})
</script>
</body>
</html>
建立一個vue的實例，讓這個vue的實例去接管頁面中id爲root的內容，因此這個vue實例
就和id爲root的dom作好了綁定。vue
2、掛載點，模板與實例之間的關係
2.1 掛載點
掛載點是Vue實例中el屬性對應的id所對應的一個dom節點。
java
2.2 模板
在掛載點內部的內容都稱之爲模板內容。npm
<div id="root">
<h1>lance {{msg}}</h1>
</div>
其中：數組
<h1>lance {{msg}}</h1>
就是模板內容啦！
固然咱們能夠把模板內容寫在vue實例當中：緩存
<body>
<div id="root"></div>
<script>
new Vue({
el: '#root',
template: '<h1>lance {{msg}}</h1>',
data: {
msg:'hello world'
}
})
</script>
</body>
因此說模板你能夠寫在掛載點內部，固然也能夠寫在vue實例的template屬性當中。app
2.3 實例
其中new Vue({})其實就是建立一個Vue實例。
在實例中你須要指定一個掛載點，把模板寫好。vue會自動的根據你的模板和你的數據
自動生成要展現的內容。會把要展現的內容放到掛載點當中。dom
3、Vue中的計算屬性、偵聽器、計算屬性的set與get
3.1 Vue中的計算屬性
1）前言
<div id="root">
姓:<input v-model="firstName" />
名:<input v-model="lastName" />
<div>{{firstName}}{{lastName}}</div>
</div>
<script>
new Vue({
el: '#root',
data:{
firstName: '',
lastName: ''
}
})
</script>
效果：
問題：
<div>{{firstName}}{{lastName}}</div>這個很冗餘。
2）經常使用場景
fullName是經過firstName和lastName計算而成的一個新的變量。
咱們能夠經過Vue的計算屬性來解決咱們的需求，在Vue實例中添加一個computed屬性。
<div id="root">
姓:<input v-model="firstName" />
名:<input v-model="lastName" />
<div>{{fullName}}</div>
</div>
<script>
new Vue({
el: '#root',
data: {
firstName: '',
lastName: ''
},
computed: {
//何時執行：初始化顯示/相關data屬性數據發生改變
fullName: function(){
//計算屬性的一個方法，方法的返回值做爲屬性值
return this.firstName+' '+this.lastName;
}
}
})
</script>
fullName是一個計算屬性，定義在computed裏面表示它是一個計算屬性。
它是由firstName和lastName計算出來的。
計算屬性只有當裏面參與計算的屬性各任意一個改變的時候纔會去計算，不然使用上
這次計算的緩存。
3.2 偵聽器
1）需求
<div id="root">
姓:<input v-model="firstName" />
名:<input v-model="lastName" />
<div>{{fullName}}</div>
<hr />
<div>{{count}}</div>
</div>
<script>
new Vue({
el: '#root',
data: {
firstName: '',
lastName: '',
count: 0
},
computed: {
fullName: function(){
return this.firstName+' '+this.lastName;
}
}
})
</script>
效果：
2）實現
首先在vue實例中定義一個偵聽器：watch。
<div id="root">
姓:<input v-model="firstName" />
名:<input v-model="lastName" />
<div>{{fullName}}</div>
<hr />
<div>{{count}}</div>
</div>
<script>
new Vue({
el: '#root',
data: {
firstName: '',
lastName: '',
count: 0
},
computed: {
fullName: function(){
return this.firstName+' '+this.lastName;
}
},
watch: {
firstName: function(){
this.count++
},
lastName: function(){
this.count++
}
}
})
</script>
效果：
其實監聽器的做用是，監聽某個數據的變化，一旦這個數據發生變化我就能夠在監聽器中
作相應的業務處理。
固然在上面的例子中咱們能夠直接監聽fullName就能夠了。
<script>
new Vue({
el: '#root',
data: {
firstName: '',
lastName: '',
count: 0
},
computed: {
fullName: function(){
return this.firstName+' '+this.lastName;
}
},
watch: {
/* firstName: function(){
this.count++
},
lastName: function(){
this.count++
}*/
fullName: function(){
this.count++
}
}
})
</script>
3.3 計算屬性的set與get
1）實例
<body>
<div id="demo">
姓: <input type="text" placeholder="First Name" v-model="firstName"><br />
名: <input type="text" placeholder="Last Name" v-model="lastName"><br />
姓名1(單向): <input type="text" placeholder="Full Name1" v-model="fullName1" /><br />
姓名2(單向): <input type="text" placeholder="Full Name2" v-model="fullName2" /><br />
姓名3(雙向): <input type="text" placeholder="Full Name3" /><br />
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript">
const vm = new Vue({
el: '#demo',
data: {
firstName: 'A',
lastName: 'B',
fullName2: 'A B', //若是不定義的話，會形成vm.$watch的()方法會延遲一步
},
computed: {
//何時執行：初始化顯示/相關的data屬性發生變化
fullName1 (){//計算屬性中的一個方法，方法的返回值做爲屬性值
console.log("111111111111111")
return this.firstName +' '+this.lastName;
}
},
watch: { //配置監視
firstName: function (value) { //監聽firstName的變化
console.log(this) //就是vue的實例：vm
this.fullName2 = value +' '+this.lastName;
}
}
});
//全部vm的實例方法都是以$開頭的。 注意：在function中能夠最多能夠傳兩個值一個是新的，一個是舊的。
vm.$watch('lastName',function (value) {
//更新 fullName2
this.fullName2 = this.firtName +' '+ value;
})
</script>
</body>
效果：
分析：
咱們修改都是基於單向的，也就是咱們只是修改姓、名這兩個文本框，
可是咱們修改下面兩個文本框是不能實現同步的，那要怎麼樣實現呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>計算屬性和監聽</title>
</head>
<!--
1.計算屬性
在computed屬性對象中定義計算屬性的方法
在頁面中使用{{方法名}}來顯示結果
2.監視屬性
經過vm對象的$watch(或)watch配置來監視制定的屬性。
當屬性變化時，回調函數自動調用，在函數內部進行計算。
3.計算屬性高級
經過getter/setter實現對屬性屬性的顯示和監視
計算屬性存在緩存，屢次讀取只執行一次getter計算。
-->
<body>
<div id="demo">
姓: <input type="text" placeholder="First Name" v-model="firstName"><br />
名: <input type="text" placeholder="Last Name" v-model="lastName"><br />
姓名1(單向): <input type="text" placeholder="Full Name1" v-model="fullName1" /><br />
姓名2(單向): <input type="text" placeholder="Full Name2" v-model="fullName2" /><br />
姓名3(雙向): <input type="text" placeholder="Full Name3" v-model="fullName3" /><br />
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript">
const vm = new Vue({
el: '#demo',
data: {
firstName: 'A',
lastName: 'B',
fullName2: 'A B', //若是不定義的話，會形成vm.$watch的()方法會延遲一步
},
computed: {
//何時執行：初始化顯示/相關的data屬性發生變化
fullName1 (){//計算屬性中的一個方法，方法的返回值做爲屬性值
console.log("111111111111111")
return this.firstName +' '+this.lastName;
},
fullName3 :{
//什麼是回調函數？ 1.你定義的 2.你沒有調用 3.但最終它執行了
//回調函數你要知道：何時調用？用來作什麼？
// 回調函數 當須要讀取當前屬性值時回調，根據相關的數據計算病返回當前屬性的值
get(){
return this.firstName +' '+this.lastName;
},
//回調函數，監視當前屬性值的變化，當屬性值發生改變時回調，更新的屬性數據。
set(value){//value就是fullName3的最新屬性值
const names = value.split(' ');
this.firstName = names[0];
this.lastName = names[1];
}
}
},
watch: { //配置監視
firstName: function (value) { //監聽firstName的變化
console.log(this) //就是vue的實例：vm
this.fullName2 = value +' '+this.lastName;
}
}
})
//全部vm的實例方法都是以$開頭的。 注意：在function中能夠最多能夠傳兩個值一個是新的，一個是舊的。
vm.$watch('lastName',function (value) {
//更新 fullName2
this.fullName2 = this.firstName +' '+ value;
})
</script>
</body>
</html>
注意：計算屬性存在緩存，屢次讀取只執行一次getter計算。
4、Vue強制綁定class和style
在應用界面中，當咱們去點擊某個按鈕或者其餘操做的時候，某個（些）元素的樣式是變化的。
class/style綁定就是專門用來實現動態樣式效果的技術。
4.1 class綁定
語法： :class='xxx'
- xxx是字符串
- xxx是對象
- xxx是數組
4.2 style綁定
:style = "{color: activeColor,fontsize: fontsize + 'px'}"
其中acticeColor/fontsize是data屬性
4.3 完整實例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue強制綁定class和style</title>
<script src="js/vue.js"></script>
<style>
.aClass {
color: red;
}
.bClass {
color: blue;
}
.cClass {
font-size: 40px;
}
</style>
</head>
<!--
1.理解
在應用界面中，某個（些）元素的樣式是變化的
class/style綁定就是專門用來實現動態樣式效果的技術
2.class綁定： :class='xxx'
xxx是字符串
xxx是對象
xxx是數組
3.style綁定
:style = "{color: activeColor,fontsize: fontsize + 'px'}"
其中acticeColor/fontsize是data屬性
-->
<body>
<div id="app">
<h3>1.class綁定： :class= 'xxxx'</h3>
<p class="cClass" :class="a">xxx是字符串</p> //會有 兩個類名
<button @click='update'>點擊一下字符串</button>
<hr/> //對象中屬性值是css的類名，屬性值是布爾類型,true表明類名留下。
<p :class="{aClass : isA,bClass : isB}">xxx是對象</p> //只會顯示爲 true的類名
<button @click='updateObj'>點擊一下對象</button>
<hr />
<p :class="['bClass','cClass']">xxx是數組</p>
<h3>2. style綁定</h3>
<p :style="{color: activeColor,fontsize: fontsize + 'px'}">style綁定</p> //style綁定的是對象
<button @click='updateStyle'>style綁定</button>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
a: 'aClass',
isA: true,
isB: false,
activeColor: 'green',
fontsize: '20'
},
methods: {
update() {
this.a = 'bClass';
},
updateObj() {
this.isA = false;
this.isB = true;
},
updateStyle() {
this.activeColor = 'red';
this.fontsize = 30;
}
}
})
</script>
</body>
</html>
相關文章
- 1. vue計算屬性VS偵聽屬性
- 2. vue——計算屬性和偵聽器
- 3. Vue 計算屬性與偵聽器
- 4. VUE 計算屬性和偵聽器
- 5. vue-計算屬性和偵聽器
- 6. Vue計算屬性和偵聽器
- 7. vue-計算屬性，方法，偵聽器
- 8. Vue計算屬性與偵聽器
- 9. Vue——計算屬性&方法&偵聽器
- 10. Vue筆記：計算屬性&偵聽器
- 更多相關文章...
- • WSDL 綁定 - WSDL 教程
- • ASP.NET Web Forms - 數據綁定 - ASP.NET 教程
- • 使用Rxjava計算圓周率
- • 互聯網組織的未來：剖析GitHub員工的任性之源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. vs2019運行opencv圖片顯示代碼時，窗口亂碼
- 2. app自動化 - 元素定位不到？別慌，看完你就能解決
- 3. 在Win8下用cisco ××× Client連接時報Reason 422錯誤的解決方法
- 4. eclipse快速補全代碼
- 5. Eclipse中Java/Html/Css/Jsp/JavaScript等代碼的格式化
- 6. idea+spring boot +mabitys(wanglezapin)+mysql (1)
- 7. 勒索病毒發生變種 新文件名將帶有「.UIWIX」後綴
- 8. 【原創】Python 源文件編碼解讀
- 9. iOS9企業部署分發問題深入瞭解與解決
- 10. 安裝pytorch報錯CondaHTTPError：******
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. vue計算屬性VS偵聽屬性
- 2. vue——計算屬性和偵聽器
- 3. Vue 計算屬性與偵聽器
- 4. VUE 計算屬性和偵聽器
- 5. vue-計算屬性和偵聽器
- 6. Vue計算屬性和偵聽器
- 7. vue-計算屬性，方法，偵聽器
- 8. Vue計算屬性與偵聽器
- 9. Vue——計算屬性&方法&偵聽器
- 10. Vue筆記：計算屬性&偵聽器