Vue 渐进式 Js 框架(二):组件以及 Vue-cli 脚手架

chan 作者
阅读 223 喜欢 0

一、组件化

可以将 Vue 对象作为一个组件,被反复的使用,如果要实现组件化,需要再页面中注册组件:分别为全局注册和本地注册。


  • 全局组件注册

任何一个被 vue 绑定过的 div 中,都可以使用全局注册的 Vue 组件

<div class="app">
    <!--使用组件-->
    <my_model></my_model>
</div>
<!--这一步是注册一个组件-->
Vue.component("my_model", {
    template: "<div>{{message}}<button @click='btnfn'>点击触发事件</button></div>",
    data: function() {
        return {
            message: "hello world"
        }
    },
    methods: {
        btnfn: function () {
            alert("hello vue");
        }
    }
});

<!--只有被 vue 绑定了 html 元素中才能使用组件-->
new Vue({
    el: ".app"
});
  • 本地(局部)组件注册

注册组件作用域仅在当前 Vue 实例中。如果是对 Vue 组件进行本地注册,则其他被 Vue 绑定的 div 则不能使用。

<div class="app">
    <!--使用组件-->
    <my_model></my_model>
</div>
var mod = {
    template: "<div>{{message}}<button @click='btnfn'>点击触发事件</button></div>",
    data: function() {
        return {
            message: "hello world"
        }
    },
    methods: {
        btnfn: function () {
            alert("hello vue");
        }
    }
}

new Vue({
    el: ".app",
    components: {
        "my_model": mod
    }
});

二、Template

组件中 template 的写法,是将内容展现在页面上的一个键,值是一个字符串。需要特别注意的是,template 里只能存在一个根元素。


<!--正确写法-->
template: "<div><h1>h1</h1>div</div>"

<!--错误写法-->
template: "<h1>h1</h1><div>div</div>"

三、Vue 的生命周期

一个 Vue 对象会经历初始化、创建、绑定、更新、销毁等阶段,不同的阶段都会有相应的生命周期钩子函数被调用。

四、Vue-cli 脚手架工具

安装 nodejs

下载对应环境版本即可:http://nodejs.cn/download/

使用 nodejs 安装 vue-cli

npm install vue-cli -g
  • 速度慢可以使用淘宝源
# 1. 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org

# 2. 使用cnpm代替npm
cnpm install
cnpm run dev
cnpm run build
  • 查看 nodejs 版本
node -v
  • 查看 vue-cli 版本
vue -version

创建项目并且初始化

  • 初始化为 webpack-simple 模板
vue init webpack-simple vue-cli-demo
  • 初始化参数
? Project name (vue-cli-demo)  // 项目名
? Project description (A Vue.js project)  // 项目介绍
? Author (AleixGallimo <a969803965@qq.com>)  // 作者
? License (MIT)  // 是否使用开源协议
? Use sass? (y/N)  // sass技术

// 根据命令完成操作
   vue-cli · Generated "vue-cli-demo".

   To get started:

     cd vue-cli-demo
     npm install
     npm run dev

运行项目

npm run dev

全局组件注册

创建三个组件分别为 Header、Content、Bottom

在 main.js 入口中注册组件:

import Vue from 'vue'
import App from './App.vue'
import Header from "./components/Header";
import Content from "./components/Content";
import Bottom from "./components/Bottom";

// 全局注册组件
Vue.component("my-header", Header);
Vue.component("my-content", Content);
Vue.component("my-bottom", Bottom);

new Vue({
  el: '#app',
  render: h => h(App)
})

App.vue 中使用组件

<template>
    <div id="app">
        <my-header></my-header>
        <my-content></my-content>
        <my-bottom></my-bottom>
    </div>
</template>

<script>
    export default {
        name: 'app'
    }
</script>

<style></style>

本地组件注册

App.vue 中局部注册组件

<template>
    <div id="app">
        <m-header></m-header>
        <m-content></m-content>
        <m-bottom></m-bottom>
    </div>
</template>

<script>

    import Header from "./components/Header";
    import Content from "./components/Content";
    import Bottom from "./components/Bottom";

    export default {
        name: 'app',
        components: {
            "m-header": Header,
            "m-content": Content,
            "m-bottom": Bottom
        }
    }
</script>

<style></style>

效果如下:

组件之间的参数传递

父传子

父组件 App.vue 传递参数到 Content.vue 中,先在 Content 组件中定义 props

export default {
    name: "Content",
    data() {
        return {
            list: "content"
        }
    },
    props: ["title"]
}

props 可以定义为数组,也可以定义为对象,能对传值参数类型进行配置

props: {
    title: {
        type: String,
        required: true,
        default: "default message"
    },
    // 除了参数,也能设置为方法
    c_btn: {
        type: Function
    }
}

App.vue 组件中进行参数的传递

<template>
    <div id="app">
        <my-header></my-header>
        <my-content :title="msg" :c_btn="f_btn"></my-content>
        <my-bottom></my-bottom>
    </div>
</template>

子传父

通过子类调用父类方法进行参数传递。

或者通过发射事件进行传递:

在子组件中,使用 this.$emit(“键”,”值”)

在父组件中,子组件的标签中,使用 @键=”msg=$event” 对 vue 属性的 msg 进行赋值。

Content.vue

<template>
    <div>
        {{title}}
        <button @click="set_name()">点我</button>
    </div>
</template>

<script>
    export default {
        name: "Content",
        data() {
            return {
                list: "content"
            }
        },
        props: ["title"],
        methods: {
            set_name: function () {
                this.$emit("new_msg", "this is chan and you ?");
            }
        }
    }
</script>

App.vue

<template>
    <div id="app">
        <my-header></my-header>
        <my-content :title="msg" @new_msg="msg=$event"></my-content>
        <my-bottom></my-bottom>
    </div>
</template>

<script>
    export default {
        name: 'app',
        data() {
            return {
                msg: "test"
            }
        }
    }
</script>

全部评论0