H5编码规范
<!-- html代码 -->
<div id="demo">
<table>
<tbody>
<row></row>
</tbody>
</table>
</div>
<!-- vue代码 -->
<script type="text/javascript">
Vue.component('row',{
template:`
<tr><td>2</td><td>2</td></tr>`
})
var demo=new Vue({
el:"#demo",
})
</script>
根据上代码分析结果如下:
H5规范中要求,table里为tbody,tbody里需要放置tr和td,否则会将代码解析到table外。
方案:
这里,tbody中放置的是row,所以会解析到table同级外部,解决方案为is属性。既然tbody里只能放置tr,那么这里便改成tr+is属性
代码如下:
<!-- html代码 -->
<div id="demo">
<table>
<tbody>
<tr is="row"></tr>
</tbody>
</table>
</div>
<!-- vue代码 -->
<script type="text/javascript">
Vue.component('row',{
template:`
<tr><td>2</td><td>2</td></tr>`
})
var demo=new Vue({
el:"#demo",
})
</script>
template组件模板写法
写法一:直接写在选项里的模板
直接在构造器里的template选项后边编写。这种写法比较直观,但是如果模板html代码太多,不建议这么写。
<!-- vue代码 -->
<script type="text/javascript">
Vue.component('row', {
template: `
<tr><td>2</td><td>2</td></tr>`
})
var demo = new Vue({
el: "#demo",
})
</script>
注意:这里需要注意的是模板的标识不是单引号和双引号,而是,就是Tab上面的键
写法二:写在template标签里的模板
这种写法更像是在写HTML代码,就算不会写Vue的人,也可以制作页面。
<!-- html代码 -->
<div id="demo">
<my-content></my-content>
</div>
<template id="arry">
<h3>这是一个内容</h3>
</template>
<!-- vue代码 -->
<script type="text/javascript">
Vue.component('my-content', {
template: `#arry`
})
var demo = new Vue({
el: "#demo",
})
</script>
注意:这里需要注意的是模板的标识不是单引号和双引号,而是,就是Tab上面的键
写法三:写在script标签text/x-template里的模板
这种写模板的方法,可以让模板文件从外部引入。
<!-- html代码 -->
<div id="demo">
<my-content></my-content>
</div>
<!-- vue代码 -->
<script type="text/x-template" id="arry">
<h3>这是一个内容123</h3>
</script>
<script type="text/javascript">
Vue.component('my-content', {
template: `#arry`
})
var demo = new Vue({
el: "#demo",
})
</script>
注意:这里要注意下模板的位置
组件data
在使用 data 和实例稍有区别, 组件的data必须是函数,且必须将数据 return出去。
组件名
在注册一个组件的时候,始终需要给它一个名字。比如在全局注册的时候,该组件名就是 Vue.component 的第一个参数
注意:
(1)命名注意“语义化”:即你给予组件的名字可能依赖于你打算拿它来做什么
(2)定义组件名的方式3种
组件注册
(1)全局注册案例
<!-- html代码 -->
<div id="arry">
<grand></grand>
</div>
<!-- Vue代码 -->
<script type="text/javascript">
Vue.component("grand",{
template:`<div>我是外祖父<father></father></div>`
})
Vue.component("father",{
template:`<div>我是爸爸<son></son></div>`
})
Vue.component("son",{
template:`<div>我是孙子</div>`
})
var arry=new Vue({
el:"#arry",
})
</script>
全局组件“嵌套性”:在所有子组件中也是如此,也就是说这三个组件在各自内部也都可以相互使用。
(2)局部注册
缘由:全局注册往往是不够理想的,全局注册所有的组件意味着即便你已经不再使用一个组件了,它仍然会被包含在你最终的构建结果中。这造成了用户下载的JS的无谓的增加。
在这些情况下,你可以通过一个普通的 JS对象来定义组件。
自定义事件
正如之前所讲,子组件→父组件
当子组件需要向父组件传递数据时,需要用到自定义事件。
Vue 组件有一套观察者模式,子组件用
e
m
i
t
(
)
来
触
发
事
件
,
父
组
件
用
emit()来触发事件,父组件用
emit()来触发事件,父组件用on()来监听子组件的事件
语法结构:
父组件通过v-on:eventName="parentEventName"来设置监听
子组件通过$.emit(‘eventName’)来触发事件。
(1)子组件触发事件$.emit(‘eventName’,option)
<!-- html代码 -->
<div id="demo">
父亲有{{moneyValue}}
<my-money :money="moneyValue" @change-parent='changeMoney'></my-money>
</div>
// vue代码
Vue.component("my-money", {
props: {
money: Number
},
data() {
return {
childMoney: this.money
}
},
template: `
<div>
<h2 @click="cut">我继承了{{childMoney}}</h2>
</div>
`,
methods: {
cut() {
this.childMoney -= 100;
this.$emit('change-parent', this.childMoney)
}
}
})
var app = new Vue({
el: "#demo",
data: {
moneyValue: 600
},
methods: {
changeMoney(option) {
console.log(option)
this.moneyValue = option;
}
}
})
.sync修饰符
在vue2.4以前,父组件向子组件传值用props;子组件不能直接更改父组件传入的值,需要通过$emit触发自定义事件,通知父组件改变后的值,如此才能实现父子组件的通信。
过程比较繁琐,写法如下:
ync修饰符:
vue2.4以后的写法明显舒服许多,上面同样的功能,直接上代码
写法上简化了一部分,很明显父组件不用再定义方法检测值变化了。其实只是对以前的$emit方式的一种缩写,.sync其实就是在父组件定义了一update:value方法,来监听子组件修改值的事件。
v-model语法糖
首先来回顾下v-model相关知识点。
(1)v-model指令是什么?
vue通过v-model实现双向绑定数据,所以首先我们要明白v-model在这个过程中做了什么。
(2)v-model指令本质?
有vue基础的同学应该知道,v-model本质是一个语法糖。
即v-bind和v-on的结合体。
(3)v-model本质验证
表单元素比如input,v-bind绑定一个值,就把data数据传给了value,同时再通过v-on监听input事件,当表单数据改变的时候,也会把值传给data数据,代码如下
(4)v-model等效写法
综上所述,v-model为v-on和v-bind结合体
自定义组件之v-model
代码解析:
前面说了,父子组件传值通过prop和$emit
第一步:父组件把num通过prop传给了子组件,但要注意,这里的子组件可以给prop取了一个别名,例如叫做value作为区分,所以子组件的props对象中的键为取的别名value。如果没有设置别名,则直接使用即可
第二步:当子组件input值改变的时候,子组件监听了一个oninput方法,注意这里也给
e
m
i
t
中
的
事
件
取
了
一
个
别
名
,
只
不
过
这
个
别
名
和
原
来
的
名
字
一
样
o
n
i
n
p
u
t
,
i
n
p
u
t
值
改
变
后
,
通
过
emit中的事件取了一个别名,只不过这个别名和原来的名字一样oninput,input值改变后,通过
emit中的事件取了一个别名,只不过这个别名和原来的名字一样oninput,input值改变后,通过emit提交input事件并把新值传给父组件,又要注意->$emit的荷载为字符串
案例2:对上述案例做下调整,修改事件类型event为blur失焦时触发,代码如下
此时,不再是实时输入触发数据更新,而是输入框失焦时更新数据。
案例3:
正如官方文档所说:像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的,model 选项可以用来避免这样的冲突。
接下来修改model默认项,如下所示
有任何问题可以随时联系小编