Vue基础-Vue入门

最新推荐文章于 2023-05-14 23:05:21 发布
不懂代码的小石
最新推荐文章于 2023-05-14 23:05:21 发布
阅读量3.5k
点赞数 29
分类专栏： vue
vue 专栏收录该内容
8 篇文章 0 订阅
订阅专栏
一、Vue入门基础知识

1、Vue使用的基本操作

i.	先下载，引入vue.js
ii.	Vue，实例化一个vue实例化对象（new Vue({})）
    1.	新建一个vue实例化对象（Vue是一个构造函数）
    2.	执行vue构造函数中每一句代码
    3.	将新创建的vue实例化对象赋值给vue构造函数中的this

iii.	往vue实例化对象中传入一个对象（Vue实例化传入的对象里面的值也都为对象，以键值形式对存在，如data对象）

2、Vue的基础知识（应用：普通版的todolist（待办事项））

1) el: 节点挂载

限定Vue语法的作用范围

2) Data(需要渲染的数据，Vue 实例的数据对象)

    a) data的类型可以为：Object | Function。

    注：组件的定义只接受 function（因为函数有自己的作用域，每一个实例的data属性都是独立的）

    b) data可以为：

        1.    自定义数据

        2.    通过ajax获取的后台数据

        3.    Data是一个函数

 3）Vue语法，实现对(DOM)节点的渲染、删除、添加

    a) 模板渲染{{ obj }}（data中的数据可以直接在html中显示,让js变量直接在html中使用）

    b) v-for (列表渲染，使用for循环遍历数据生成节点，遍历对象和数组)，数据驱动视图

    使用：1. 用 v-for 把一个数组对应为一组元素

                v-for=”(item,index) in list”

               list为源数据数组并且item是数组元素迭代的别名

                index为当前项的索引

                2、一个对象的 v-for

                v-for="（value,key） in object"

                object为data中定义的一个对象，value为对象的值，key为对象的键名

    c) 条件渲染v-if、v-show（使用数据隐藏和显示节点）
        1.v-if删除了节点
        2.v-show隐藏了节点(使用display:none隐藏了节点)

  d )删除节点，使用@click时间并在methods中定义delitem删除函数，并用v-bind绑定自定义属性，如：:data-id="item.id"

        事件处理@click与回调函数methods （与v-bind结合使用，因为在进行操作的时候需要传入值）

        1.	在节点上直接绑定click事件
        2.	在methods属性中定义函数
        3.	methods中使用data中的数据必须使用this访问
        4.	this代表vue实例化对象

   e) 添加节点,通过input的value值与data绑定

   v-model与表单元素的value值的双向数据绑定（在表单控件或者组件上创建双向绑定,在节点上直接修改value属性）
            双向数据绑定

           1.	将表单中input的值value和data中值绑定起来

           （data设置该数据的属性值title:"默认值"，input中绑定v-model="title"，添加按钮绑定@click="additem"）

            2.	data改变input[value]改变

           data中的title的值改变，input中的value也会发生改变

            3.	Input[value]改变data改变

            在input中输入值，点击添加按钮，data中的数据发生改变

    f)  绑定属性（自定义属性）（绑定属性值）V-bind:href，data-id
            1.	简写(：href)
            2.	v-bind：的缩写 : （冒号）

    g)  v-if删除了节点,页面审查不到 

            v-show隐藏了节点(使用display:none隐藏了节点),页面能够审查到

  h)  template：定义组件模板，模板中的内容即为组件的内容
        1.	在template标签中写html模板,并标注id
        2.	在组件中使用template属性通过id引用template标签 

        3.	模板将会替换挂载的元素。挂载元素的内容都将被忽略

        4.    template中的html不会被浏览器首次加载时所渲染，在调用了组件之后才渲染的。

也就是说:template: '<App/>' 表示用<app></app>替换index.html里面的<div id="app"></div>
   i) 应用：普通版的todolist

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
    <title>vue入门案例</title>
</head>
 
