vue复习(二)

一、组件介绍

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

二、局部组件

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title>局部组件</title>

    <script type="text/javascript" src="js/vue.js"></script>

</head>

<body>

    <div id="app">

        <!-- 错的 -->

        <!-- <localTag></localTag> -->

        <!-- ① -->

        <!-- <localtag></localtag> -->

        <!-- ② ③ ④ ⑤ -->

        <local-tag></local-tag>

        <local-tag></local-tag>

        <!-- 总结：组件与html公用的名称(组件名、方法名、变量名)，不要出现大写，提倡使用-语法 -->

    </div>

</body>

<script type="text/javascript">

    // 创建局部组件:就是一个拥有模板(满足vue写法)的对象

    var localTag = {

        // 模板

        // 错误: 只能解析第一个标签，以它作为根标签

        // template: '<div>局部组件1</div><div>局部组件2</div>'

        template: '\

        <div>\

            <div>局部组件1</div>\

            <div>局部组件2</div>\

        </div>'

    }

    // 局部组件需要被使用它的父组件注册才能在父组件中使用

    // 模板: html代码块

    // 根组件，拥有模板，可以显式的方式来书写template，一般不提倡，模板就是挂载点及内部所有内容

    // 注：挂载点内部一般不书写任何内容

    new Vue({

        el: '#app', // old

        // template: '<div></div>' // new

        // 用components进行组件的注册

        // ①

        // components: {

        //     'localtag': localTag

        // }

        // ②

        // components: {

        //     'local-tag': localTag

        // }

        // ③

        // components: {

        //     'localTag': localTag

        // }

        // ④

        components: {

             'LocalTag': localTag

        }

        // ⑤

        // ES6 key与value一直，可以单独写key

        // components: {

        //     localTag

        // }

    })

</script>

</html>

三、全局组件

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title>全局组件</title>

    <script type="text/javascript" src="js/vue.js"></script>

</head>

<body>

    <div id="app">

        <global-tag></global-tag>

        <global-tag></global-tag>

    </div>

</body>

<script type="text/javascript">

    // 创建全局组件： 组件名, {template:''}

    Vue.component('global-tag', {

        // data: function () {

        //     return {

        //         num: 0

        //     }

        // },

        data () {

            return {

                num: 0

            }

        },

        template: '<button @click="btnClick">点击了{{num}}下</button>',

        methods: {

            btnClick () {

                console.log("你丫点我了！！！");

                this.num ++

            }

        }

    })

    new Vue({

        el: '#app',

        data: {

        }

    })

</script>

</html>

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

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title>父传子</title>

    <script type="text/javascript" src="js/vue.js"></script>

</head>

<body>

    <div id="app">

        <!-- 通过属性绑定的方式 -->

        <!-- <global-tag v-bind:abc='sup_d1' :supD2='sup_d2'></global-tag> -->

        <global-tag v-bind:abc='sup_d1' :sup_d2='sup_d2'></global-tag>

        <!-- 模板名用-连接命名，属性名用_连接命名 -->

    </div>

</body>

<script type="text/javascript">

    // 子组件需要接受数据

    Vue.component('global-tag', {

        // 通过props来接收绑定数据的属性

        // props: ['abc', 'supd2'],

        props: ['abc', 'sup_d2'],

        // template: '<div><p @click="fn">{{ abc }}</p></div>',

        template: '<div><p @click="fn(abc)">{{ abc }}</p></div>',

        methods: {

            // fn () {

            //     alert(this.abc)

            // }

            fn (obj) {

                console.log(obj, this.sup_d2)

            }

        }

    })

    // 数据是父组件的

    new Vue({

        el: '#app',

        data: {

            sup_d1: "普通字符串",

            sup_d2: [1, 2, 3, 4, 5]

        }

    })

</script>

</html>

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

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title>子传父</title>

    <script type="text/javascript" src="js/vue.js"></script>

</head>

<body>

    <div id="app">

        <!-- 通过发送事件请求的方式进行数据传递(数据作为请求事件的参数) -->

        <global-tag @send_data='receiveData'></global-tag>

        <p>{{ msg }}</p>

    </div>

</body>

<script type="text/javascript">

    Vue.component('global-tag', {

        data () {

            return {

                sub_v1: '普通字符串',

                sub_v2: [1, 2, 3, 4, 5]

            }

        },

        template: '<button @click="btnClick">发送</button>',

        methods: {

            btnClick () {

                console.log("子>>> ", this.sub_v1, this.sub_v2);

                // 通过emit方法将数据已指定的事件发生出去

                // 事件名, 参数...

                this.$emit("send_data", this.sub_v1, this.sub_v2)

            }

        }

    })

    // 数据是父组件的

    new Vue({

        el: '#app',

        data: {

            msg: ''

        },

        methods: {

            receiveData(obj1, obj2) {

                console.log("父>>> ", obj1, obj2)

                this.msg = obj2;

            }

        }

    })

</script>

</html>

六、父组件实现todoList

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>组件todoList</title>

    <script type="text/javascript" src="js/vue.js"></script>

</head>

<body>

    <div id="app">

        <div>

            <input type="text" v-model='in_val'>

            <button @click='pushAction'>提交</button>

        </div>

        <!-- <ul>

            <li @click='deleteAction(index)' v-for='(item,index) in list' :key="index">{{ item }}</li>

        </ul> -->

        <!-- 父 将list传输给 子 -->

        <todo-list :list_data='list' @delete_action='deleteAction'></todo-list>

    </div>

</body>

<script type="text/javascript">

    Vue.component('todo-list', {

        props: ['list_data'],

        template: '<ul><li v-for="(e, i) in list_data" :key="i" @click="li_action(i)">{{e}}</li></ul>',

        methods: {

            li_action (index) {

                // 子 反馈index给 父

                this.$emit('delete_action', index);

            }

        }

    })

    new Vue({

        el: '#app',

        data: {

            in_val: '',

            list: []

        },

        methods: {

            pushAction () {

                this.list.push(this.in_val);

                this.in_val = ''

            },

            deleteAction (index) {

                this.list.splice(index, 1);

            }

        }

    })

</script>

</html>

七、搭建Vue开发环境

1、安装nodeJS

官网下载安装：https://nodejs.org/zh-cn/

2、安装脚手架

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

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



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



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



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

3、项目创建

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

4、vue基础模板

<template>

</template>

<script>

    export default {

    }

</script>

<style scoped>

</style>

npm install -g vue-cli



vue init webpack my-project



npm install -g cnpm --registry=https://registry.npm.taobao.org

巴特西

vue复习(二)

一、组件介绍

二、局部组件

三、全局组件

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

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

六、父组件实现todoList

七、搭建Vue开发环境

1、安装nodeJS

2、安装脚手架

3、项目创建

4、vue基础模板

最新文章

热门文章