vue入門總結

首先了解一下基本指令

v-mind.title = '屬性名'  給某個dom添加屬性

v-model = '能夠是方法名、數據、算法、布爾屬性'

v-if='true/false'  讓元素消失，是指從頁面上刪除元素，或者顯示，是從頁面上添加元素
也能夠當if條件用，
可是vue通常須要條件判斷，一般使用三目運算

v-show= 'true/false' 讓元素隱藏、顯示    跟display:block/none相同

:key = '任意值'   不重複使用的指令

:class = {a,b}/{a:b,c:d}/[a,b,c]    class添加（前面不要少了冒號）

v-for('(i,index) in list(對象、數組)')   給什麼元素上面添加，就循環這個元素執行

v-on:事件名='function名'  也可簡寫   @click='function名'

eg:    v-on:click='fun'     @click='fun';   fun 就是函數名，簡寫的意思

若是事件須要傳參  能夠使用function名(參數)

按鍵事件@key.鍵名/code值='fun'   回車的時候觸發什麼事件

eg:    @key.enter='fun'     @key.13='fun'

若是以爲vue方法知足不了本身的需求，那就自定義Vue方法，舉例獲取焦點focus

`1.先來一個全局定義

Vue.directive('focus', {
  // 當綁定元素插入到 DOM 中。
  inserted(el) { 
 // /*el表明所綁定的元素*/
    // 聚焦元素
    el.focus()
  },
  update(el) {
    el.focus();
  }
});

2.在看一個局部定義

let vm = new Vue({
  // 聲明一個vue的對象
  el: '.ipt',
  //el:後面接選擇器的內容
  directives: {
  //自定義函數都放在directives
    focus: {
      // 指令的定義
      inserted: function(el) {
        el.focus()
      }
    }
  }
})

建立一個文件爲Vue，右擊文件Vue空白處，打開git 輸入

npm i -S vue     回車

新建一個html文件，在node_modules裏面找到vue.js,用script引入

每次使用VUE都須要先引用vue.js，而後new一個新對象，用變量保存起來

View視圖層

<div id=vm>
{{msg}}
<ul>
  <li @click='fun'>
  點我顯示執行fun方法
  </li>
  <li :class='{a:visibility===true}'>
    我是class標籤增長
  </li>
  <li>
    <p v-for='(i,index) in todolist'>
      姓名：<span>{{i.name}}</span>
      年齡：<span>{{i.age}}</span>
    </p>
  </li>
</ul>
</div>

<script src="./vue.js" charset="utf-8"></script>

Model層：

<script type="text/javascript">
var app = new Vue({
  el: '#vm',//選擇器
  data: {
    //存儲值地方
    msg: '我是vue',
    cla:'biaoqian',
    visibility: true,
    todolist: [
      {'name':'lsk','age':12},
      {'name':'ksj','age':16},
      {'name':'lxk','age':14},
      {'name':'lqk','age':15}
    ]
  },
  methods: {
    //存儲方法的地方
    fun: () => {
      console.log('我是fun方法');

    }
  },
  computed: {
    //儲存計算方法的地方
    showNuw() {
      return this.todolist.length //this指的new 出來的新對象 app
    },
    AllDown: {
      get() {
          console.log("我是get")
        },
        //頁面刷新先執行一次
        //當執行AllDown方法,
        //則先運行set,再運行一次get
        set(vaule) {
          console.log("我是set")
          //而且vaule 這是指的調用者的新值
        }
    }
  },
  watch: {
    //儲存監聽方法的地方
    todolist: {
      //todolist 是監聽對象的名
      deep: true, //啓動監聽
      handler: this.showNuw //this指的new 出來的新對象 app    或者方法()=>{}
    }
  }
})
</script>

還有不少小細節沒總結完，後期會慢慢補上的