Vue03

2018-10-30 本文已影响0人 knot98

Vue组件

一、组件介绍

每一个组件都是一个vue实例
每个组件均具有自身的模板template，根组件的模板就是挂载点
每个组件模板只能拥有一个根标签
子组件的数据具有作用域，以达到组件的复用

根组件：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>根组件</title>
</head>
<body>
    <p>app之上</p>
    <div id="app">
        <h1>{{ msg }}</h1>
    </div>
    <p>app之下</p>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
    // 通过new Vue创建的实例就是根组件(实例与组件一一对应,一个实例就是一个组件)
    // 每个组件组件均拥有模板,template
    var app = new Vue({
        // 根组件的模板就是挂载点
        el: "#app",
        data : {
            msg: "根组件"
        },
        // 根组件可以显式书写模板吗? 可以
        // 模板: 由""包裹的html代码块,出现在组件的内部,赋值给组件的$template变量
        // 根组件如果不书写自身模板,那么模板就采用挂载点,如果显式书写模块,就会替换挂载点,但根组件必须拥有挂载点
        template: "<div>显式模板</div>"
    })
    // app.$template
</script>
</html>

二、局部组件

<div id="app">
    <local-tag></local-tag>
    <local-tag></local-tag>
</div>
<script>
    var localTag = {
        data () {
            return {
                count: 0
            }
        },
        template: '<button @click="btnAction">局部{{ count }}</button>',
        methods: {
            btnAction () {
                this.count ++
            }
        }
    }
    new Vue({
        el: "#app",
        components: {
            'local-tag': localTag
        }
    })
</script>

三、全局组件

<div id="app">
    <global-tag></global-tag>
    <global-tag></global-tag>
</div>
<script>
    Vue.component('global-tag', {
        data () {
            return {
                count: 0
            }
        },
        template: '<button @click="btnAction">全局{{ count }}</button>',
        methods: {
            btnAction () {
                this.count ++
            }
        }
    })
    new Vue({
        el: "#app"
    })
</script>

四、父组件传递数据给子组件

通过绑定属性的方式进行数据传递

<div id="app">
    <global-tag :sup_data1='sup_data1' :supData2='sup_data2'></global-tag>
</div>
<script type="text/javascript">
    Vue.component('global-tag', {
        props:['sup_data1', 'supdata2'],
        template: '<div>{{ sup_data1 }} {{ supdata2 }}</div>'
    })
    new Vue({
        el: '#app',
        data: {
            sup_data1: '数据1',
            sup_data2: '数据2'
        }
    })
</script>

五、子组件传递数据给父组件

通过发送事件请求的方式进行数据传递

<div id="app">
    <global-tag @send_action='receiveAction'></global-tag>
</div>
<script type="text/javascript">
    Vue.component('global-tag', {
        data () {
            return {
                sub_data1: "数据1",
                sub_data2: '数据2'
            }
        },
        template: '<div @click="clickAction">发生</div>',
        methods: {
            clickAction () {
                this.$emit('send_action', this.sub_data1, this.sub_data2)
            }
        }
    })
    new Vue({
        el: '#app',
        methods: {
            receiveAction (v1, v2) {
                console.log(v1, v2)
            }
        }
    })
</script>

六、父子组件实现todoList

<div id="app">
    <div>
        <input type="text" v-model='value'>
        <button @click='click'>提交</button>
    </div>
    <ul>
        <item
              v-for='(e, i) in list'
              :key='i'
              :ele='e'
              :index='i'
              @delete='deleteAction'
              ></item>
    </ul>
</div>
<script type="text/javascript">
    Vue.component('item', {
        props: ['ele', 'index'],
        template: '<li @click="item_click">{{ ele }}</li>',
        methods: {
            item_click: function () {
                this.$emit('delete', this.index)
            }
        }
    })
    new Vue({
        el: '#app',
        data: {
            value: '',
            list: [],
        },
        methods: {
            click: function () {
                this.list.push(this.value)
                this.value = ''
            },
            deleteAction: function (index) {
                this.list.splice(index, 1)
            }
        }
    })
</script>

七、搭建Vue开发环境

1、安装nodeJS

官网下载安装：https://nodejs.org/zh-cn/
命令行输入：node -v 检查是否安装成功

2、安装脚手架

vue官网 => 学习 => 教程 => 安装 => 命令行工具(CLI)

命令行输入以下代码块：

安装全局vue：npm install -g @vue/cli

在指定目录创建vue项目：vue create my-project（项目名）

切换到项目目录下：cd my-project（项目名）

进入项目目录启动项目：npm run serve

项目启动成功后，浏览器输入：http://localhost:8080/

<!-- 通过指定服务器路径访问项目页面：http://localhost:8080/ -->

3、项目创建

babel：是一个 JavaScript 编译器。
eslint：是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。

4、vue基础模板

<template>
    
</template>
<script>
    export default {
        
    }
</script>
<style scoped>
</style>

上课代码

