Vue初识

Vue.js

1.起步
    *实例化格式：
            var vm = new Vue({
                //some codes
                el:        //标记，可以是ID，class等属性
                data:{
                
                }    //data 用于定义属性
                methods:{
                    demo: function(){
                        return xxx
                    }
                }
            })
    在templates中，用{{}}实现输出，注意methods需要使用{{demo()}}形式进行输出，但是不能在属性中使用{{}}，属性应使用v-bind:id=“”de 方式
    *注意：methods中，要使用data中的属性，需要加this.属性名
    *数据属性：
            var data = {'id':1,'name':wangran}
            var vm = new Vue({
                data:data
            })
            他们是同一个对象，当一个改变的时候，另一个也会改变。
    
2.模板语法：
    *v-html="message",其中message为data中定义的message属性(变量)    -> 类似于 .html(message)
    *v-bind 简写为 : ，主要用于绑定并切换class,动态值等等
    *v-if 用于判断true of false ,可以做对象隐藏，权限控制之类的。
        *栗子：<p v-if="seen">现在你看到我了</p>
    *v-on 监听DOM事件，简写为@
        *栗子：<a v-on:click="doSomething">
    *v-model 很重要，实现数据的双向绑定
        * <input v-model="message">,当在dom中输入时，变量也会跟着改变，反过来也是，var vm = new Vue({el:xx,data:{message:'傻逼'})
            
    *以上v- 代表指令，参数是指令冒号后面的部分，例如：v-bind:href="url" var vm = new Vue({el:xx,data:{url:'xxxxxxxx'}})
        *注意，这种=后面接变量的，一定要用双引号把变量括起来。
    
    
    *可以再new Vue({filters:function(values){}})进行过滤器的自定义
        *这里可能用的不多
3.条件语法：
    模板中可以这样使用：
    *v-if  - v-else-if  - v-else
    *v-show="message",message为true时显示，false时不显示。
4.循环语法:
    *v-for用于循环，可循环数组、对象、整数
        <div v-for="site in sites">
            {{site.name}}
        <div>
        <script>
            new Vue({
              el: '#app',
              data: {
                sites: [
                  { name: 'Runoob' },
                  { name: 'Google' },
                  { name: 'Taobao' }
                ]
              }
            })
        </script>
5.计算属性：
    computed
    methods 可以和computed 互换，且computed基于依赖缓存，以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。    
    computed默认只有get,无set。需要显示定义他
6.监听属性：
    watch 引用如下：    -->参考 onchange
    vm.$watch('counter', function(nval, oval) {
        //doSomething
    });
    counter 为需要监听的属性，也可以放在new Vue({watch:})中。
7.事件处理器
    v-on
8.表单
    v-model 实现双向绑定，上面已经提及了。
    *注意，当v-model 绑定单选、多选、下拉框的时候，只能选已有的，不能通过设置属性值改变。
    .lazy    加上之后是改变才触发
    .number    变为数字
    .trim    自动去除首尾空格
    这里的全选/取消全选值得一看
9.组件
    全局和局部组件
        *全局组件创建：            // 注册
                                Vue.component('runoob', {
                                  template: '<h1>自定义组件!</h1>'
                                })
                                // 创建根实例
                                new Vue({
                                  el: '#app'
                                })
        *局部组件创建：
                                *// 创建根实例
                                new Vue({
                                  el: '#app',
                                  components: {
                                    // <runoob> 将只在父模板可用
                                    'runoob': Child
                                  }
                                })
    prop 是父组件用来传递数据的一个自定义属性。
    父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"：