var vm = new Vue {
　　el: "#my_id"
　　, data: {
　　　　name: "test"
　　　　,url: ""
    　　,txt:"測試" 
　　}
　　,methods: {
　　　　GetData: function(){
　　　　　　//獲取資料
          return this.txt；
　　　　}
　　}
　　,computed: { 
　　　　// 計算屬性的 getter 
　　　　reversedMessage: function () { 
　　　　　　// `this` 指向 vm 例項 
　　　　　　return this.txt.split('').reverse().join('');//反轉字串
　　　　} 
　　}
   ，filters： {
　　　　capitalize: function (value) { 
　　　　　　　if (!value) return ''；
　　　　　　　　return value;
　　　　 }
   }
};

<div id = "my_id">

{{ txt| capitalize }}

</div>

data 用於定義屬性，例項中有3個屬性分別為：name、url、txt;
methods 用於定義的函式，可以通過 return 來返回函式值;
呼叫例項屬性和方法：
vm.$el == "my_id";
alert(vm.$data);

methods,computed，效果上兩個都是一樣的；
computed 基於依賴快取，只有相關依賴發生改變時才會重新取值。
而使用 methods ，在重新渲染的時候，函式總會重新呼叫執行。

computed 屬性預設只有 getter ，不過在需要時你也可以提供一個 setter

var vm = new Vue({
  el: '#app',
  data: {
    name: 'a',
    url: 'http://www.google.com'
  },
  computed: {
    site: {
      // getter
      get: function () {
        return this.name + ' ' + this.url
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.name = names[0]
        this.url = names[names.length - 1]
      }
    }
  }
})
// 呼叫 setter， vm.name 和 vm.url 也會被對應更新
vm.site = 'B http://www.baidu.com';

v-html: 輸出html程式碼
<div id="app"> 
　　<div v-html="message"></div> 
</div> 
<script> new Vue({ el: '#app', data: { message: '<h1>菜鳥教程</h1>' } }) </script>

指令： 帶有 v- 字首的特殊屬性
v-bind
v-if/v-else-if/v-else
v-show 
v-for
v-model: 在input、select、textarea、checkbox、radio 等表單控制元件元素上建立雙向資料繫結，根據表單上的值，自動更新繫結的元素的值。
v-on 

v-for:

<div id="app"> 
　　<ul> 
　　　　<li v-for="value in object"> {{ value }} </li> 
　　</ul> 

　　<ul> 
　　　　<li v-for="(value, key)in object">{{key}}: {{ value }} </li> 
　　</ul>

　　<ul> 
　　　　<li v-for="(value, key, index)in object">{{index}}.{{key}}: {{ value }} </li> 
　　</ul>

</div> 

<script> new Vue({ el: '#app', data: { object: { name: 'a', url: '' } } }) </script>