码迷,mamicode.com
首页 > 其他好文 > 详细

vue复习(二)

时间:2018-10-10 22:00:19      阅读:111      评论:0      收藏:0      [点我收藏+]

标签:挂载   复用   启动   str   enc   ++   作用   class   lint   

一、组件介绍

  • 每一个组件都是一个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

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复习(二)

标签:挂载   复用   启动   str   enc   ++   作用   class   lint   

原文地址:https://www.cnblogs.com/sui776265233/p/9768809.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!