编译vuejs html,VueJS组件篇

首先介绍一下什么是组件

组件可以扩展HTML元素,封装可重用的代码。

组件是自定义元素,VueJS的编译器为它添加特殊功能。

组件也可以是原生HTML元素形式,以is特性扩展。

如何使用组件

这里我先介绍两种注册组件的方法

全局注册(所谓全局注册就是使用Vue的静态注册)

Vue.component('my-component',{

template:'

我是全局注册

'

});

new Vue({

el:"#app",

});

局部注册(需要写在实例中的components属性中)

var vm = new Vue({

el:'#app',

components:{

'my-component':{

template:'

我是局部注册

'

}

}

});

new Vue({

el:"#app",

});

组件中的data

data必须是函数

如果不是函数,每个组件共享一个数据,会相互影响

当使用函数的时候,把数据返回,每个组件都有自己的数据

Vue.component('my-component',{

template:'

{{ name }}

'

data(){

return{

name:'luoxue'

}

}

})

组件的构成

组件意味着协同工作,通常父子组件会是这样的关系:组件 A 在它的模版中使用了组件 B 。它们之间必然需要相互通信:父组件要给子组件传递数据,子组件需要将它内部发生的事情告知给父组件。然而,在一个良好定义的接口中尽可能将父子组件解耦是很重要的。这保证了每个组件可以在相对隔离的环境中书写和理解,也大幅提高了组件的可维护性和可重用性。

在 Vue.js 中,父子组件的关系可以总结为 props down, events up 。父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息。

prop 是父组件用来传递数据的一个自定义属性。子组件需要显式地用 props 选项声明 “prop”:

组件中的props属性

由于组件中的data是一个函数,拥有自己的作用域,所以不能直接传值,我们就需要用props属性来进行数据的传递。也就是说,组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。

//传入普通字符串

Vue.component('child',{

// 声明props

props:['message'],

// 就像 data 一样,prop 可以用在模板内

// 同样也可以在 vm 实例中像 “this.message” 这样使用

template: '{{ message }}'

})

new Vue({

el:"#app",

})

camelCase vs. kebab-case

HTML 特性不区分大小写。当使用非字符串模版时,prop的名字形式会从 camelCase 转为 kebab-case(短横线隔开):

Vue.component('child', {

// camelCase in JavaScript

props: ['myMessage'],

template: '{{ myMessage }}'

})

再次说明,如果你使用字符串模版,不用在意这些限制。

动态Prop

类似于用 v-bind 绑定 HTML 特性到一个表达式,也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时,该变化也会传导给子组件:

html代码

js代码

Vue.component('child',{

// 声明props

props:['myMessage'],

// 就像 data 一样,prop 可以用在模板内

// 同样也可以在 vm 实例中像 “this.message” 这样使用

template: '{{ myMessage }}'

})

new Vue({

el:"#app",

data:{

name:"luoxue"

}

})

字面量语法 VS 动态语法

html:如果在为vue组件prop定义或者赋值的时候用了“v-bind:”的动态语法,则会先将其转化为js表达式,然后计算结果赋值,下面示例中,第一个传递的是字符串,第二个传递的是1+2即3的数值

#字面量语法 VS 动态语法

//字面量语法 VS 动态语法

Vue.component("child", {

props: ["myMessage"],

template: "

myMessage: {{ myMessage }}
"

});

var vm = new Vue({

el: "#app",

});

单项数据流

prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。

另外,每次父组件更新时,子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop 。如果你这么做了,Vue 会在控制台给出警告。

通常有两种改变 prop 的情况:

prop 作为初始值传入,子组件之后只是将它的初始值作为本地数据的初始值使用;

prop 作为需要被转变的原始值传入。

单项数据流 VS 双向数据流

Prop类型绑定(单向、双向)

vue实例:
component组件(默认):
component组件(once):
component组件(sync):

//Prop类型绑定

Vue.component("child05", {

props: ["myMessage05"],

template: ''

});

var dr05 = new Vue({

el: "#dr05",

data: {

name: "DarkRanger",

}

});

Prop验证(转)

组件可以为 props 指定验证要求。如果未指定验证要求,Vue 会发出警告。当组件给其他人使用时这很有用。

prop 是一个对象而不是字符串数组时,它包含验证要求:

#Prop验证

name:{{dr.name}}, age:{{dr.age}}.

//Prop验证

