vue实例、指令、生命周期
vue實例、指令、生命周期
本章重點
1、生命周期
2、插值
3、指令
一、創建一個實例vue實例
每一個vue應用都是通過vue函數創建一個新的vue實例開始的
語法： ver vm = new Vue({
? //選項
})
當我們創建一個vue實例，我們就可以傳入一個選項對象。
二、數據與方法
當一個vue是實例被創建的時候，它的data對象中所有的屬性加入vue的響應式系統中，當這些屬性值發生改變的時候，系統就會產生相應（匹配、更新我們的值）
<script>var data = {a:'張國榮'}var vm= new Vue({data:data})</script>當這些數據發生改變的時候，視圖會進行重新渲染。注意：只有當實例被創建的時候，data中存在的屬性才是響應式的。
三、vue的生命周期
什么是生命周期
從vue實例創建、運行、銷毀期間，各種發生各種各樣的事件，這些統稱生命周期。
生命周期鉤子：
就是生命周期事件的別名。
生命周期鉤子 == 生命周期函數 == 生命周期事件
創建事件的生命周期函數：
beforeCreate ：實例剛被創建出來，data或者methods屬性沒有初始化
created：實例在內存中創建成功，打他或者methods也已經OK
beforeMount：完成模板編譯
beforeUpdate：狀態更新之前執行的函數
beforeDestroy：實例銷毀之前執行的函數
<script>new Vue({data:{a:1},created:function(){console.log('a的值：'+this.a)}})</script>[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-cEkjqhy2-1604128412462)(C:\Users\ADMINI~1\AppData\Local\Temp\1564039512446.png)]
四、模板語法
vue.js 使用了基于html的模板語法，允許開發者聲明式的將DOM綁定到底層vue實例的數據。
插值
文本：
文本插值語法 ｛｛msg｝｝將實例對象上的值進行代替，綁定對象上的msg屬性發生改變，插值處內容也會更新。
原始html：
雙大括號會將數據解析為普通文本，并非html代碼，輸出html代碼用到一個指令 ： v-html
<body><div id="aaa">{{msg}}<span v-html="msg"></span></div><script>new Vue({el:"#aaa",data:{msg:"<span style='color:red'>111</span>"}})</script></body>vue指令
帶有-v前綴的特殊特性。指令特性的值預期是單個JavaScript表達式（v-for例外）指令的職責，當表達式的值改變的時候，會產生連帶的影響，響應式的作用于DOM。
v-if：根據表達式的真假，刪除或者插入元素的。
<body><div id="app"><h2 v-if="yes">yes</h2><h2 v-if="no">no</h2><h2 v-if="age >= 18">age:{{age}}</h2></div><script>new Vue({el:"#app",data:{yes:true,no:false,age:12}})</script></body>v-show也是條件渲染指令，使用v-show指令的元素始終會被渲染到html頁面，它只是簡單的為元素設置css的style屬性。
<div id="app"><h2 v-show="yes">yes</h2><h2 v-show="no">no</h2><h2 v-show="age >= 18">age:{{age}}</h2></div><script>new Vue({el:"#app",data:{yes:true,no:false,age:20}})作業：
1、了解vue的生命周期
2、使用vue的插值
ue({
el:"#app",
data:{
yes:true,
no:false,
age:20
}
})
總結
以上是生活随笔為你收集整理的vue实例、指令、生命周期的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 前端就业之vue介绍
- 下一篇： vue事件处理器