<body>
    <div style="width: 500px;margin:0 auto;" id="app">
            <!-- V-if删除了节点,页面审查不到 -->
        <h1 v-if="status">{{message}}待办事项</h1>
        <!-- V-show隐藏了节点(使用display:none隐藏了节点),页面能够审查到-->
        <h1 v-show="status">{{message}}待办事项</h1>
        <p>即将添加的待办事项： {{title}}</p>
        <table class="table table-hover">
            <tr>
                <th>id</th>
                <th>标题</th>
                <th>操作</th>
            </tr>
            <!-- v-for,使用for循环遍历数据生成节点，遍历对象和数组-->
            <!-- v-bind的缩写 : （冒号）,绑定属性（自定义属性） -->
            <tr :data-id="item.id" v-for="(item,index) in list">
                <td>{{item.id}}</td>
                <td>{{item.title}}</td>
                <td>
                    <button class="btn btn-info" @click="delItem(item.id)">删除</button>
                </td>
            </tr>
            <!-- v-for遍历对象 -->
            <tr  v-for="(value,key) in object">
                <td>{{key}}</td>
                <td>{{value}}</td>
                <td>
                    <button class="btn btn-info">删除</button>
                </td>
            </tr>
        </table>
        <div class="form-group">
            <label for="exampleInputEmail1">添加待办事项</label>
            <!--V-model与表单元素的value值的双向数据绑定 -->
            <!-- 1 将表单中input的值value和data中值绑定起来
               2  data改变input[value]改变
               3  Input[value]改变data改变 -->
            <input v-model="title"  type="text" class="form-control" id="exampleInputEmail1" placeholder="请输入待办事项">
        </div>
        <button @click="addItem()"  type="submit" class="btn btn-default">添加</button>
        <div>
            <p>作者信息：{{author}}</p>
            <p>来源: <a :href="url">点击打开</a></p>
        </div>
    </div>
    <!-- <template id="clearApp">
        <h1>清空app</h1>
    </template> -->
    <script src="../js/vue.js"></script>
    <script>
        //VUE是一个构造函数
        //1 实现数据的渲染 删除 添加
 
        var vm=new Vue({
            //节点挂载，用来限定vue的语法范围
            el: "#app",
            // template:"#clearApp",
            //data为需要渲染的数据
            //模板渲染{{ obj }}
            //（data中的数据可以直接在html中显示,让js变量直接在html中使用）
            data: function () {
                console.log(this);
                return {
                    author:'xiean',
                    status:false,
                    url:'http://www.baidu.com',
                    message: '小明的: ',
                    title:'默认值',
                    list: [
                        { id: 0, title: "羽毛球" },
                        { id: 1, title: "乒乓球" },
                        { id: 2, title: "篮球" },
                        { id: 3, title: "足球" }
                    ],
                    object:{
                        name:"谢",
                        sex:"女",
                        address:"怀化"
                    }
                }
            },
            methods: {
                delItem: function (id) {
                    for (var key in this.list) {
                        if (this.list[key].id == id) {
                            this.list.splice(key, 1);
                        }
                    }
                },
                addItem:function(){
                    this.list.push({id:this.list.length,title:this.title});
                    console.log(this.list);
                }
            }
        });
      
    </script>
</body>
 
</html>
3、Vue组件

1）组件的创建与注册

创建组件：Vue.extend({})
创建组件，要在实例化对象之前创建
组件是新的vue实例或者说是精简版的vue实例
每一个组件里必须有一个根元素
在父组件中使用components注册组件
  2) 组件通信

    1.	父子组件通信（通过局部注册）

    1)父组件传数据给子组件：（可以实现列表的渲染等操作）

        a)	为什么数据要放在父组件，数据需要分发，数据可能会在多个子组件中使用，所以vue官方推荐所有的数据都放在父组件中
        b)	父组件调用子组件的时候，给子组件绑定自定义属性，将值传递给子组件
       c)	子组件通过props接收父组件传递过来的数据
        d)	props中的数据可以直接在子组件的模板中使用
        e)	props在子组件中才有，父组件中没有
    2)	子组件传数据给父组件：$emit （用于实现节点的删除和添加等操作）
        a)	因为数据在父组件中，所以我们需要通过子组件将需要操作的数据传递给父组件，让父组件去操作数据
        b)	子组件通过$emit自定义一个事件，并且将需要操作的数据通过$emit传递给父组件
        c)	父组件我们需要@符来触发自定义事件，并且定义函数当做事件的回调函数，回调函数中形式参数接收子组件传过来的数据
a) 列表渲染（步骤）

渲染节点时，父组件需要调用子组件，而数据在父组件中，子组件不能直接使用，所以父组件需要传数据给子组件，子组件获取数据后进行渲染。
在父组件中绑定自定义属性如( :list="list")，子组件通过props接收父组件传递过来的数据，props接收的数据可以直接在子组件的模板中使用，然后用v-for进行数据的列表渲染。
ps: props在子组件中才有，父组件中没有
b) 删除节点

