济南网站建设 推搜点,做优惠卷网站倒闭了多少钱,如何制作网站主页,百度网站描述文章目录模块与组件、模块化与组件化模块组件模块化组件化Vue中的组件含义非单文件组件基本使用组件注意事项使用 kebab-case使用 PascalCase组件的嵌套模板templateVueComponent一个重要的内置功能单文件组件Vue脚手架使用Vue CLI脚手架先配置环境初始化脚手架分析脚手架结构实…
文章目录模块与组件、模块化与组件化模块组件模块化组件化Vue中的组件含义非单文件组件基本使用组件注意事项使用 kebab-case使用 PascalCase组件的嵌套模板templateVueComponent一个重要的内置功能单文件组件Vue脚手架使用Vue CLI脚手架先配置环境初始化脚手架分析脚手架结构实例render函数——解决无模板解析修改默认配置ref属性——定位元素props配置项——传递参数:age20和 age20的区别mixin混入plugin插件scoped样式插槽Slot实例自定义事件模块与组件、模块化与组件化 模块
理解向外提供特定功能的 js 程序一般就是一个 js 文件为什么js 文件很多很复杂作用复用 js简化 js 的编写提高 js 运行效率
组件
定义用来实现局部功能的代码和资源的集合html/css/js/image…为什么一个界面的功能很复杂作用复用编码简化项目编码提高运行效率
模块化
当应用中的 js 都以模块来编写的那这个应用就是一个模块化的应用
组件化
当应用中的功能都是多组件的方式来编写的那这个应用就是一个组件化的应用
Vue中的组件含义
组件是可复用的Vue实例 说白了就是一组可以重复使用的模板 跟JSTL的自定义标签、Thymeleal的th:fragment等框架有着异曲同工之妙通常一个应用会以一棵嵌套的组件树的形式来组织
组件系统是 Vue 的另一个重要概念因为它是一种抽象允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想几乎任意类型的应用界面都可以抽象为一个组件树 在这里插入图片描述 例如你可能会有页头、侧边栏、内容区等组件每个组件又包含了其它的像导航链接、博文之类的组件。
非单文件组件
基本使用
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0script typetext/javascript src../js/vue.js/scripttitleDocument/title
/head
bodydiv idroot!-- 3使用组件 --school/schoolstudent/student/divscript typetext/javascript//1创建组件const schoolVue.extend({template: divh1{{schoolName}}/h1h2{{address}}/h2/div,data() {return {schoolName: 一中,address: 柳岸}},})//1创建组件的快捷方式const student{template: divh1{{studentName}}/h1h2{{age}}/h2/div,data() {return {studentName: lsc,age: 22}},}//2全局注册组件Vue.component(student,student)new Vue({el: #root,data: {msg: hello compentments},//2局部注册组件components: {school:school //这种可以简写为 school}})/script
/body
/html总结
Vue中使用组件的三大步骤 定义组件(创建组件)——Vue.extend 注册组件——局部和全局 使用组件(写组件标签)
如何定义一个组件 使用Vue.extend(options)创建其中options和new Vue(options)时传入的options几乎一样但也有点区别 el不要写为什么 最终所有的组件都要经过一个vm的管理由vm中的el决定服务哪个容器 data必须写成函数为什么 避免组件被复用时数据存在引用关系防止同一个组件的实例对象之间数据相互影响
如何注册组件
局部注册new Vue的时候传入components选项全局注册Vue.component(‘组件名’,组件) 全局注册 Vue.component(my-component-name, {
// ... 选项 ...
})这些组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中 Vue.component(component-a, { /* ... */ })
Vue.component(component-b, { /* ... */ })
Vue.component(component-c, { /* ... */ })new Vue({ el: #app })
div idapp
component-a/component-a
component-b/component-b
component-c/component-c
/div在所有子组件中也是如此也就是说这三个组件在各自内部也都可以相互使用。 局部注册 全局注册往往是不够理想的。比如如果你使用一个像 webpack 这样的构建系统全局注册所有的组件意味着即便你已经不再使用一个组件了它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。 在这些情况下你可以通过一个普通的 JavaScript 对象来定义组件 var ComponentA { /* ... */ }
var ComponentB { /* ... */ }
var ComponentC { /* ... */ }然后在 components 选项中定义你想要使用的组件 new Vue({el: #app,components: {component-a: ComponentA,component-b: ComponentB}
})对于 components 对象中的每个 property 来说其 property 名就是自定义元素的名字其 property 值就是这个组件的选项对象。 注意局部注册的组件在其子组件中不可用。例如如果你希望 ComponentA 在 ComponentB 中可用则你需要这样写 var ComponentA { /* ... */ }var ComponentB {components: {component-a: ComponentA},// ...
}如果你通过 Babel 和 webpack 使用 ES2015 模块 import ComponentA from ./ComponentA.vueexport default {components: {ComponentA},// ...
}注意在 ES2015 中在对象中放一个类似 ComponentA 的变量名其实是 ComponentA: ComponentA 的缩写即这个变量名同时是用在模板中的自定义元素的名称 包含了这个组件选项的变量名 如何使用
编写组件标签school/school组件注意事项
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title组件注意事项/titlescript typetext/javascript src../js/vue.js/script/headbodydiv idrooth1{{msg}}/h1school/school/div/bodyscript typetext/javascriptVue.config.productionTip falseconst school Vue.extend({name:atguigu,template:divh2学校名称{{name}}/h2 h2学校地址{{address}}/h2 /div,data(){return {name:尚硅谷,address:北京}}})new Vue({el:#root,data:{msg:欢迎学习Vue!},components:{school}})/script
/html
总结
关于组件名
一个单词组成 第一种写法首字母小写school 第二种写法首字母大写School
多个单词组成 第一种写法kebab-case命名my-school 第二种写法CamelCase命名MySchool 需要Vue脚手架支持 组件名大小写 定义组件名的方式有两种 使用 kebab-case Vue.component(my-component-name, { /* ... */ })当使用 kebab-case (短横线分隔命名) 定义一个组件时你也必须在引用这个自定义元素时使用 kebab-case例如 my-component-name。 使用 PascalCase Vue.component(MyComponentName, { /* ... */ })当使用 PascalCase (首字母大写命名) 定义一个组件时你在引用这个自定义元素时两种命名法都可以使用。也就是说 my-component-name 和 MyComponentName 都是可接受的。注意尽管如此直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。 备注 组件名尽可能回避HTML中已有的元素名称例如h2、H2都不行 可以使用name配置项指定组件在开发者工具中呈现的名字
关于组件标签 第一种写法school/school 第二种写法school/ 备注不使用脚手架时school/会导致后续组件不能渲染
一个简写方式const school Vue.extend({options})可简写为const school {options}
组件的嵌套
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title组件的嵌套/titlescript typetext/javascript src../js/vue.js/script/headbodydiv idroot/div/bodyscript typetext/javascriptVue.config.productionTip false//定义student组件const student Vue.extend({template:divh2学生名称{{name}}/h2 h2学生年龄{{age}}/h2 /div,data(){return {name:JOJO,age:20}}})//定义school组件const school Vue.extend({template:divh2学校名称{{name}}/h2 h2学校地址{{address}}/h2 student/student/div,components:{student},data(){return {name:尚硅谷,address:北京}}})//定义hello组件const hello Vue.extend({template:h1{{msg}}/h1,data(){return {msg:欢迎学习尚硅谷Vue教程}}})//定义app组件const app Vue.extend({template:divhello/helloschool/school/div,components:{school,hello}})//创建vmnew Vue({template:app/app,el:#root,components:{app}})/script
/html
效果 对于一个组件想嵌套在哪个组件中就要将对于的字组件嵌套在对应的父组件中
模板template
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript languageJavaScript srcstatic/script/vue.js/script
/head
body
!--view层 模板--
div idappmyfirstcomponent/myfirstcomponent
/divscript languageJavaScript// 定义一个Vue组件Vue.component(myfirstcomponent, {template: div hello,我是一个组件 /div});var vmnew Vue({el: #app,data: {}});
/script
/body
/html组件的第一个参数就是组件名 当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候我们强烈推荐遵循 W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)。这会帮助你避免和当前以及未来的 HTML 元素相冲突。 组件失效的原因 没有实例化某个Vue对象组件必须挂载在某个Vue实例之下否则不会生效标签名称不能有大写字母创建组件构造器和注册组件的代码必须在Vue实例之前
VueComponent
const school Vue.extend({name:atguigu,template:divh2学校名称{{name}}/h2 h2学校地址{{address}}/h2 /div,data(){return {name:尚硅谷,address:北京}}})关于VueComponent school组件本质是一个名为VueComponent的构造函数且不是程序员定义的是Vue.extend生成的 我们只需要写school/或school/schoolVue解析时会帮我们创建school组件的实例对象即Vue帮我们执行的new VueComponent(options) 特别注意每次调用Vue.extend返回的都是一个全新的VueComponent 关于this指向 组件配置中data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是VueComponent实例对象 new Vue(options)配置中data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是Vue实例对象
VueComponent的实例对象以后简称vc也可称之为组件实例对象 Vue的实例对象以后简称vm 只有在本笔记中VueComponent的实例对象才简称为vc vc在创建的时候不能写el只能跟着对应的vm的时候来决定
一个重要的内置功能
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title一个重要的内置关系/titlescript typetext/javascript src../js/vue.js/script/headbodydiv idrootschool/school/div/bodyscript typetext/javascriptVue.config.productionTip falseVue.prototype.x 99const school Vue.extend({name:school,template:divh2学校名称{{name}}/h2 h2学校地址{{address}}/h2 button clickshowX点我输出x/button/div,data(){return {name:尚硅谷,address:北京}},methods: {showX(){console.log(this.x)}},})const vm new Vue({el:#root,data:{msg:你好},components:{school}})/script
/html 一个重要的内置关系VueComponent.prototype.__proto__ Vue.prototype VueComponent.prototype指的是我们的VueComponent的原型对象 Vue.prototype指的是Vue的原型对象 为什么要有这个关系让组件实例对象vc可以访问到 Vue 原型上的属性、方法 通过显示原型链可以给原型对象添加属性实例对象通过隐式原型链获取原型对象的属性从自身沿着原型链一直找到window的原型对象为空
单文件组件
School.vue
templatediv idDemoh2学校名称{{name}}/h2h2学校地址{{address}}/h2button clickshowName点我提示学校名/button/div
/templatescriptexport default {name:School,data() {return {name:尚硅谷,address:北京}},methods: {showName(){alert(this.name)}},}
/scriptstyle#Demo{background: orange;}
/style
export default 默认暴露将我们的组件School暴露出去 可以使用name配置项指定组件在开发者工具中呈现的名字 其实export default {}是 简写 全称是 export default Vue.expend({optitons})
Student.vue
templatedivh2学生姓名{{name}}/h2h2学生年龄{{age}}/h2/div
/templatescriptexport default {name:Student,data() {return {name:JOJO,age:20}},}
/script
App.vue
templatedivSchool/SchoolStudent/Student/div
/templatescriptimport School from ./School.vueimport Student from ./Student.vueexport default {name:App,components:{School,Student}}
/script
main.js
import App from ./App.vuenew Vue({template:App/App,el:#root,components:{App}
})
index.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title单文件组件练习/title
/head
bodydiv idroot/divscript src../../js/vue.js/scriptscript src./main.js/script
/body
/html
直接这样写并不能成功。需要我们的Vue 脚手架的帮助才能实现
Vue脚手架
使用Vue CLI脚手架
先配置环境
Node.jshttp://nodejs.cn/download/安装就是无脑的下一步就好安装在自己的环境目录下
确认nodejs安装成功 cmd下输入node -v查看是否能够正确打印出版本号即可cmd下输入npm -v查看是否能够正确打印出版本号即可 这个npm就是一个软件包管理工具就和linux下的apt软件安装差不多
Githttps://git-scm.com/doenloads
初始化脚手架
Vue 脚手架是 Vue 官方提供的标准化开发工具开发平台最新的版本是 4.x文档Vue CLI
具体步骤
如果下载缓慢请配置 npm 淘宝镜像npm config set registry http://registry.npm.taobao.org -g 就是全局安装 npm install cnpm -g 或使用如下语句解决npm速度慢的问题 npm install --registryhttps://registry.npm.taobao.org 但是能不用cnpm就不用npm比较好因为cnpm可能打包的时候会出现问题 全局安装vue/cli——npm install -g vue/cli切换到你要创建项目的目录然后使用命令创建项目vue create xxx(项目名) 选择使用vue的版本,我们学习的是Vue2,所以选择2 启动项目npm run serve暂停项目CtrlCVue 脚手架隐藏了所有 webpack 相关的配置若想查看具体的 webpakc 配置请执行vue inspect output.js
呈现效果——访问http://localhost:8080/ 这就是 Node.js的服务跟tomcat 差不多。Node.js它是一个服务器它可以运行一些东西。
分析脚手架结构
初始脚手架文件结构
.文件目录
├── node_modules
├── public
│ ├── favicon.ico: 页签图标
│ └── index.html: 主页面
├── src
│ ├── assets: 存放静态资源
│ │ └── logo.png
│ │── component: 存放组件
│ │ └── HelloWorld.vue
│ │── App.vue: 汇总所有组件
│ └── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件
├── README.md: 应用描述文件
└── package-lock.json: 包版本控制文件main.js是一切的开端
实例
src/components/School.vue
templatediv idDemoh2学校名称{{name}}/h2h2学校地址{{address}}/h2button clickshowName点我提示学校名/button/div
/templatescriptexport default {name:School,data() {return {name:尚硅谷,address:北京}},methods: {showName() {alert(this.name)}},}
/scriptstyle#Demo{background: orange;}
/style
src/components/Student.vue
templatedivh2学生姓名{{name}}/h2h2学生年龄{{age}}/h2/div
/templatescriptexport default {name:Student,data() {return {name:JOJO,age:20}},}
/scriptsrc/App.vue
templatedivSchool/SchoolStudent/Student/div
/templatescriptimport School from ./components/School.vueimport Student from ./components/Student.vueexport default {name:App,components:{School,Student}}
/scriptsrc/main.js
import Vue from vue
import App from ./App.vueVue.config.productionTip falsenew Vue({//将App组件放入容器中render: h h(App),
}).$mount(#app)
我们发现在main.js中我们没有注册App组件这些其实都是在render函数中等会解释
public/index.html
!DOCTYPE html
html langheadmeta charsetUTF-8!-- 针对IE浏览器的特殊配置含义是让IE浏览器以最高渲染级别渲染页面 --meta http-equivX-UA-Compatible contentIEedge!-- 开启移动端的理想端口 --meta nameviewport contentwidthdevice-width, initial-scale1.0!-- 配置页签图标 --link relicon href% BASE_URL %favicon.ico!-- 配置网页标题 --title% htmlWebpackPlugin.options.title %/title/headbody!-- 容器 --div idapp/div/body
/html
虽然在表面上我们没有使用script src./main.js/script来引入但是我们可以进行使用 div idapp/div,是因为脚手架帮我们做好了
render函数——解决无模板解析
import Vue from vue
import App from ./App.vueVue.config.productionTip falsenew Vue({el:#app,// 简写形式render: h h(App),// 完整形式// render(createElement){// return createElement(App)// }// 因为只有一个参数所以可以把括号去掉 和一条语句只是return写成render createElement return createElement(App)
})
总结
关于不同版本的函数 vue.js 与 vue.runtime.xxx.js的区别 vue.js 是完整版的 Vue包含核心功能模板解析器vue.runtime.xxx.js 是运行版的 Vue只包含核心功能没有模板解析器我们的import Vue from vue’引入的就是import Vue from ‘vue’ 因为 vue.runtime.xxx.js 没有模板解析器所以不能使用 template 配置项需要使用 render函数接收到的createElement 函数去指定具体内容
修改默认配置
vue.config.js 是一个可选的配置文件如果项目的和 package.json 同级的根目录中存在这个文件那么它会被 vue/cli-service 自动加载使用 vue.config.js 可以对脚手架进行个性化定制详见配置参考 | Vue CLI
const { defineConfig } require(vue/cli-service)
module.exports defineConfig({transpileDependencies: true,lintOnSave:false /*关闭语法检查*/
})webpack将配置文件放在了webpack.config.js中这个文件被隐藏就是防止我们乱改对于我们想改Vue的配置我们可以通过新建一个vue.config.js 文件将这个文件和我们webpack.config.js进行合并达到我们修改配置的功能
ref属性——定位元素
templatedivh1 reftitle{{msg}}/h1Student refsch/button clickshow refbtn点我输出ref/button/div
/templatescript
import Student from ../components/Student.vueexport default {name:App,components: { Student },data() {return {msg:欢迎学习Vue}},methods:{show(){console.log(this.$refs.title)console.log(this.$refs.sch)console.log(this.$refs.btn)}}}
/script 总结
ref属性 被用来给元素或子组件注册引用信息id的替代者 应用在html标签上获取的是真实DOM元素应用在组件标签上获取的是组件实例对象vc 使用方式 打标识h1 refxxx/h1 或 School refxxx/School 获取this.$refs.xxx
props配置项——传递参数
像上面那样用组件没有任何意义所以我们是需要传递参数到组件的此时就需要使用props属性了注意默认规则下props属性里的值不能为大写 HTML 中的 attribute 名是大小写不敏感的所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名 src/App.vue
templatedivh1{{msg}}/h1Student nameJOJO sex男 :age20 /Student namePOKO sex男 :age30 /Student nameSJO sex女 :age25 //div
/templatescriptimport Student from ./components/Studentexport default {name:App,components:{Student},data() {return {msg: 我是一个正常人}},}
/scriptsrc/components/Student.vue
templatedivh2学生姓名{{name}}/h2h2学生性别:{{sex}}/h2h2学生年龄{{myage}}/h2hr/div
/templatescriptexport default {name:Student,//简单接收// props:[name,age,sex],// 接收的同时对数据进行类型限制// props:{// name:String,// age:Number,// sex:String// },// 接收的同时对数据进行类型限制 指定默认值 限制必要性props:{name:{type:String,required:true,},age:{type:Number,default:99},sex:{type:String,required:true}},data() {return {myage: this.age}},}
/script总结
props配置项 功能让组件接收外部传过来的数据 传递数据Demo namexxx/,在使用组件标签的时候进行传递数据 接收数据 第一种方式只接收props:[‘name’]第二种方式限制数据类型props:{name:String}第三种方式限制类型、限制必要性、指定默认值
props:{name:{type:String, //类型required:true, //必要性default:JOJO //默认值}
}props是只读的Vue底层会监测你对props的修改如果进行了修改就会发出警告若业务需求确实需要修改那么请复制props的内容到data中一份然后去修改data中的数据 经过测试我们发现对于组件来说,prop的属性的优先级是大于我们的data里面的属性所以我们复制可以data() return{ mydata: this.prop} :age20和 age“20的区别”
:age“20” 的全称是v-bind:age“20” ,也就是数据单向绑定了而且我们知道这样绑定,中的内容是表示js运算结果所以传给age的值是数字20age“20”,就表示传给age的值是一个字符串
mixin混入
src/mixin.js
//注册组件并暴露出去
export const mixin {methods: {showName() {alert(this.name)}},mounted() {console.log(你好呀~)}
}
独立写一个混入的js文件
src/components/School.vue
templatedivh2 clickshowName学校姓名{{name}}/h2h2学校地址{{address}}/h2 /div
/templatescript//局部引入混入import {mixin} from ../mixinexport default {name:School,data() {return {name:尚硅谷,address:北京}},//局部注册mixins:[mixin]}
/script
src/components/Student.vue
templatedivh2 clickshowName学生姓名{{name}}/h2h2学生性别{{sex}}/h2 /div
/templatescript// 局部引入混入import {mixin} from ../mixinexport default {name:Student,data() {return {name:JOJO,sex:男}},//局部注册mixins:[mixin]}
/script
src/App.vue
templatedivSchool/hr/Student//div
/templatescriptimport Student from ./components/Student.vueimport School from ./components/School.vueexport default {name:App,components: { Student,School },}
/script 全局混入
src/main.js:
import Vue from vue
import App from ./App.vue
import {mixin} from ./mixinVue.config.productionTip false
Vue.mixin(mixin)new Vue({el:#app,render: h h(App)
})总结
mixin混入
功能可以把多个组件共用的配置提取成一个混入对象
使用方式
第一步定义混入
const mixin {data(){....},methods:{....}....
}第二步使用混入
全局混入Vue.mixin(xxx)局部混入mixins:[‘xxx’]
备注
组件和混入对象含有同名选项时这些选项将以恰当的方式进行“合并”在发生冲突时以组件优先。
var mixin {data: function () {return {message: hello,foo: abc}}
}new Vue({mixins: [mixin],data () {return {message: goodbye,bar: def}},created () {console.log(this.$data)// { message: goodbye, foo: abc, bar: def }}
})同名生命周期钩子将合并为一个数组因此都将被调用。另外混入对象的钩子将在组件自身钩子之前调用。
var mixin {created () {console.log(混入对象的钩子被调用)}
}new Vue({mixins: [mixin],created () {console.log(组件钩子被调用)}
})// 混入对象的钩子被调用
// 组件钩子被调用plugin插件
src/plugin.js:
export default {install(Vue,x,y,z){console.log(x,y,z)//全局过滤器Vue.filter(mySlice,function(value){return value.slice(0,4)})//定义混入Vue.mixin({data() {return {x:100,y:200}},})//给Vue原型上添加一个方法vm和vc就都能用了Vue.prototype.hello (){alert(你好啊)}}
}
独立写一个插件的js文件
src/main.js:
import Vue from vue
import App from ./App.vue
import plugin from ./pluginVue.config.productionTip false
Vue.use(plugin,1,2,3)new Vue({el:#app,render: h h(App)
})src/components/School.vue:
templatedivh2学校姓名{{name | mySlice}}/h2h2学校地址{{address}}/h2 /div
/template
scriptexport default {name:School,data() {return {name:尚硅谷atguigu,address:北京}}}
/scriptsrc/components/Student.vue:
templatedivh2学生姓名{{name}}/h2h2学生性别{{sex}}/h2 button clicktest点我测试hello方法/button /div
/template
scriptexport default {name:Student,data() {return {name:JOJO,sex:男}},methods:{test() {this.hello()}}}
/script总结
插件
功能用于增强Vue本质包含install方法的一个对象install的第一个参数是Vue,也就vm实例对象的构造函数第二个以后的参数是插件使用者传递的数据
定义插件
plugin.install function (Vue, options) {// 1.添加全局过滤器Vue.filter(....)// 2.添加全局指令Vue.directive(....)// 3. 配置全局混入Vue.mixin(....)// 4. 添加实例方法Vue.prototype.$myMethod function () {...}Vue.prototype.$myProperty xxxx
}使用插件Vue.use(plugin)
scoped样式
src/components/School.vue
templatediv classdemoh2学校姓名{{name}}/h2h2学校地址{{address}}/h2 /div
/templatescriptexport default {name:School,data() {return {name:尚硅谷,address:北京}}}
/scriptstyle scoped.demo{background-color: blueviolet;}
/style
src/components/Student.vue
templatediv classdemoh2学生姓名{{name}}/h2h2学生性别{{sex}}/h2 /div
/templatescriptexport default {name:Student,data() {return {name:JOJO,sex:男}}}
/scriptstyle scoped.demo{background-color: chartreuse;}
/style
src/App.vue
templatedivSchool/Student//div
/templatescriptimport Student from ./components/Student.vueimport School from ./components/School.vueexport default {name:App,components: { Student,School },}
/script 总结
scoped样式
作用让样式在局部生效防止冲突 我们在给组件写对应的样式时可能会有类名相同而导致样式冲突所以对于组件的样式我们最好能让其只在组件内局部生效而不影响其他组件的样式 写法style scoped scoped样式一般不会在App.vue中使用 插槽Slot
实例
定义插槽模板 Vue.component(todo,{template:div\slot nametodo-title/slot\ul\slot nametodo-items/slot\/ul\/div});创建对应的组件 Vue.component(todo-title,{props:[title],template:div{{title}}/div});Vue.component(todo-items,{props:[item],template:li{{item}}/li});
实例Vue并初始化数据
var vm new Vue({el:#app,data:{title:博客,todoItems:[Java,Php,C#]}});
将这些值通过插槽插入
div idapptodotodo-title slottodo-title :titletitle/todo-titletodo-items slottodo-items v-foritem in todoItems :itemitem/todo-items/todo
/div
完整代码
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
!--view层模板--
div idapptodotodo-title slottodo-title :titletitle/todo-titletodo-items slottodo-items v-foritem in todoItems :itemitem/todo-items/todo
/div
script languageJavaScript srcstatic/script/vue.js/script
script typetext/javascriptVue.component(todo-title,{props:[title],template:div{{title}}/div});Vue.component(todo-items,{props:[item],template:li{{item}}/li});Vue.component(todo,{template:div\slot nametodo-title/slot\ul\slot nametodo-items/slot\/ul\/div});var vm new Vue({el:#app,data:{title:博客,todoItems:[Java,Php,C#]}});
/script
/body
/html自定义事件
如果想实现按一个删除键就能删除todo-items对应的一条数据该如何实现
通以上代码不难发现数据项在Vue的实例中 但删除操作要在组件中完成 那么组件如何才能删除Vue实例中的数据呢?此时就涉及到参数传递与事件分发了 Vue为我们提供了自定义事件的功能很好的帮助我们解决了这个问题 使用this.$emit(‘自定义事件名’ 参数) 操作过程如下
在vue的实例中增加了methods对象并定义了一个名为removeItems的方法
var vm new Vue({el:#app,data:{title:标题,todoItems:[Java,Php,C#]},methods:{removeItems: function(index){this.todoItems.splice(index,1);}}});因为数据是在vue实例中所以删除的方法也应该在vue实例中
修改todo-items待办内容组件的代码增加一个删除按钮并且绑定事件 Vue.component(todo-items,{props:[item,index],//只能绑定绑定当前组件的方法template:li{{index}}--{{item}}button clickremove删除/button/li,methods:{remove: function(index){//this.$emit()自定义事件分发this.$emit(delete,index);}}});
this.$emit(‘’,‘’ …)第一个参数是我们的自定义事件名第二个是相关的参数…
修改todo-items待办内容组件的HTML代码增加一个自定义事件比如叫remove可以和组件的方法绑定然后绑定到vue的方法
div idapptodotodo-title slottodo-title :titletitle/todo-titletodo-items slottodo-items v-for(item,index) in todoItems :itemitem v-bind:indexindex v-on:deleteremoveItems/todo-items/todo
/div
完整代码
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
!--view层模板--
div idapptodotodo-title slottodo-title :titletitle/todo-titletodo-items slottodo-items v-for(item,index) in todoItems:itemitem v-bind:indexindexv-on:deleteremoveItems/todo-items/todo
/div
script languageJavaScript srcstatic/script/vue.js/script
script typetext/javascriptVue.component(todo-title,{props:[title],template:div{{title}}/div});Vue.component(todo-items,{props:[item,index],//只能绑定绑定当前组件的方法template:li{{index}}--{{item}}button clickremove(index)删除/button/li,methods:{remove: function(index){//this.$emit()自定义事件分发this.$emit(delete,index);}}});Vue.component(todo,{template:div\slot nametodo-title/slot\ul\slot nametodo-items/slot\/ul\/div});var vm new Vue({el:#app,data:{title:标题,todoItems:[Java,Php,C#]},methods:{removeItems: function(index){this.todoItems.splice(index,1);}}});
/script
/body
/html
