vue入门学习

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-bindv-if/v-else-if/v-elsev-show v-forv-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>