删除节点，在子组件中点击删除按钮获取需要删除的记录的id，并将id传递给父组件，父组件中定义delitem进行删除。
子组件通过$emit自定义一个事件，并将需要操作的数据通过$emit传递给父组件 （如：this.$emit("delitem",id)）
父组件中需要@符去触发自定义事件，并且自定义函数当作事件的回调函数，回调函数中形式参数接收子组件中传过来的数据。
c) 添加节点

添加节点首先需要进行input value值和data数据的双向绑定，然后通过 子组件的additem方法获取输入的对象，并通过$emit将数据对象传入至父组件中，父元素通过@符触发自定义事件，接收子组件传递过来的数据，并实现定义的函数。将数据push到list中。

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
    <title>父子组件通信版todolist</title>
</head>
 
<body>
    <div style="width: 500px;margin:0 auto;" id="app">
        <h1>待办事项</h1>
        <myh1></myh1>
        <mytable :list="list" @delitem="delitem"></mytable>
        <myadd :length="this.list.length" @additem="additem"></myadd>
    </div>
    <!-- 每一个组件必须有一个根元素，要不然会报错 -->
    <template id="myadd">
        <div>
            <div class="form-group">
                <label for="exampleInputEmail1">添加待办事项</label>
                <input v-model="title" type="text" class="form-control" id="exampleInputEmail1" placeholder="请输入待办事项">
            </div>
            <button @click="additem()" type="submit" class="btn btn-default">添加</button>
        </div>
    </template>
    <template id="mytable">
        <table class="table table-hover">
            <tr>
                <th>id</th>
                <th>标题</th>
                <th>操作</th>
            </tr>
            <tr :data-id="item.id" v-for="(item,index) in list">
                <td>{{item.id}}</td>
                <td>{{item.title}}</td>
                <td>
                    <button @click="delitem(item.id)" class="btn btn-info">删除</button>
                </td>
            </tr>
        </table>
    </template>
    <script src="../js/vue.js"></script>
</body>
 
<script>
    //vm (ViewModel 的缩写) 
    //创建组件，每一个组件必须有一个根元素
    var myh1 = Vue.extend({
        //组件的模板
        template: "<h1>我是h1</h1>",
        data: function () {
            return {
 
            }
        }
    })
    var mytable = Vue.extend({
        props: ['list'],
        template: "#mytable",
        data: function () {
            return {
 
            }
        },
        methods: {
            delitem: function (id) {
                this.$emit("delitem", id);
            }
        }
    })
    var myadd = Vue.extend({
        props:['length'],
        template: "#myadd",
        data: function () {
            return {
                title: "默认值"
            }
        },
        methods:{
            additem:function(){
                this.$emit("additem",{id:this.length,title:this.title});
            }
        }
    })
    var vm = new Vue({
        el: "#app",
        data: function () {
            return {
                list: [
                    { id: 0, title: "吃饭" },
                    { id: 1, title: "睡觉" },
                    { id: 2, title: "写代码" },
                    { id: 3, title: "打游戏" },
                ]
            }
        },
        methods: {
            delitem: function (id) {
                for (var key in this.list) {
                    if (this.list[key].id == id) {
                        this.list.splice(key, 1);
                    }
                }
            },
            additem:function(obj){
                console.log(obj);
                this.list.push(obj);
            }
        },
        //注册组件
        components: {
            myh1,
            mytable,
            myadd
        }
    })
 
</script>
 
</html>

2、兄弟组件通信（全局注册，在创建的时候就已经注册了）

    a)	使用Vue.component定义（包括创建和注册）全局组件
    b)	定义另外一个vue实例vm
    c)	在添加数据数据兄弟组件中使用vm.$emit传送数据
    d)	在获取的数据兄弟组件中created生命周期函数中使用vm.$on来接收数据，使用v-for渲染数据，绑定点击事件，删除元素

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
    <title>兄弟组件通信</title>
</head>
 
