Vue单文件组件基础模板小结,创造组件的二种格

作者: 韦德国际1946国际网址  发布:2019-05-30

开创组件的二种格局小结

Vue单文件组件基础模板小结,创造组件的二种格局小结。大局组件
Vue.component("tem",{
    template:`
        <div>
            <h3>全局组件</h3>
        </div>
        `
})
<!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>Document</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <app-test></app-test>
        <app-test></app-test>
        <app-test></app-test>
    </div>

    <script src="vue.js"></script>
    <script>
        // 创建一个组件
        Vue.component('app-test', {
            template: `<div>
                        <h1>{{ title }}</h1>
                        <p>{{ content }}</p>
                       </div>`,
            // 组件也有data选项, 但是值必须为一个函数retur一个数据对象
            // 这么写是因为, vue为了保证每个组件的数据都是独立的, 修改一个组件数据,其他不受影响
            data: function() {
                return {
                    title: '震惊',
                    content: '女人流泪!, 男人沉默!'
                };
            }
        });

        var vm = new Vue({
            el: '#app',
            data: {}
        });
    </script>
</body>
</html>

背景

一.全局挂号韦德国际1946国际网址,

部分组件
<body>
<div id="app">
    <child></child>
</div>

<template id="child">
    <div>
        <p>this's chlidTem</p>
    </div>
</template>
<script>
    new Vue({
        components:{
            "child":{
                template:"#child"
            }
        }
    }).$mount("#app")
</script>
</body>

深信不疑我们在选拔Vue开荒品种时,基本都以以单文件组件的方式支付组件的,这种办法好处多多:

二.片段注册

动态组件

由此所运用保留的<component>成分,动态的绑定到它的is脾性,大家得以让两个零部件能够动用同一个挂载点,并且动态切换

<body>
<div id="app">
    <div>
        <input type="button" 
               v-for="item in inputs"  
               :value="item.index" :index="item.index" 
               @click="showTem($event)">
    </div>
    <component :is="show"></component>
</div>
<script>
    new Vue({
        data:{
            inputs:{
                first:{
                    index:"first"
                },
                second:{
                    index:"second"
                },
                third:{
                    index:"third"
                }
            },
            show:"first"
        },
        methods:{
            showTem(e){
                this.show=e.target.getAttribute("index");
            }
        },
        components:{
            "first":{
                template: `
                    <div>this's first</div>
                `
            },
            "second":{
                template:`
                    <div>this's second</div>
                `
            },
            "third":{
                template:`
                   <div>this's third</div>
                `
            }
        }
    }).$mount("#app")
//由上我们可以看出,实际上动态组件的本质就是通过:is来控制组件的显示/隐藏,当然除了通过不同的按钮来控制,也可以通过单个按钮的click方法为show赋不同的值来改变模板的显示/隐藏
</script>
</body>

一.代码聚焦,便于开辟、管理和维护

var child=Vue.extend({})
var parent=Vue.extend({})

2.可复用性高,直接将vue文件拷贝到新品类中

Vue.extend() 全局方法 生成构造器,创设子类

自身一时就想到那两点,童鞋们能够在商量里帮小编补偿;因为有那样多优点,所以决定有必不可上将vue组件的常用配置项提炼出来,变成一个零件模板,方便日后项目开拓复用

应用基础 Vue 构造器,创制2个“子类”。

 <template>
 <div>
  <h1>{{title}}</h1>
  <ChildComponents></ChildComponents>
 </div>
</template>
<script>
//子组件要提前引入,才可使用
import ChildComponents from './ChildComponents.vue'
//也可引入一些公共Js脚本或类库
import Cookie from '../lib/cookie.js'

//Js部分尽量采用ES6语法,webpack babel插件会转义兼容
export default {
 //组件私有数据(必须是function,而且要return对象类型)
 data () {
  return {
   title: '组件标题',
   firstName: '',
   lastName: '',
  }
 },
 //父组件传递过来的数据(两种方式声明:1.数组 2.对象)
 //数组方式
 props: ['age'],
 //对象方式
 /*props: {
  age: {
   type: Number,
   default: 0,
   required: true,
   validator: function (value) {
    return value >= 0
   }
  }
 }*/
 //计算属性
 computed: {
  fullName () {
   return this.firstName   this.lastName
  }
 },
 //监听
 watch: {
  title (preVal, newVal) {
    console.log(`改变之前的值:${preVal};改变之后的值:${newVal}`)
  }
 },
 //函数集,自己封装,便于开发使用
 methods: {
  getCurrentDate () {
   return new Date().toLocaleDateString()
  }
 },
 //生命周期钩子:实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用
 beforeCreated () {
  console.log('component before created')
 },
 //生命周期钩子:组件实例完成创建之后调用
 created () {
  console.log('component created')
 },
 //生命周期钩子:组件实例渲染完成时调用
 mounted () {
  console.log('component mounted')
 },
 //要用到哪些子组件(如果组件已是最小粒度,那么可省略该属性)
 components: {
  ChildComponents
 }
}
</script>
<style lang="scss" scoped>
/**使用scss编写样式,既可提高开发效率,也方便维护
* scoped省略后,该样式片段会应用到页面全局
* 支持import语法引入css文件
*/
@import "../base/reset.css";
div {
 h1 {
  color: #c23a3f;
 }
}

</style>

那样写极度麻烦。于是vue实行了简化

结语

动用Vue.component()直接开立和登记组件:

以上组件模板中的配置不是最全的,但都以最常用的,希望对大家的读书抱有扶助,也意在我们多多帮助脚本之家。

本文由韦德国际1946发布于韦德国际1946国际网址,转载请注明出处:Vue单文件组件基础模板小结,创造组件的二种格

关键词: JavaScript vue