碼雲實時更新學習demo地址：https://gitee.com/dxl96/vuexuexi
VUE基礎篇（雙向綁定）
1、v-model的使用
v-model 用在表單中，與數據是雙向綁定關係，相當於表單綁定的vue實例中data的數據改變了，表單的渲染也會改變，同樣操作表單，改變了表單的數據，相應的vue實例中data的數據也會發生相應的改變，這種頁面渲染的表單數據和vue實例的data數據互相影響，任何一方改變都會導致另一方數據的改變就是數據的雙向綁定
下面介紹幾種常見的表單數據綁定：
1）input = text 文本框
2）input = radio 單選按鈕
3）input = checkbox 複選框
4）input = select 下拉框
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model的使用</title>
</head>
<body>
<div id="app">
<!-- ■【input = text】-->
<!-- v-model用在表單中，與數據是雙向綁定關係，message值改變了，input的內容也改變，input輸入框的內容改變了message的值同樣改變了-->
<input type="text" v-model="message">
<hr>
<!-- v-model 相當於 v-bind:value 和 v-on:input兩個事件的結合，這樣也實現了雙向綁定-->
<input type="text" v-bind:value="message" v-on:input="valueChange">
<hr>
<!---------------------------------------------------------------------------------------------------------------->
<!-- ■【input = radio】-->
<!-- v-model綁定radio單選按鈕,v-model綁定的同一個變量即是同一組，不用在給radio加上一個name屬性來進行分組，
並且選中的單選按鈕的value值會和v-model綁定的變量進行雙向綁定-->
<input type="radio" id="man" value="男" v-model="sex">
<label for="man">男</label>
<input type="radio" id="woman" value="女" v-model="sex">
<label for="woman">女</label>
<p>您選澤的是：{{sex}}</p>
<hr>
<!---------------------------------------------------------------------------------------------------------------->
<!-- ■【input = checkbox】-->
<!-- v-model綁定checkbox複選框,v-model綁定的同一個變量即是同一組，不用在給checkbox加上一個name屬性來進行分組，
並且選中的複選框的value值會和v-model綁定的變量進行雙向綁定，因爲複選框是可多選的，所以如果存在多個複選框則用數組接收綁定，
如果只有一個複選框可用一個普通變量接收綁定-->
<input type="checkbox" id="agree" v-model="isAgree">
<label for="agree">同意協議</label>
<p>您選澤的是：{{isAgree}}</p>
<button :disabled="!isAgree">下一步</button>
<hr>
<input type="checkbox" value="籃球" v-model="hobbies">籃球
<input type="checkbox" value="足球" v-model="hobbies">足球
<input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
<input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
<p>您選澤的是：{{hobbies}}</p>
<hr>
<!---------------------------------------------------------------------------------------------------------------->
<!-- ■【input = select】-->
<!-- v-model綁定select下拉框,v-model與綁定數據變量是雙向綁定關係，因爲下拉框是可以設置多選的，所以設置了多選用數組接收綁定，
如果設置的是單選用一個普通變量接收綁定-->
<select name="" v-model="fruit">
<option value="蘋果">蘋果</option>
<option value="香蕉">香蕉</option>
<option value="榴蓮">榴蓮</option>
<option value="栗子">栗子</option>
<option value="橘子">橘子</option>
</select>
<p>您選澤的是：{{fruit}}</p>
<hr>
<select name="" v-model="fruits" multiple>
<option value="蘋果">蘋果</option>
<option value="香蕉">香蕉</option>
<option value="榴蓮">榴蓮</option>
<option value="栗子">栗子</option>
<option value="橘子">橘子</option>
</select>
<p>您選澤的是：{{fruits}}</p>
<hr>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "vue app", //輸入框
sex: '男', //單選按鈕
isAgree: false, //複選框單個
hobbies: [], //複選框多個
fruit: "", //單選下拉框
fruits: [] //多選下拉框
},
methods: {
valueChange(event) {
this.message = event.target.value;
}
}
});
</script>
</body>
</html>
效果
注：值綁定
-初看Vue官方值綁定的時候,我很疑惑: what the hell is that ?
-但是仔細閱讀之後,發現很簡單,就是動態的給value賦值而已
口我們前面的value中的值,可以回頭去看一下,都是在定input時候直接給定的。
口但是真實開發中,這些input的值可能是從網絡獲取或定義在data中的
口所以我們可以通過v-bind:value動態的給value綁定值。
口這不就是v-bind嗎?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model的使用</title>
</head>
<body>
<div id="app">
<!-- ■【值綁定,舉例：】-->
<!-- -初看Vue官方值綁定的時候,我很疑惑: what the hell is that ?
-但是仔細閱讀之後,發現很簡單,就是動態的給value賦值而已
口我們前面的value中的值,可以回頭去看一下,都是在定input時候直接給定的。
口但是真實開發中,這些input的值可能是從網絡獲取或定義在data中的
口所以我們可以通過v-bind:value動態的給value綁定值。
口這不就是v-bind嗎?-->
<p>值綁定:也就是數據不是直接寫死的，通過動態的值來進行綁定</p>
<select v-model="fruitsValueBindChoice" multiple>
<option v-for="item in fruitsValueBind" :value="item">{{item}}</option>
</select>
<p>您選澤的是：{{fruitsValueBindChoice}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
fruitsValueBind: ["手機", "電腦", "耳機", "音響", "話筒"],//值綁定part1
fruitsValueBindChoice: [] //值綁定part2
}
});
</script>
</body>
</html>
效果
2、v-model的修飾符
■lazy修飾符:
口默認情況下, v-model默認是在input事件中同步輸入框的數據的。
口也就是說,一旦有數據發生改變對應的data中的數據就會自動發生改變。
口lazy修飾符可以讓數據在失去焦點或者回車時纔會更新。
■number修飾符:
口默認情況下,在輸入框中無論我們輸入的是字母還是數字,都會被當做字符串類型進行處理。
口但是如果我們希望處理的是數字類型,那麼最好直接將內容當做數字處理。
口number修飾符可以讓在輸入框中輸入的內容自動轉成數字類型。
■trim修飾符:
口如果輸入的內容首尾有很多空格,通常我們希望將其去除
口trim修飾符可以過濾內容左右兩邊的空格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model修飾符</title>
</head>
<body>
<!--
■lazy修飾符:
口默認情況下, v-model默認是在input事件中同步輸入框的數據的。
口也就是說,一旦有數據發生改變對應的data中的數據就會自動發生改變。
口lazy修飾符可以讓數據在失去焦點或者回車時纔會更新。
■number修飾符:
口默認情況下,在輸入框中無論我們輸入的是字母還是數字,都會被當做字符串類型進行處理。
口但是如果我們希望處理的是數字類型,那麼最好直接將內容當做數字處理。
口number修飾符可以讓在輸入框中輸入的內容自動轉成數字類型。
■trim修飾符:
口如果輸入的內容首尾有很多空格,通常我們希望將其去除
口trim修飾符可以過濾內容左右兩邊的空格
-->
<div id="app">
lazy修飾符:
<input type="text" v-model.lazy="message"><br>
<span>回車或失去焦點更新值：{{message}}</span>
<br><br>
<hr>
無number修飾符,默認是number，輸入就是string:
<input type="number" v-model="num"><br>
<span>類型：{{typeof num}}-{{num}}</span>
<br><br>
<hr>
number修飾符:
<input type="number" v-model.number="age"><br>
<span>類型：{{typeof age}}-{{age}}</span>
<br><br>
<hr>
trim修飾符:
<input type="text" v-model.trim="info"><br>
<span>去除兩邊空白：{{info}}</span>
<span></span>
<br><br>
<hr>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "vue app",
num:0,
age:17,
info:""
}
});
</script>
</body>
</html>
效果