局部组件：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>局部组件</title>
    <style type="text/css">
        .sup {
            width: 100px;
            height: 100px;
            background-color: orange;
        }
        .sub {
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 50%
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 错误: html不区分大小写 -->
        <!-- <localTag></localTag> -->
        <!-- html中组件命名提倡-的链接语法 -->
        <!-- <local-tag></local-tag> -->
        
        <!-- 1 -->
        <!-- <localtag></localtag>
        <localtag></localtag>
        <localtag></localtag> -->

        <!-- 2 3 4 5 -->
        <local-tag></local-tag>

        <btn-tag></btn-tag>
        <btn-tag></btn-tag>
    </div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
    // 如何定义一个局部组件
    // 局部组件的语法规则
    // 如何使用局部组件
    // 为什么要使用局部组件(达到html+css+js代码块的复用)

    // 一个满足vue语法规则的对象就是一个组件
    // 直接来定义这样的组件,用一个变量名来接收,就是创建了一个局部组件,
    // 变量名就是局部组件的组件名
    // 通过组件名就可以使用该组件

    // 局部组件要在父组件中使用,一定要提前在父组件中进行注册

    // 语法规则
    // 有自身模板template,有data/methods/computed/watch...
    var localTag = {
        template: "<div class='sup'><div class='sub'></div></div>"
    }

    var btnTag = {
        // template: "<div><button>按钮1</button><button>按钮2</button></div>"
        template: "<button @click='btnAction'>点击了{{ num }}下</button>",
        // data需要绑定方法,数据通过方法返回值进行处理,达到组件复用时,数据的私有化
        data: function() {
            return {
                num: 0
            }
        },
        methods: {
            btnAction: function () {
                this.num++
            }
        }
    }

    // 根组件
    new Vue({
        el: "#app",
        // 注册子组件
        components: {
            // 1
            // "localtag": localTag
            // 2
            // "localTag": localTag
            // 3
            // "local-tag": localTag
            // 4
            // localTag: localTag
            // 5 ES6对象语法,key value写法相同,可以省略value
            localTag,
            btnTag,

        }
    })
</script>
</html>

全局组件：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>全局组件</title>
</head>
<body>
    <div id="app">
        <global-tag v-for="(o, i) in ls" :key="i"></global-tag>
    </div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
    // 全局组件
    // 用Vue.component("组件名", {})来创建全局组件
    // 全局组件附属于Vue实例,可以不需要注册就可以使用
    Vue.component("global-tag", {
        template: "<button @click='btnClick'>{{ n }}</button>",
        data () {
            return {
                n: 0
            }
        },
        methods: {
            btnClick () {
                this.n++
            }
        }
    })

    new Vue({
        el: "#app",
        data: {
            ls: [0, 0, 0]
        }
    })
</script>
</html>

父组件传递信息给子组件：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>父传子</title>
</head>
<body>
    <div id="app">
        <local-tag :num="num" :sup_data="sup_data"></local-tag>
    </div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
    // 父组件与子组件建立联系的关键点
    // 同绑定属性的方式进行数据传输
    // 1.给在父组件中出现的子组件名定义标签的全局属性
    // 2.全局属性的值赋值为父组件的数据变量
    // 3.在子组件内部,通过props拿到标签中的全局属性名

    var localTag = {
        props: ['num', 'sup_data'],
        template: "<div @click='divActive'>{{ num }}</div>",
        methods: {
            divActive () {
                console.log(this.num);
                console.log(this.sup_data);
            }
        }
    }

    // 数据属于父组件,子组件来接收使用数据
    new Vue({
        el: "#app",
        components: {
            localTag
        },
        data: {
            num: 10,
            sup_data: [1, 2, 3, 4, 5]
        }
    })
</script>
</html>

子组件传递信息给父组件：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>子传父</title>
</head>
<body>
    <div id="app">
        <global-tag @send_data="receive_data"></global-tag>
        {{ n }}
    </div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
    // 子传父:
    // 通过发生事件的方式进行数据传输
    // 数据由子组件提供, 父组件通过事件的回调方法获取数据
    // 发生数据的关键: $emit("事件名", ...args)
    Vue.component("global-tag", {
        template: "<div @click='divAction'>我是div</div>",
        data () {
            return {
                num: 10,
                arrList: [1, 2, 3, 4, 5]
            }
        },
        methods: {
            divAction () {
                // 发生事件
                // console.log("要发生事件,携带参数了");
                this.$emit("send_data", this.num, this.arrList)
            }
        }
    });

    new Vue({
        el: "#app",
        data: {
            n: 0
        },
        methods: {
            receive_data (num, arrList) {
                console.log("接收到的数据:", num, arrList);
                this.n = num;
            }
        }
    })
</script>
</html>

组件化todoList：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>todoList案例</title>
</head>
<body>
    <div id="app">
        <div>
            <input type="text" v-model="val">
            <button type="button" @click="submitMsg">提交</button>
        </div>
        <ul>
            <!-- <li v-for="(v, i) in list" :key="i" @click="removeMsg(i)">{{ v }}</li> -->
            <todo-list v-for="(v, i) in list" :key="i" :v="v" :i="i" @delect_action="delect_action"></todo-list>
        </ul>
    </div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
    Vue.component("todo-list", {
        template: "<li @click='delect_action'><span>第{{ i + 1 }}条: </span><span>{{ v }}</span></li>",
        props: ['v', 'i'],
        methods: {
            delect_action () {
                this.$emit("delect_action", this.i)
            }
        }
    })
    

    new Vue({
        el: "#app",
        data: {
            val: "",
            list: []
        },
        methods: {
            submitMsg () {
                // 往list中添加input框中的value
                if (this.val) {
                    this.list.push(this.val);
                    this.val = ""
                }
            },
            delect_action(index) {
                this.list.splice(index, 1)
            }
        }
    })
</script>
</html>

Vue03

Vue组件

一、组件介绍

根组件：

二、局部组件

三、全局组件

四、父组件传递数据给子组件

五、子组件传递数据给父组件

六、父子组件实现todoList

七、搭建Vue开发环境

1、安装nodeJS

2、安装脚手架

3、项目创建

4、vue基础模板

上课代码

局部组件：

全局组件：

父组件传递信息给子组件：

子组件传递信息给父组件：

组件化todoList：

猜你喜欢

热点阅读