Vue总结（二）

原始引用：开发时使用开发版本，线上使用生产版本。
原始引用到html中，在浏览器中控制台输入Vue,输出一个函数就可以。
defineProperties实现的数据绑定。

//defineProperties
// app.message = "assassin" vue实现了对象直接修改对象下面的任何嵌套的对象或者属性

var app = new Vue({
    el: "#root",
    data: {
        message: "hello world"
    }
});

v-bind(😃

条件 v-if直接影响DOM节点是否存在

v-show，只是display:none,DOM存在

循环：v-for

<ul>
    <li v-for="item in items"></li>
</ul>

var app = new Vue({
    el: "#root",
    data: {
        items: [1,2,3,4]
    }
});

v-for的键

<ul>
    <li v-for="(item,index) in items" v-bind:key="'item'+index"></li>
    //index:索引，key设置的键
</ul>

绑定事件：v-on，对应的写在methods对象中。

<button v-on:click="func"></button>

methods: {
    func: function() {
        alert(0);
    }
}

<ul>
    <li v-for="(item,index) in items"><span v-on:click="funcDelete(index)">删除</span></li>
    //传递循环中的参数
</ul>

var app = new Vue({
    el: "#root",
    data: {
        items: [1,2,3,4]
    },
    methods: {
        funcDelete: function(index) {
            this.items.splice(index,1);//删除index的这一项
        }
    }
});

数据双向绑定v-model

<input type="text" v-modle="message"/>
var app = new Vue({
    el: "#root",
    data: {
        message: "assassin"
    }
});

组件

Vue.component(),定义全局组件

<div id="root"></div>

var app = new Vue({
    el: "#root",
    template: `
    <div>
        //...要用一个大的容器进行包装
    </div>
    `,
    data: {},
    mthods: {}
});//大组件

小组件：

Vue.component("list-item",{//item此时定义的名称
    template: `<div>{{item_props}}</div>`,
    props: ["item_props"]//申明从父级拿来的东西
});

//使用
<list-item v-for="item in items" v-bind:item_props="item"></list-item>
//绑定子组件的item

详细案例：

   <div id="root">
        <!-- <input type="text" v-model="message">
        <button @click="addClick">submit</button>
        <ul>
            <li v-for="item in items">{{item}}</li>
        </ul> -->
   </div> 

   <script>

   var App = new Vue({
       el: "#root",
       template:`
        <div>
            <input type="text" v-model="message">
            <button @click="addClick">submit</button>
            <ul>
                <li v-for="(item,index) in items">{{item}}<span v-on:click="hundleDelete(index)">  Delete</span></li>
            </ul>
        </div>
       `,
       data: {
           message: "",
           items: []
       },
       methods: {
            addClick() {
                this.items.push(this.message);
                this.message = "";
            },
            hundleDelete(index) {
                //alert(index);
                this.items.splice(index,1);
            }
       }
   });
   </script>

子组件与父组件之间的通信

<div id="root">
        <!-- <input type="text" v-model="message">
        <button @click="addClick">submit</button>
        <ul>
            <li v-for="item in items">{{item}}</li>
        </ul> -->
   </div> 

   <script>

    Vue.component("templete",{
        template: `<li>{{itemprops}}<span v-on:click="handleDelete(index)">Delete</span></li>`,
        props: ["itemprops","index"],//从父组件v-bind绑定中（传递到定义函数中的参数）接受父组件的参数
        /*
        data: {
            props: []
        }
        */
        methods: {//组件自身上触发事件
            handleDelete: function(index) {
                this.$emit("delete",index);
                //$emit(),向外触发事件，父组件监听，在v-bind监听emit所定义的事件，添加父组件的方法
            }
        }
    });

   var App = new Vue({
       el: "#root",
       template:`
        <div>
            <input type="text" v-model="message">
            <button v-on:click="addClick">submit</button>
            <ul>
                <templete v-for="(item,index) in items" 
                v-bind:itemprops="item" v-bind:index="index" 
                v-on:delete="handleDelete"></templete>
            </ul>
        </div>
       `,//v-bind绑定父组件向子组件传参传参，
       data: {
           message: "",
           items: []
       },
       methods: {
            addClick() {
                //alert(this.message);
                this.items.push(this.message);
                this.message = "";
            },
            handleDelete(index) {
                //console.log(argument);
                this.items.splice(index,1);
            }
       }
   });
   </script>