<body>
    <div style="width: 500px;margin:0 auto;" id="app">
        <h1>待办事项</h1>
        <mytable></mytable>
        <myadd></myadd>
    </div>
    <template id="mytable">
        <table class="table table-hover">
            <tr>
                <th>id</th>
                <th>标题</th>
                <th>操作</th>
            </tr>
            <tr  v-for="item in list">
                <td>{{item.id}}</td>
                <td>{{item.title}}</td>
                <td>
                    <button @click="delitem(item.id)" class="btn btn-info">删除</button>
                </td>
            </tr>
        </table>
    </template>
    <!-- //定义组件模板 -->
    <template id="myadd">
        <div>
            <div class="form-group">
                <label for="exampleInputEmail1">添加待办事项</label>
                <input v-model="title" type="text" class="form-control" id="exampleInputEmail1" placeholder="请输入待办事项">
            </div>
            <button @click="additem" type="submit" class="btn btn-default">添加</button>
        </div>
    </template>
    <script src="../js/vue.js"></script>
</body>
 
<script>
    //通过两个子组件交互，实现通信
    //定义另外一个vue实例 
    var vm = new Vue();
    //组件的创建和注册
    Vue.component('mytable', {
      //使用组件模板
        template: "#mytable",
        data: function () {
            return {
                list: []
            }
        },
        methods:{
            delitem:function(id){
                for(var key in this.list){
                    if(this.list[key].id==id){
                        this.list.splice(key,1);
                    }
                }
            }
        },
        //生命周期函数，一个在创建的过程中会自己执行的函数
        created:function(){
            //保存指向mytable的地址
            var _this=this;
            vm.$on("additem",function(obj){
               _this.list.push(obj);
            });
        }
    })
    Vue.component('myadd', {
        template: "#myadd",
        data: function () {
            return {
                id:0,
                title:"默认值"
            }
        },
        methods:{
            additem:function(){
            vm.$emit("additem",{id:this.id++,title:this.title});
            }
        }
    })
    new Vue({
        el: "#app"
    })
</script>
 
</html>
3、生命周期函数

d)	Vue生命周期函数（执行vue构造函数的过程中，必须执行的代码，执行生命周期就是执行构造函数）
        i.	生命周期：Vue 实例化对象从开始创建、初始化数据、编译模板、挂载节点elDom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期，各个阶段有相对应的事件钩子（在这个过程中会自己执行的函数）
        ii.	beforeCreate：vue实例化对象创建完成之前
            1.	this已经指向vue实例化对象，但不能访问data和methods中的属性和方法
        iii.	created：vue实例化对象创建完成
            1.	this已经指向vue实例化对象，可以访问data和methods中的属性和方法
            2.	未挂载到DOM，不能访问到$el属性
            3.	作用：
a)	常用于首屏数据渲染时，发送ajax请求获取数据。
        iv.	beforeMount：通过数据生成了全部虚拟节点（使用createElement创建的节点，但是这些节点没有插入到html文档中），但还没有挂载到el节点上。
            1.	可以访问到$el
        v.	mounted：vue实例挂载到el节点（DOM）上
            1.	把通过数据生成的虚拟节点，挂载 到el节点中
            2.	作用：
a)	常用于操作真实的dom节点
        vi.	beforeUpdate：
            1.	手动添加的虚拟节点，但是还未插入到el（真实节点）中更新之前
            2.	不能操作该节点
        vii.	updated：
            1.	手动添加的虚拟节点已经更新完成。
            2.	可以操作到手动添加的节点
        viii.	beforeDestroy：(调用vm.$destroy()销毁实例)
            1.	vue实例销毁之前调用。
        ix.	destroyed：
            1.	实例销毁后调用，调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>生命周期函数</title>
</head>
 
