1、表單輸入
什么是雙向數據綁定
Vue.js 是一個 MVVM 框架，即數據雙向綁定，即當數據發生變化的時候，視圖也就發生變化，當視圖發生變化的時候，數據也會跟着同步變化。這也算是 Vue.js 的精髓之處了。值得注意的是，我們所說的數據雙向綁定，一定是對於 UI 控件來說的，非 UI 控件不會涉及到數據雙向綁定。單向數據綁定是使用狀態管理工具的前提。如果我們使用 vuex，那么數據流也是單項的，這時就會和雙向數據綁定有沖突。
在表單中使用雙向數據綁定
你可以用 v-model 指令在表單 <input>、<textarea> 及 <select> 元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。盡管有些神奇，但 v-model 本質上不過是語法糖。它負責監聽用戶的輸入事件以更新數據，並對一些極端場景進行一些特殊處理。
注意：v-model 會忽略所有表單元素的 value、checked、selected 特性的初始值而總是將 Vue 實例的數據作為數據來源。你應該通過 JavaScript 在組件的 data 選項中聲明初始值。
單行文本
<div id="vue">
單行文本：<input type="text" v-model="message" /> 單行文本是：{{message}}
</div>
javascript
<script type="text/javascript">
var vm = new Vue({
el: '#vue',
data: {
message: "Hello Vue"
}
});
</script>
觸發效果:input值得改變，會引起vm.message的值得改變，導致了{{message}}的值得改變
多行文本
<div id="vue">
多行文本：<textarea v-model="message"></textarea> 多行文本是：{{message}}
</div>
javascript
<script type="text/javascript">
var vm = new Vue({
el: '#vue',
data: {
message: "Hello Textarea"
}
});
</script>
單復選框
<div id="vue">
單復選框：<input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label>
</div>
javascript
<script type="text/javascript">
var vm = new Vue({
el: '#vue',
data: {
checked: false
}
});
</script>
多復選框
<div id="vue">
多復選框：
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<span>選中的值: {{ checkedNames }}</span>
</div>
javascript
<script type="text/javascript">
var vm = new Vue({
el: '#vue',
data: {
checkedNames: []
}
});
</script>
單選按鈕
<div id="vue">
單選按鈕：
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<span>選中的值: {{ picked }}</span>
</div>
javascript
<script type="text/javascript">
var vm = new Vue({
el: '#vue',
data: {
picked: ''
}
});
</script>
下拉框
<div id="vue">
下拉框：
<select v-model="selected">
<option disabled value="">請選擇</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>選中的值: {{ selected }}</span>
</div>
javascript
<script type="text/javascript">
var vm = new Vue({
el: '#vue',
data: {
selected: ''
}
});
</script>
注意：如果 v-model 表達式的初始值未能匹配任何選項，<select> 元素將被渲染為“未選中”狀態。在 iOS 中，這會使用戶無法選擇第一個選項。因為這樣的情況下，iOS 不會觸發 change 事件。因此，更推薦像上面這樣提供一個值為空的禁用選項。
2、組件基礎
什么是組件
組件是可復用的 Vue 實例，說白了就是一組可以重復使用的模板，跟 JSTL 的自定義標簽、Thymeleaf的 th:fragment 以及 Sitemesh3 框架有着異曲同工之妙。通常一個應用會以一棵嵌套的組件樹的形式來組織：
例如，你可能會有頁頭、側邊欄、內容區等組件，每個組件又包含了其它的像導航鏈接、博文之類的組件。
第一個 Vue 組件
注意：在實際開發中，我們並不會用以下方式開發組件，而是采用 vue-cli 創建 .vue 模板文件的方式開發，以下方法只是為了讓大家理解什么是組件。
完整的 HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>布局篇 組件基礎</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<div id="vue">
<ul>
<my-component-li v-for="itemx in items" v-bind:item="itemx"></my-component-li>
</ul>
</div>
<script type="text/javascript">
// 先注冊組件
Vue.component('my-component-li', {
props: ['item'],
template: '<li>Hello {{item}}</li>'
});
// 再實例化 Vue
var vm = new Vue({
el: '#vue',
data: {
items: ["張三", "李四", "王五"]
}
});
</script>
</body>
</html>
說明
Vue.component()：注冊組件my-component-li：自定義組件的名字template：組件的模板
v-for="item in items"：遍歷 Vue 實例中定義的名為items的數組，並創建同等數量的組件v-bind:item="item"：將遍歷的item項綁定到組件中props定義的名為item屬性上；=號左邊的item為props定義的屬性名，右邊的為item in items中遍歷的item項的值，<li>Hello {{item}}</li>中的{{item}}是從props中獲取值，props中的item從v-bind:item:"itemx"的item獲取，item又和itemx綁定，itemx從items中獲取- 默認規則下
props屬性里的值不能為大寫
Vue cli中使用組件
1、直接在頁面中導入組件(局部組件) 、通過路由在頁面中導入組件
<template>
<div id="app">
<password></password> //直接導入組件
<router-view></router-view> //通過路由導入組件
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import Password from "@/views/Password/Password.vue";
@Component({
components: { //注冊組件
Password //相當於Password:Password
},
})
export default class App extends Vue {}
</script>
<style lang="scss">
#app {
width: 100%;
height: 100%;
}
</style>
2、注冊全局組件
在main.js中配置后>>，就可以在任何頁面直接使用該組件了
import Password from "./views/Password/Password.vue"
Vue.component("password",Password)
組件css樣式
如果每一個組件中的css沒有加上scoped,那么這個樣式就是全局的,而且,先后順序沒有固定,具體看dom的中渲染css的順序
3、計算屬性
什么是計算屬性
計算屬性的重點突出在 屬性 兩個字上（屬性是名詞），首先它是個 屬性 其次這個屬性有 計算 的能力（計算是動詞），這里的 計算 就是個函數；簡單點說，它就是一個能夠將計算結果緩存起來的屬性（將行為轉化成了靜態的屬性），僅此而已；
計算屬性與方法的區別
完整的 HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>布局篇 計算屬性</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<div id="vue">
<p>調用當前時間的方法：{{currentTime1()}}</p>
<p>當前時間的計算屬性：{{currentTime2}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue',
data: {
message: 'Hello Vue'
},
methods: {
currentTime1: function () {
return Date.now();
}
},
computed: {
currentTime2: function () {
this.message;
return Date.now();
}
}
});
</script>
</body>
</html>
說明
methods：定義方法，調用方法使用currentTime1()，需要帶括號computed：定義計算屬性，調用屬性使用currentTime2，不需要帶括號；this.message是為了能夠讓currentTime2觀察到數據變化而變化
注意：methods 和 computed 里不能重名
測試效果
結論
調用方法時，每次都需要進行計算，既然有計算過程則必定產生系統開銷，那如果這個結果是不經常變化的呢？此時就可以考慮將這個結果緩存起來，采用計算屬性可以很方便的做到這一點；計算屬性的主要特性就是為了將不經常變化的計算結果進行緩存，以節約我們的系統開銷
3、slot插槽
父組件傳遞一個標簽給子組件
基本使用
父組件
<template>
<div>
home
<Password>
<!--傳遞給Password組件的標簽-->
<span>111</span>
<span>222</span>
</Password>
</div>
</template>
<script lang="ts">
import {Component,Vue} from "vue-property-decorator"
import Password from "@/views/Password/Password.vue"
@Component({
components:{
Password
},
data(){
return{
}
}
})
export default class Home extends Vue{
}
</script>
<style scoped>
</style>
子組件:使用slot來接受
<template>
<div class="password">
password
<slot></slot>
------------------
<slot></slot> <!--默認全部接受-->
</div>
</template>
<script lang="ts">
import {Component,Vue} from "vue-property-decorator"
@Component({
components:{},
data(){
return{
}
}
})
export default class Password extends Vue{
}
</script>
<style scoped>
</style>
高級用法
父組件
<template>
<div>
home
<Password>
<!--傳遞給Password組件的標簽-->
<span slot="span1">111</span>
<span slot="span2">222</span>
</Password>
</div>
</template>
子組件
<template>
<div class="password">
password
<slot name="span1"></slot>
------------------
<slot name="span2"></slot>
</div>
</template>
關於傳遞的標簽樣式的設置
父組件給子組件傳遞的標簽,無論在父組件中設置樣式,還是在子組件中設置樣式都可以,我們更推薦標簽在哪,我們在那里設置樣式.
關於傳遞的標簽屬性的綁定
只能綁定父標簽中的數據
關於slot
slot中可以有默認的標簽,如果父組件沒有傳遞標簽,就使用slot中默認的標簽,
動態組件和緩存
component/keep-alive
<template>
<div>
<!--在Password組件中寫的數據當跳到Login組件中不會被清空-->
<keep-alive>
<component :is="component"></component> //動態綁定組件,像<Password />這種就寫死了組件的綁定
</keep-alive>
<!--通過修改component的數據,在頁面展示不同的組件-->
<button @click="component='Password'">password</button>
<button @click="component='Login'">login</button>
</div>
</template>
<script lang="ts">
import {Component,Vue} from "vue-property-decorator"
import Password from "@/views/Password/Password.vue"
import Login from "@/views/Login/Login.vue";
@Component({
components:{
Password,
Login
},
data(){
return{
component:"Password"
}
}
})
export default class Home extends Vue{
}
</script>
<style scoped>
</style>