淺入Vue
阿新 • • 發佈：2018-11-15
一. ES6的常用語法
1.變數提升 :let定義取消變數提升
2.模板字串 :`` 及${}引用變數
3.資料解構:注意解構的資料型別要一致
4.類: class定義類,extends繼承,constractor方法相當於py中的init方法
5.函式:注意this和普通函式的區別
6.函式的單體模式是極為常用的:foo(){return 1}
二.Vue常用指令
1.v-text :innertext
2.v-html :innerhtml
3.v-for
4.v-if v-else-if v-else
5.v-show :display
6.v-on :@xxx='處理方法'
7.v-bind :屬性名稱=屬性值
8.v-model -- input -- textarea -- select
指令修飾符:.lazy .number .trim
計算屬性:computed 放入快取 只有資料改變的時候才會重新計算
資料的監聽: watch 注意可變資料型別跟不可變資料型別的區別
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <script src="static/vue.min.js"></script> </head> <body> <div id="app"> {{ name }} {{ hobby }} <button @click="changedata">點我改變資料</button> </div> <script> let app =new Vue({ el:'#app', data:{ name:'alex', hobby:['抽菸','喝酒'] }, methods:{ changedata:function () { // 陣列型別的資料只能通過這種方式更改才能體現在前端頁面 app.$set(this.hobby,0,'抽二手菸') } }, watch:{ hobby: { handler: function (val, oldVal) { console.log(val); console.log(oldVal); } } } }) </script> </body> </html>
獲取Dom: 給標籤繫結ref屬性 ref = "屬性值" this.$refs.屬性值
自定義指令:Vue.directive("指令名稱", function(el, binding){
el 繫結指令的標籤元素
binding 指令的所有資訊
<div id="app01"> <div v-text="vue" v-pos="position" :class="{box:show} "> </div> </div> <script src="static/vue.min.js"></script> <script> Vue.directive('pos',function (el,bindding) { if (bindding.value){ el.style['position']='fixed'; el.style['right']=0; el.style['bottom']=0 } }) let vm =new Vue({ el:'#app01', data:{ vue:'hello vue', show:true, position:true } })