vue1.0

<template>
  <div id="app">
    <p>{{title}}</p>
    <p v-text="title"></p>
    <p v-text="title2"></p>
    <p v-html="title2"></p>
  </div>
</template>
<script>
export default {
  data () {
    return {
      title: 'this is a title!'
 
,
      title2: '<span>?<span> this is a title!'
    }
  }
}
</script>

• {{title}}和v-text="title"等同
• export default最後生成 new vue({ 引數})

• 新的ES6寫法等同於舊的寫法

  //新的ES6
  data () {
  return {
    title: 'this is a title!'
  }
  }

  //舊的寫法
  data: function (){
  return {
    title: 'this is a title!'
  }
  }

• v-html 解析渲染html標籤

v-for 及v-bind控制class、v-on繫結事件、v-model雙向繫結

<template>
  <div id="app">
    <p>{{title}}</p>
    <!-- <p v-text="title"></p> -->
   <!-- <p v-text="title2"></p> -->
    <!-- <p v-html="title2"></p> -->
    <input v-model="newItem"
 
 v-on:keyup.enter="addNew">
    <ul>
      <li v-for = "item in items" v-bind:class="{finished: item.isFinished}" v-on:click="toggleFinished(item)">
        {{item.label}}
      </li>
    </ul>
  </div>
</template>
<script>
import Store from './store'
export default {
  data () {
    return {
      title: 'this is a todolist!',
      title2: '<span>?<span> this is a todolist!',
      items: Store.fetch(),
      newItem: ''
    }
  },
  watch: {
    items: {
      handler (items) {
        Store.save(items)
      },
      deep: true
    }
  },
  methods: {
    toggleFinished (item) {
      item.isFinished = !item.isFinished
    },
    addNew () {
      this.items.push({
        label: this.newItem,
        isFinished: false
      })
      this.newItem = ''
    }
  }
}
</script>

<style>
.finished{
  text-decoration: underline;
}

html {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

#app {
  color: #2c3e50;
  margin-top: -100px;
  max-width: 600px;
  font-family: Source Sans Pro, Helvetica, sans-serif;
  text-align: center;
}

#app a {
  color: #42b983;
  text-decoration: none;
}

.logo {
  width: 100px;
  height: 100px
}
</style>

store.js

const STORAGE_KEY = 'todos-vuejs'
export default {
    fetch () {
        return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]')
    },
    save (items) {
        window.localStorage.setItem(STORAGE_KEY, JSON.stringify(items))
    }
}

• v-bind:class簡寫:class
• v-on:click簡寫@click
• v-on:keyup.enter簡寫@keyup.enter 回車keyup事件
• v-model 雙向繫結

JSON.parse()和JSON.stringify()

• parse用於從一個字串中解析出json 物件。例如
  var str='{"name":"cpf","age":"23"}'

經 JSON.parse(str) 得到：

Object: age:"23"
        name:"cpf"
        _proto_:Object

ps:單引號寫在{}外，每個屬性都必須雙引號，否則會丟擲異常

• stringify用於從一個物件解析出字串，例如

var a={a:1,b:2}

經 JSON.stringify(a)得到：

“{“a”:1,"b":2}”

自定義事件

• 使用 $on() 監聽事件；

• 使用 $emit()在它上面觸發事件；

• 使用 $dispatch()派發事件，事件沿著父鏈冒泡；

• 使用 $broadcast()廣播事件，事件向下傳導給所有的後代。

父元件向子元件傳遞

1、採用props

父元件

<component-a msgfromfather='you die!!!!'></component-a>

子元件

<template>
  <div class="hello">
    <h1>{{ msgfromfather }}</h1>
    <button v-on:click="onClickMe">click!</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  props: ['msgfromfather'],
  methods: {
    onClickMe () {
      console.log(this.msgfromfather)
    }
  }
}
</script>
<style scoped>
h1 {
  color: #42b983;
}
</style>

• props監聽父元件傳遞過來的資訊
• 傳遞過來後，可直接引用，就如已經傳遞過來資料塞到data

2、使用event,$broadcast()從父元件傳遞訊息下去

父元件

<template>
<button v-on:click="talkToMyBoy('be a good boy')">talkToMyBoy</button>
  </div>
</template>
<script>
import Store from './store'
import ComponentA from './components/componentA'
export default {
  components: {
    ComponentA
  },
  methods: {
    talkToMyBoy (msg) {
      //console.log(msg);
      this.$broadcast('onAddnew',msg)
    }
  }
}
</script>

子元件

<template>
  <div class="hello">
    <h1>{{ listentomyfather }}</h1>
  </div>
</template>
<script>
export default {
  data () {
    return {
      listentomyfather: 'Hello from componentA!'
    }
  },
  events: {
    'onAddnew' (msg) {
      //console.log(msg)
      this.listentomyfather = msg
    }
  }
}
</script>

子元件向父元件傳遞

1.子元件$emit()觸發，父元件$on()監聽

<template>
  <div class="hello">
    <button v-on:click="onClickMe">telltofather</button>
  </div>
</template>

<script>
export default {
  methods: {
    onClickMe () {
      this.$emit('child-tell-me-something',this.msg)
    }
  }
}
</script>

父元件

<template>
<div id="app">
<p>child tell me: {{childWords}}</p>
<component-a v-on:child-tell-me-something='listenToMyBoy'></component-a>
</div>
</template>

<script>
import Store from './store'
import ComponentA from './components/componentA'
export default {
  components: {
    ComponentA
  },
  data () {
    return {
      childWords: ''
    }
  },
  methods: {
    listenToMyBoy (msg) {
      this.childWords = msg
    }
  }
}
</script>

2.不使用v-on,使用event ,子元件$dispatch()，從子元件傳遞訊息上去

子元件

<template>
  <div class="hello">
    <button v-on:click="onClickMe">talktomyfather</button>
  </div>
</template>

<script>
export default {
  methods: {
    onClickMe () {
      this.$dispatch('child-tell-me-something',this.msg)
    }
  }
}
</script>

父元件

<template>
  <div id="app">
    <p>child tell me: {{childWords}}</p>
    <component-a></component-a>
  </div>
</template>

<script>
import Store from './store'
import ComponentA from './components/componentA'
export default {
  components: {
    ComponentA
  },
  data () {
    return {
      childWords: ''
    }
  },
  events: {
    'child-tell-me-something' (msg) {
      this.childWords = msg
    }
  }
}
</script>