<body>
 
    <div id="app">
        <ul>
            <li v-for="item in list">{{item}}</li>
        </ul>
        <button @click="additem">添加li</button>
    </div>
 
    <script src="../js/vue.js"></script>
    <!-- <script src="js/vue-router.js"></script> -->
    <script>
        var vm=new Vue({
            el: "#app",
            // 1.this已经指向vue实例化对象，但不能访问data和methods中的属性和方法
            // beforeCreate:function(){
            //     console.log(this);//输出vue的实例
            //     console.log(this.title);//输出undefined
            //     this.sayName();
            // },
            // created常用于首屏数据渲染时，发送ajax请求获取数据。
            // created:function(){
            //     console.log(this);//输出vue的实例
            //     console.log(this.title);//输出小明
            //     this.sayName();//输出hello！小明
            //     // $el即为#app
            //     console.log(this.$el);//输出undefined
            // },
            // beforeMount:function(){
            //     console.log(this);//输出vue的实例
            //     console.log(this.title);//输出小明
            //     this.sayName();//输出hello！小明
            //     console.log(this.$el);//能获取到#app
            //     console.log(document.querySelectorAll("li"));//只能获取到一个节点，不能获取到真实节点
            // },
            // mounted:function(){
            //     console.log(this);//输出vue的实例
            //     console.log(this.title);//输出小明
            //     this.sayName();//输出hello！小明
            //     console.log(this.$el);//能获取到#app
            //     console.log(document.querySelectorAll("li"));//获取到真实节点
            // },
            // beforeUpdate:function(){
            //     console.log(this);//输出vue的实例
            //     console.log(this.title);//输出小明
            //     this.sayName();//输出hello！小明
            //     console.log(this.$el);//能获取到#app
            //     console.log(document.querySelectorAll("li"));//手动添加的节点不能获取到
            // },
            // updated:function(){
            //     console.log(this);//输出vue的实例
            //     console.log(this.title);//输出小明
            //     this.sayName();//输出hello！小明
            //     console.log(this.$el);//能获取到#app
            //     console.log(document.querySelectorAll("li"));//手动添加的节点能获取到
            // },
            
            //添加事件已解除绑定，无法操作了
            beforeDestroy: function () {
                console.log("vue实例销毁之前调用");
            },
            destroyed: function () {
                console.log("实例销毁后调用，调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁");
            },
            data: function () {
                return {
                    title: "小明",
                    list: [121, 2313, 3213, 1231, 212]
                }
            },
            methods: {
                sayName: function () {
                    console.log("hello!" + this.title);
                },
                additem: function () {
                    this.list.push("123");
                }
            }
        });
        vm.$destroy();
    </script>
</body>
 
</html>
4、computed计算属性与watch侦听器与methods方法的区别

    1）计算属性：适合大量计算，不适合大量逻辑判断，内存会缓存计算的结果，当要计算的数据相同时，它不会进行二次计算，而是取缓存里的数据。
    2）methods：适合大量逻辑处理（if,for等等），它不会缓存计算的过，当要计算的数据相同时，它会进行二次计算。

    3	watch：侦听需要变化的数据，执行回调函数。(可以用来监听pn的变化，实现分页)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>计算属性</title>
</head>
<body>
    
    <div id="app">
       <p>计算属性的结果为：{{count}}</p>
       <p>methods计算的结果为：{{count2()}}</p>
       watch:<input v-model="a" type="text">
       <p>c的值为:{{c}}</p>
    </div>
 
    <script src="../js/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:function(){
                return {
                    a:10,
                    b:20,
                    c:0
 
                }
            },
            computed:{
                count:function(){
                    return (this.a+this.b)*this.a
                }
            },
            methods:{
                count2:function(){
                    return (this.a+this.b)*this.a
                }
            },
            watch:{
                //监听a的变化，执行这个函数
                a:function(){
                    return this.c+=parseInt(this.a);
                }
            }
        });
    </script>
</body>
</html>
5、插槽slot
    1.）	从父组件中将带有数据的html模板传入到子组件
        a)	在父组件中使用slot属性定义插槽（插槽写在调用子组件的内部）
        b)	在子组件中使用<slot></slot>调用插槽
        c)	没有名字的模块，其内容会全部到没有名字的插槽中
        d)	作用：
                相当于不使用props也可以将父组件的data传递给子组件
    2.）	具名插槽
            a)	带有特点name属性的插槽
    3.	）匿名插槽
        a)	没有name属性的插槽，除了具名插槽，剩下的都会被内容都会被渲染到匿名插槽中
    4.	）作用域插槽
        a)	绑定了数据的插槽
        b)	Slot-scope
        c)	必须使用template定义，并且要使用slot-scope属性定义一个引用

    删除节点步骤：1、先创建模板、创建组件、注册组件

                           2、父组件给子组件绑定自定义属性，将值传递给子组件；使用v-for渲染数据

                            3、将删除的按钮放到作用域插槽中，创建作用域插槽来传递数据

    5.	）三者区别：
        a)	具名插槽和匿名插槽内容和样式与数据都由父组件提供
        b)	作用域插槽可以传递数据，数据由子组件提供

