昨日内容回顾
1. Vue使用1. 生成Vue实例和DOM中元素绑定2. app.$el -->取出该vue实例绑定的DOM标签3. app.$data -->取出该vue实例绑定的data属性2. 模板语法1. { {name}} -->在标签中间引用data属性中的变量2. v-html='msg' -->在页面上显示我定义的标签元素3. v-if='ok' -->控制标签在不在DOM中4. v-show='!ok' -->控制标签的display属性的值(是否显示)5. v-bind:href='url' -->将标签的属性和vue实例的data属性绑定起来6. v-on:click='dianwo'-->给标签绑定一个点击事件,方法需要在vue实例的methods中定义7. v-model='article' -->用在input标签和textarea标签中,将用户输入和vue实例中的数据属性建立双向绑定3. 计算属性和侦听器1. 计算属性
(字符串翻转的例子)1. 计算属性需要定义在vue实例的 computed 中2. 多用于对变量做一些自定义的操作3. 我们在页面上像使用普通data属性一样使用计算属性2. 侦听器
多用于一些复杂的运算或者异步操作
侦听器需要放在 vue实例的 watch 中4. class和style属性1. 基于对象的绑定2. 基于数组的绑定5. 条件渲染
v-if如果想控制多个标签的显示与否,可以使用 template 标签把它们包起来
v-if/v-elsev-if/v-else if /v-else
6. 列表渲染
v-for循环7. 事件处理
详见2.模板语法8. 表单绑定
详见2.模板语法
二. 小清单1. 对象的深拷贝2. 根据索引删除数组中的元素
splice(索引,删除个数,插入的元素)
View Code
一、Vue组件
组件基础
组件的组织
通常一个应用会以一棵嵌套的组件树的形式来组织:
将上图理解为一个网页
例如,你可能会有页头、侧边栏、内容区等组件,每个组件又包含了其它的像导航链接、博文之类的组件。
为了能在模板中使用,这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型:全局注册和局部注册。至此,我们的组件都只是通过 Vue.component 全局注册的:
Vue.component('my-component-name', {//... options ...
})
全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例,也包括其组件树中的所有子组件的模板中。
到目前为止,关于组件注册你需要了解的就这些了,如果你阅读完本页内容并掌握了它的内容,我们会推荐你再回来把组件注册读完。
组件注册
组件名
在注册一个组件的时候,我们始终需要给它一个名字。比如在全局注册时:
Vue.component('my-component-name', { /* ... */ })
该组件名就是 Vue.component 的第一个参数。
你给予组件的名字可能依赖于你打算拿它来做什么。当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候,我们强烈推荐遵循 W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)。这会帮助你避免和当前以及未来的 HTML 元素相冲突。
你可以在风格指南中查阅到关于组件名的其它建议。
组件名大小写
定义组件名的方式有两种:
使用 kebab-case
Vue.component('my-component-name', { /* ... */ })
当使用 kebab-case (短横线分隔命名) 定义一个组件时,你也必须在引用这个自定义元素时使用 kebab-case,例如 。
使用 PascalCase
Vue.component('MyComponentName', { /* ... */ })
当使用 PascalCase (驼峰式命名) 定义一个组件时,你在引用这个自定义元素时两种命名法都可以使用。也就是说 和 都是可接受的。注意,尽管如此,直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。
全局注册
到目前为止,我们只用过 Vue.component 来创建组件:
Vue.component('my-component-name', {//... 选项 ...
})
这些组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。比如:
js代码:
Vue.component('component-a', { /* ... */})
Vue.component('component-b', { /* ... */})
Vue.component('component-c', { /* ... */})
new Vue({ el:'#app' })
html代码:
在所有子组件中也是如此,也就是说这三个组件在各自内部也都可以相互使用。
常规举例:
弹弹弹
el:"#app",
data:{},
methods:{//自定义方法
ttt:function () {
alert('弹走鱼尾纹');
}
}
})
View Code
访问网页,点击按钮,效果如下:
如果页面其他地方,也需要弹框效果呢?代码复制一遍?
这不符合编程习惯,需要使用组件
组件是可复用的 Vue 实例,且带有一个名字
组件举例:
//注册自定义组件,组件名为tankuang
Vue.component('tankuang',{
template:`弹弹弹`,
methods:{
ttt:function(){
alert('弹走鱼尾纹');
}
}
})
var app=new Vue({
el:"#app",
data:{},
})
View Code
刷新网页,效果同上!
在这个例子中是 ,就是一个自定义组件。它作为一个自定义元素来使用!
因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。
组件的复用
你可以将组件进行任意次数的复用:
View Code
注意当点击按钮时,每个组件都会各自独立维护它的 count。因为你每用一次组件,就会有一个它的新实例被创建。
刷新网页,效果如下:
data必须是一个函数
当我们定义这个 组件时,你可能会发现它的 data 并不是像这样直接提供一个对象:
data: {
count: 0
}
取而代之的是,一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝:
data: function () {return{
count: 0
}
}