python和vue结合开发前端_python 全栈开发，Day90(Vue组件,前端开发工具包)

昨日内容回顾

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代码：

在所有子组件中也是如此，也就是说这三个组件在各自内部也都可以相互使用。

常规举例：

Title

弹弹弹

el:"#app",

data:{},

methods:{//自定义方法

ttt:function () {

alert('弹走鱼尾纹');

}

}

})

View Code

访问网页，点击按钮，效果如下：

如果页面其他地方，也需要弹框效果呢？代码复制一遍？

这不符合编程习惯，需要使用组件

组件是可复用的 Vue 实例，且带有一个名字

组件举例：

Title

//注册自定义组件,组件名为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

}

}