（給達達前端加星標，提升前端技能）
Vue所提供的一些相對高級的特性，表單操作，自定義指令，計算屬性，過濾器，偵聽器，生命周期。
表單操作的作用，用於用戶的交互，通過表單來進行數據的交互。
基於Vue的表單操作，input單行文本，textarea多行文本，select下拉多選，radio單選框，checkbox多選框。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
form div {
height: 40px;
line-height: 40px;
}
form div span:first-child{
display: inline-block;
width: 100px;
}
</style>
</head>
<body>
<div id="app">
<form>
<div>
<span>姓名：</span>
<span>
<input type="text">
</span>
</div>
<div>
<span>性別：</span>
<span>
<input type="radio" id="male">
<label for="male">男</label>
<input type="radio" id="female">
<label for="female">女</label>
</span>
</div>
<div>
<span>愛好：</span>
<input type="checkbox" id="ball">
<label for="ball">籃球</label>
<input type="checkbox" id="sing">
<label for="sing">唱歌</label>
<input type="checkbox" id="code">
<label for="code">寫代碼</label>
</div>
<div>
<span>工作</span>
<select>
<option>請選擇工作</option>
<option>教師</option>
<option>老師</option>
</select>
</div>
<div>
<span>個人簡介</span>
<textarea></textarea>
</div>
</form>
</div>
<script type="text/javascript" src="js/vue.js"></script>
表單操作，雙向數據綁定v-model。表單修飾符，number轉化為數值，trim去掉開頭和結尾的空格，lazy將input事件切換change事件
<input v-model.number="phone" type="number">
自定義指令，為何有自定義指令，就是內置指令不滿足需要。
如何自定義指令
Vue.directive('focus' {
inserted: function(el){
// 獲取元素的焦點
el.focus();
}
})
如何使用
<input type="text" v-focus>
鈎子函數，一個指令定義對象可以提供以下函數。
bind只調用一次，指令第一次綁定到元素時調用，在這里可以進行一次性的初始化設置，inserted被綁定元素插入父節點時調用，update所在組件的VNode更新時調用，但是可能發生在其子VNode更新之前，
componentUpdated指令所在組件的VNode以及其子VNode全部更新后調用，unbind只調用一次，指令與元素解綁時調用。
自定義指令的用法
<input type="text" v-color="msgColor">
// 自定義指令
Vue.directive('color', {
bind: function(el, binding) {
el.style.backgroundColor = binding.value.color;
}
});
var vm = new Vue({
el: '#app',
data: {
msg: {
color: 'red'
}
},
methods: {
handle: function() {
}
}
}
局部指令
directives: {
focus: {
// 指令的定義
inserted: function(el) {
el.focus()
}
}
}
局部指令的示例：
directives: {
color: {
bind: function(el, binding) {
el.style.backgroundColor = binding.value.color;
}
}
}
局部指令只能在本組件中使用，局部指令的應用范圍是有限制的。
計算屬性，為什么需要計算屬性呢，表達式的計算邏輯可能會比較復雜，使用計算屬性可以是模板內容更加簡潔。
如何使用計算屬性呢？
computed: {
msgDa: function() {
return this.msg.split('').reverse().join('')
}
}
<div>{{msgDa}}</div>
// 直接調用函數名
計算屬性和方法的區別
方法是不存在緩存的，計算屬性是基於它們的依賴進行緩存的。只要值不變就不重新計算。方法不存在緩存的機制。
比較耗時的計算可以節省性能，同樣的結果沒有比較計算兩次，用了兩次，只執行一次，緩存的問題，計算屬性計算的結果緩存起來了，再次訪問，就訪問計算后的結果。
<div> {{msgDa}} </div>
<div> {{msgDa}} </div>
computed: {
msgDa: function() {
console.log('只會打印一次');
return this.msg.split('').reserse().join('');
}
}
方法
methods: {
msgDa: function() {
console.log('ddd');
return this.msg.split('').reverse().join('');
}
}
<div>{{msgDa()}}</div>
偵聽器，是用來偵聽數據的變化，數據一旦發生變化就會通知偵聽器所綁定的方法，偵聽器綁定方法，數據變化時執行異步或開銷較大的操作。計算屬性只能用於一些簡單的操作。
使用方法
watch: {
firstName: function(val) {
// val表示變化之后的值
this.fullName = val + this.lastName;
},
lastName: function(val) {
this.fullName = this.firstName + val;
}
}
驗證用戶名的例子，通過v-model實現數據綁定，需要提供提示信息，需要偵聽器監聽輸入信息的變化。采用偵聽器監聽用戶名的變化，調用后台接口進行驗證，根據驗證的結果調整提示信息，需要修改觸發的事件。
表單域的修飾符
<input type="text" v-model.lazy="uname">
Vue中的數據渲染
{{}}
<div id="app">{{ message }}</div>
var vm = new Vue({
el: '#app',
data:{
message:"達達前端"
}
})
v-html是可以解讀html標簽渲染
<div id="app" v-html='message'>
<input type="text"/>
<div >{{ message }}</div>
</div>
var vm = new Vue({
el: '#app',
data:{
message:"<div style='background:red;width:60px;height:60px'></div>"
}
})
v-text
v-text是用於操作純文本，它會替代顯示對應的數據對象上的值。
<div id="app">{{ message }}</div>
var app = new Vue({
el : '#app',
data : {
message : 'hello world'
}
})
過濾器，什么是過濾器，它的作用是什么呢？
用來格式化數據，比如把字符串格式變為大寫，將日期格式變化為指定的格式等。
自定義過濾器
Vue.filter('過濾器名稱', function(value) {
// 過濾器業務邏輯
})
// 過濾器的使用
<div> {{msg | upper}} </div>
Vue.filter('upper', function(val) {
return val.chatAt(0).toUpperCase() + val.slice(1);
})
局部過濾器
filters: {
capitalize；function() {}
}
Vue.filter('format', function(value, arg1){
})
使用
<div>{{date | format('yyyy-MM-dd')}}</div>
日期格式，y表示年，M表示年中的月份1-12，d表示月份中的天1-31，h表示小時0-23，m表示分0-59，s表示秒0-59等。
指令是用來操作dom，什么是組件，組件是html css js等的一個聚合體。組件化，可以加速項目的進度，可以在項目中復用，將一個完整功能的一部分可以多處使用。
Vue.component的主要功能是注冊組件，不是創建組件。
所有的 Vue.js 組件都是被擴展的 Vue 實例，使用Vue.component注冊組件時，創建Vue實例必須在注冊組件的代碼的后面，否則注冊的組件不會被顯示。
注冊：
<div id="app">
<Father></Father>
<gd-da></gd-da>
</div>
</body>
<script>
Vue.component('Father',{
template: '<div> 這里是全局注冊 </div>'
})
new Vue({
el: '#app',
components: {
'GdDa': {
template: '<div> 這里是局部注冊 </div>'
}
}
})
</script>
template
類型：string
說明：
一個字符串模板作為 Vue 實例的標識使用。模板將會 替換 掛載的元素。掛載元素的內容都將被忽略，除非模板的內容有分發 slot。
CDN引入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
NPM安裝
npm install vue
完整代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入門之Helloworld</title>
<!--引入Vue庫-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--創建一個Div-->
<div id="app">
<!--Vue的模板的綁定數據的方法，用兩對花括號進行綁定Vue中的數據對象的屬性 -->
{{message}}
</div>
<!--創建Vue的對象-->
<script type="text/javascript">
var app=new Vue({ // 創建Vue對象。Vue的核心對象。
el:'#app', // el屬性：把當前Vue對象掛載到 div標簽上，#app是id選擇器
data:{ // Vue對象中綁定的數據
message:'hello Vue!' // 自定義的數據
}
})
</script>
</body>
</html>
輸出結果：
hello Vue!
內部指令
v-if 、v-else、 v-show、v-else-if
<div v-if="isLogin">你好</div>
<div v-else>請登錄后操作</div>
<div v-show="isLogin">你好</div>
<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>Not A/B/C</div>
v-if與v-show的區別
v-if：開銷較高，在運行時條件很少改變時使用。
v-show：開銷較小，在常頻繁地切換時使用。
v-for
<!-- 模板 -->
<div id="app">
<ul>
<li v-for="item in items">
{{item}}
</li>
</ul>
</div>
<!--JS代碼 -->
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
items:[1,2,3,4]
}
})
</script>
對象遍歷
<!-- 模板 -->
<div id="app">
<ul>
<li v-for="(value, key, index) in object">
{{ index }}. {{ key }} - {{ value }}
</li>
</ul>
</div>
<!--JS代碼 -->
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
object: {
firstName: 'da',
lastName: 'dada'
}
}
})
</script>
v-text，{{xxx}}取值有個弊端
當網速很慢或javascript出錯時，會在頁面顯示{{xxx}}，Vue提供的v-text可以解決這個
v-html
用於輸出html代碼
<span v-html="msgHtml"></span>
生命周期
階段一：創建和掛載
-
beforecreated：el 和 data 並未初始化
-
created：完成了 data 數據的初始化，el沒有
-
beforeMount：完成了 el 和 data 初始化
-
mounted ：完成掛載
階段二：更新
-
beforeUpdate：虛擬DOM中根據data變化去更新html
-
updated：將虛擬DOM更新完成的HTML更新到頁面中
階段三：銷毀
-
beforeDestroy：銷毀之前調用
-
destroyed：銷毀之后調用，之后再執行app.message= ‘hello vue’，頁面不會同步更新。
推薦閱讀 點擊標題可跳轉
【面試Vue全家桶】vue前端交互模式-es7的語法結構？async/await
【面試需要】掌握JavaScript中的this，call，apply的原理
2019年的每一天日更只為等待她的出現，好好過余生，慶余年 | 掘金年度征文
覺得本文對你有幫助？請分享給更多人
關注「達達前端」加星標，提升前端技能
在博客平台里，未來的路還很長，也希望自己以后的文章大家能多多支持，多多批評指正，我們一起進步，一起走花路。
非常感謝讀者能看到這里，如果這個文章寫得還不錯，覺得「達達」我有點東西的話，覺得我能夠堅持的學習，覺得此人可以交朋友的話， 求點贊，求關注，求分享，對暖男我來說真的
非常有用！！！
感謝閱讀，原創不易，喜歡就點個[在看] or [轉發朋友圈]，這是我寫作最大的動力。
意見反饋
若本號內容有做得不到位的地方（比如：涉及版權或其他問題），請及時聯系我們進行整改即可，會在第一時間進行處理。
這是一個有質量，有態度的公眾號
點關注，有好運
好文章，我在看❤️