npm i vue-cli -g vue init webpack vue01 cd vue01 npm install npm run dev

vue基礎

<li v-for="(index,item) in list " :key=index>{{item}}</li>  迴圈

<h1 :title=title>{{ msg }}</h1>  繫結屬性及值

雙向資料繫結 獲取事件物件等

<template>
  <div class="hello">
    <h1 :title=title>{{ msg }}</h1>
    <img :src="url" alt="">
    <!-- 繫結html程式碼 -->
    <div v-html='h'></div>
    <div v-text='h'></div>
    <ul>
      <li v-for="(index,item) in list" :key=index :class="{'active':index===1}">{{item}}</li>
    </ul>
    <hr>
    <input type="text" v-model="msg">
    <button @click="getMsg()">獲取表單裡的資料</button>
    <button @click="setMsg()">設定表單裡的資料</button>
    <hr>
    <input type="text" ref="input">
    <button @click="getInput()">獲取第二個輸入框值</button>
    <hr>
    <button @click="addData()">增加資料</button>
    <hr>
    <ul>
      <li v-for="(item,key) in arr" :key=key>{{item}}</li>
    </ul>
    <hr>
    <button @click="delData('111')">執行方法傳值</button>
    <button data-aid='123' @click="eventData($event)">事件物件</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome Vue.js App',
      list: [1, 2, 3],
      title: 'vue app',
      url: '../assets/logo.png',
      h: '<div>哈哈</div>',
      flag: true,
      arr: []
    }
  },
  methods: {
    getMsg () {
      // alert('執行方法')
      this.msg = ''
    },
    setMsg () {
      this.msg = '設定資料'
    },
    getInput () {
      console.log(this.$refs.input.value)
      this.$refs.input.style.background = 'red'
    },
    addData () {
      for (let i = 0; i < 10; i++) {
        this.arr.push('我是第' + i + '條')
      }
    },
    delData (val) {
      alert(val)
    },
    eventData (e) {
      console.log(e)
      e.srcElement.style.background = 'red'
      console.log(e.srcElement.dataset.aid) // 獲取自定義屬性的值
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.active {
  color: red;
  background: red;
}
</style>