vue 实例数据绑定 指令 事件
生活随笔
收集整理的這篇文章主要介紹了
vue 实例数据绑定 指令 事件
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
vue.js的模式
- mvvm 模式視圖層與數(shù)據(jù)層的雙向綁定
環(huán)境搭建
其一引用
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 復(fù)制代碼引用之后/創(chuàng)建vue實(shí)例 這個實(shí)例是整個程序的啟動入口
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body><div id="app"> '頁面別忘了掛載①'{{msg}} //顯示 !! 頁面學(xué)習(xí)開始了</div> </body> <script>var app = new Vue({ '注意是 Vue'// 掛載的dom元素 可以是dom 標(biāo)簽 cssel:'#app', '①'//聲明應(yīng)用內(nèi)需要雙向綁定的數(shù)據(jù)data:{msg:'學(xué)習(xí)開始了',ac:'acfun'}}) </script> </html> 復(fù)制代碼如何訪問 vue實(shí)例中屬性
- 訪問el 其中app是vue實(shí)例指向的變量
- 訪問data
- 訪問data中屬性
生命周期的鉤子
主要的三個方法
- created 實(shí)例創(chuàng)建完成后調(diào)用 此階段完成了數(shù)據(jù)觀測 ### 還未掛載到dom上##(可以在vue渲染頁面前搞些事情用)
- mounted 掛載到實(shí)例上后調(diào)用 ——剛剛掛載
- boforeDestory 實(shí)例銷毀之前調(diào)用主要解綁一些使用addEventListener監(jiān)聽的事件等
文本插值和表達(dá)式
{{雙向綁定的數(shù)據(jù) 試試顯示}} ← 文本插值 {{6+6}} 也可以進(jìn)行簡單的運(yùn)算 {{6>3 ? msg:ac}} 三元運(yùn)算 {{if(6>3){}}} ##錯誤## 文本插值不可以書多個語句 {{var a=6}} var a; a=6 ###錯誤### 這也是兩行表達(dá)式
轉(zhuǎn)載于:https://juejin.im/post/5b3004f851882574b15893c6
總結(jié)
以上是生活随笔為你收集整理的vue 实例数据绑定 指令 事件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： React开发（210）:react中t
- 下一篇： 将vue,H5项目打包成app，apk安