Vue.component("child06", {

props: {

//基础类型检测("null"意思是任何类型都可以)

msg_null: null,

//String类型,必须是定义过的,可以是空字符串""

msg_string: {

type: String,

required: true,

},

//Number类型,默认值100

msg_number: {

type: Number,

default: 100,

},

//Object类型,返回值必须是js对象

msg_obj: {

type: Object,

default: function() {

return {

name: "DarkRanger",

age: "18",

}

}

},

//指定这个prop为双向绑定

//如果绑定类型不对将抛出一条警告

msg_twoway: {

type: String,

twoWay: true,

},

//自定义验证,必须是Number类型,验证规则:大于0

msg_validate: {

type: Number,

validator: function(val) {

return val > 0;

}

},

//将值转为String类型

//在设置值之前转换值(1.0.12+)

msg_number2string: {

coerce: function(val) {

return val + ""

}

},

//js对象转JSON字符串

msg_obj2json: {

coerce: function(obj) {

return JSON.stringify(obj);

}

},

//JSON转js对象

msg_json2obj: {

coerce: function(val) {

return JSON.parse(val);

}

},

},

template: '

msg_null: {{msg_null}}
'

+ '

msg_string:{{msg_string}}
'

+ '

msg_number: {{msg_number}}
'

+ '

msg_obj:{{"name-->"+msg_obj.name+", age-->"+msg_obj.age}}
'

+ '

msg_twoway:
'

+ '

msg_validate:{{msg_validate}}
'

+ '

msg_number2String: {{msg_number2string}}
'

+ '

msg_obj2json: {{msg_obj2json}}
'

+'

msg_json2obj:{{"name: "+msg_json2obj.name+"; age: "+msg_json2obj.age}}
'

});

var dr06 = new Vue({

el: "#dr06",

data: {

telphone: "0356-1234567",

mobilephone: 15912345678,

dr: {

name: "DarkRanger",

age: 25

},

drJson: '{"name":"DarkRanger","age":25}',

}

})

动态组件的tab切换

动态组件

this is tab01
this is tab02
this is tab03
  • {{tab01Text}}
  • {{tab02Text}}
  • {{tab03Text}}

//扩展组件tab01

var tab01 = Vue.extend({

template: "#temp-tab01",

});

//扩展组件tab02

var tab02 = Vue.extend({

template: "#temp-tab02",

});

//扩展组件tab03

var tab03 = Vue.extend({

template: "#temp-tab03",

});

//新建vue实例

var dr01 = new Vue({

el: "#dr01",

data: {

tab01Text: "tab01", //导航栏文本1

tab02Text: "tab02", //导航栏文本2

tab03Text: "tab03", //导航栏文本3

currentView: 'tab01', //默认选中的导航栏

},

//局部注册组件

components: {

tab01: tab01,

tab02: tab02,

tab03: tab03,

},

methods: {

//绑定tab的切换事件

toggleTabs: function(tabText) {

this.currentView = tabText;

}

}

});

使用slot分发内容

单个slot

除非子组件模板包含至少一个 插口,否则父组件的内容将会被丢弃。当子组件模板只有一个没有属性的 slot 时,父组件整个内容片段将插入到 slot 所在的 DOM 位置,并替换掉 slot 标签本身。

最初在 标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译,并且只有在宿主元素为空,且没有要插入的内容时才显示备用内容。

#单个slot

this is temp01 component!

如果没有分发内容,这里将会被显示

这里有新的内容01
这里有新的内容02

//单个slot

var child01 = Vue.extend({

template: "#child01",

});

var dr01 = new Vue({

el: "#dr01",

components: {

"child01": child01

}

});

具名slot

元素可以用一个特殊的属性 name 来配置如何分发内容。多个 slot 可以有不同的名字。具名 slot 将匹配内容片段中有对应 slot 特性的元素。

仍然可以有一个匿名 slot ,它是默认 slot ,作为找不到匹配的内容片段的备用插槽。如果没有默认的 slot ,这些找不到匹配的内容片段将被抛弃。

#具名Slot(有名称的slot)

this is slot01
this is slot02
this is a simple div01
this is a simple div02

//具名slot

var child02 = Vue.extend({

template: "#child02"

});

var dr02 = new Vue({

el: "#dr02",

components: {

"child02": child02

}

});

编译作用域

作用域插槽是一种特殊类型的插槽,用作使用一个(能够传递数据到)可重用模板替换已渲染元素。

当组件中拥有了slot插口的时候,组件内的内容片断都将替换掉slot

在子组件中,只需将数据传递到插槽,就像你将 prop 传递给组件一样:

编译作用域

the two items following is child msg:
{{cmsg_01}}
{{cmsg_02}}
the three items following is parent msg:
{{msg01}}
{{msg02}}
{{msg03}}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值