<!-- 插槽 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>插槽</title>
</head>
<body>
    <div id="app">
        <!-- 插槽要写在调用子组件内部 -->
        <child>
            <h1 class="header" slot="header">我是头部</h1>
            <div class="content" slot="content">我是内容</div>
            <div class="footer" slot="footer">我是尾部</div>
           <!-- 使用插槽很好的避免了父子组件间的频繁通信 -->
            <ul> 
                <li v-for="item in list">{{item}}</li>
            </ul>
        </child>
    </div>
    <template id="child">
        <div class="wrap">
            <h1 class="header">
                <slot name="header"></slot>
            </h1>
            <div class="content">
                <slot></slot>
            </div>
            <div class="footer">
                <slot name="footer"></slot>
            </div>
        </div>
    </template>
    <script src="../js/vue.js"></script>
    <script>
        //定义一个子组件
       var child= Vue.extend({
            template:"#child",
            data :function(){
                return {
                    
                }
 
            }
        })
       new Vue({
           el:"#app",
           data:function(){
               return {
                   list:[121,3213,3213,231,3123,32]
               }
           },
           methods:{
 
           },
           components:{ 
               child
           }
       })
    </script>
    
</body>
</html>
<!-- 作用域插槽 -->
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
    <title>作用域插槽版todolist</title>
</head>
 
<body>
    <div style="width: 500px;margin:0 auto;" id="app">
        <h1>待办事项</h1>
        <mytable :list="list">
            <!-- scope即为传入的id对象 -->
            <!-- 作用域插槽 -->
            <template slot="delbtn" slot-scope="scope">
                <button @click="delitem(scope)" class="btn btn-info">删除</button>
            </template>
        </mytable>
        <myadd></myadd>
    </div>
    <template id="mytable">
        <table class="table table-hover">
            <tr>
                <th>id</th>
                <th>标题</th>
                <th>操作</th>
            </tr>
            <tr v-for="item in list">
                <td>{{item.id}}</td>
                <td>{{item.title}}</td>
                <td>
                    <slot name="delbtn" :id="item.id"></slot>
                </td>
            </tr>
        </table>
    </template>
    <template id="myadd">
        <div>
            <div class="form-group">
                <label for="exampleInputEmail1">添加待办事项</label>
                <input type="text" class="form-control" id="exampleInputEmail1" placeholder="请输入待办事项">
            </div>
            <button type="submit" class="btn btn-default">添加</button>
        </div>
    </template>
    <script src="../js/vue.js"></script>
    <script>
        var mytable = Vue.extend({
            template: "#mytable",
            props: ['list'],
            data: function () {
                return {
 
                }
            },
            methods: {
 
            }
        })
        var myadd = Vue.extend({
            template: "#myadd",
            data: function () {
                return {
 
                }
            }
        })
        new Vue({
            el: "#app",
            data: function () {
                return {
                    list: [
                        { id: 0, title: "吃饭" },
                        { id: 1, title: "睡觉" },
                        { id: 2, title: "写代码" },
                        { id: 3, title: "打游戏" },
                    ]
                }
            },
            methods: {
                delitem: function (scope) {
                    //利用数组的foeach方法遍历
                    console.log(this);
                    var _this = this;
                    this.list.forEach(function (item, index) {
                        if (item.id == scope.id) {
                            _this.list.splice(index, 1);
                        }
                    })
                }
            },
            components: {
                mytable,
                myadd
            }
        })
    </script>
</body>
 
</html>
6、ref与$refs

    1.	）使用ref对元素或子组件加一个标识
    2.）this.$refs.标识

    3.	）作用：可以直接操作真实节点和子组件

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ref和$refs</title>
</head>
 
<body>
    <div id="app">
        <input type="text" ref="input">
        <child ref="h1"></child>
        <!-- //验证字段为空时会用到 -->
        <!-- 点击即可获取到子组件的值 -->
        <button @click="getInput">点击</button>
    </div>
    <template id="child">
        <div>
            <h1>我是子组件</h1>
            <h2>我是子组件</h2>
        </div>
    </template>
    <script src="../js/vue.js"></script>
    <script>
        var child = Vue.extend({
            template: "#child",
            data: function () {
                return {
                    name: "哈哈哈"
 
                }
            }
        })
        new Vue({
            el: "#app",
            data: function () {
                return {
 
                }
            },
            methods: {
                getInput: function () {
                    // ref与refs用于直接操作真实的节点
                    //获取子组件
                    console.log(this.$refs.h1.name);
                    //获取input节点
                    console.log(this.$refs.input);
                }
            },
            components: {
                child
            }
        })
    </script>
</body>
 
</html>