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-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>