vue.js的模式
- mvvm 模式視圖層與數據層的雙向綁定
環境搭建
其一引用
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
復制代碼引用之后/創建vue實例 這個實例是整個程序的啟動入口
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body><div id="app"> '頁面別忘了掛載①'{{msg}} //顯示 !! 頁面學習開始了</div>
</body>
<script>var app = new Vue({ '注意是 Vue'// 掛載的dom元素 可以是dom 標簽 cssel:'#app', '①'//聲明應用內需要雙向綁定的數據data:{msg:'學習開始了',ac:'acfun'}})
</script>
</html>
復制代碼如何訪問 vue實例中屬性
- 訪問el 其中app是vue實例指向的變量
<script>
console.log(app.$el)
</script>
''控制臺輸出結果''
<div id="app">vue學習開始了
</div>
復制代碼- 訪問data
<script>
console.log(app.$data)
</script>
''控制臺輸出結果''
<div id="app">vue學習開始了
</div>
復制代碼- 訪問data中屬性
<script>
console.log(app.msg) 更簡單了
</script>
''控制臺輸出結果''
vue學習開始了
復制代碼生命周期的鉤子
主要的三個方法
- created 實例創建完成后調用 此階段完成了數據觀測 ### 還未掛載到dom上##(可以在vue渲染頁面前搞些事情用)
- mounted 掛載到實例上后調用 ——剛剛掛載
- boforeDestory 實例銷毀之前調用主要解綁一些使用addEventListener監聽的事件等
文本插值和表達式
{{雙向綁定的數據 試試顯示}} ← 文本插值 {{6+6}} 也可以進行簡單的運算 {{6>3 ? msg:ac}} 三元運算 {{if(6>3){}}} ##錯誤## 文本插值不可以書多個語句 {{var a=6}} var a; a=6 ###錯誤### 這也是兩行表達式
![[Codeforces700E Cool Slogans]](http://pic.xiahunao.cn/[Codeforces700E Cool Slogans])
 return code = -2...)
