织梦网站建设,销售订单管理系统,wordpress虚拟插件,织梦本地做网站目录 Vue组件化编程非单文件组件基本使用几个注意点组件的嵌套VueComponent一个重要的内置关系 单文件组件index.htmlmain.jsApp.vueSchool.vueStudent.vue 各位小伙伴们好呀#xff0c;不知道上一篇文章你是否有收获#xff01;这篇是Vue2学习笔记第二篇#xff0c;也是Vue… 目录 Vue组件化编程非单文件组件基本使用几个注意点组件的嵌套VueComponent一个重要的内置关系 单文件组件index.htmlmain.jsApp.vueSchool.vueStudent.vue 各位小伙伴们好呀不知道上一篇文章你是否有收获这篇是Vue2学习笔记第二篇也是Vue2学习知识的第二章Vue组件化编程 Vue组件化编程
非单文件组件
基本使用
Vue中使用组件的三大步骤定义组件(创建组件) 注册组件 使用组件(写组件标签)
一、如何定义一个组件 使用Vue.extend(options)创建其中options和new Vue(options)时传入的那个options几乎一样但也有点区别 区别如下 1.el不要写为什么 ——— 最终所有的组件都要经过一个vm的管理由vm中的el决定服务哪个容器。 2.data必须写成函数为什么 ———— 避免组件被复用时数据存在引用关系。 备注使用template可以配置组件结构。
二、如何注册组件 1.局部注册靠new Vue的时候传入components选项 2.全局注册靠Vue.component(‘组件名’,组件) 三、编写组件标签school/school
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title基本使用/titlescript typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idroothello/hellohrh1{{msg}}/h1hr!-- 第三步编写组件标签 --school/schoolhr!-- 第三步编写组件标签 --student/student/divdiv idroot2hello/hello/div/bodyscript typetext/javascriptVue.config.productionTip false//第一步创建school组件const school Vue.extend({template:div classdemoh2学校名称{{schoolName}}/h2h2学校地址{{address}}/h2button clickshowName点我提示学校名/button /div,// el:#root, //组件定义时一定不要写el配置项因为最终所有的组件都要被一个vm管理由vm决定服务于哪个容器。data(){return {schoolName:尚硅谷,address:北京昌平}},methods: {showName(){alert(this.schoolName)}},})//第一步创建student组件const student Vue.extend({template:divh2学生姓名{{studentName}}/h2h2学生年龄{{age}}/h2/div,data(){return {studentName:张三,age:18}}})//第一步创建hello组件const hello Vue.extend({template:div h2你好啊{{name}}/h2/div,data(){return {name:Tom}}})//第二步全局注册组件Vue.component(hello,hello)//创建vmnew Vue({el:#root,data:{msg:你好啊},//第二步注册组件局部注册components:{school,student}})new Vue({el:#root2,})/script
/html几个注意点
1.关于组件名: 一个单词组成 第一种写法(首字母小写)school 第二种写法(首字母大写)School 多个单词组成 第一种写法(kebab-case命名)my-school 第二种写法(CamelCase命名)MySchool (需要Vue脚手架支持) 备注 (1).组件名尽可能回避HTML中已有的元素名称例如h2、H2都不行。 (2).可以使用name配置项指定组件在开发者工具中呈现的名字。 2.关于组件标签: 第一种写法school/school 第二种写法school/ 备注不用使用脚手架时school/会导致后续组件不能渲染。 3.一个简写方式 const school Vue.extend(options) 可简写为const school options
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title几个注意点/titlescript typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idrooth1{{msg}}/h1school/school/div/bodyscript typetext/javascriptVue.config.productionTip false//定义组件const s 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:s}})/script
/html组件的嵌套
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title组件的嵌套/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idroot/div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。//定义student组件const student Vue.extend({name:student,template:divh2学生姓名{{name}}/h2 h2学生年龄{{age}}/h2 /div,data(){return {name:尚硅谷,age:18}}})//定义school组件const school Vue.extend({name:school,template:divh2学校名称{{name}}/h2 h2学校地址{{address}}/h2 student/student/div,data(){return {name:尚硅谷,address:北京}},//注册组件局部components:{student}})//定义hello组件const hello Vue.extend({template:h1{{msg}}/h1,data(){return {msg:欢迎来到尚硅谷学习}}})//定义app组件const app Vue.extend({template:div hello/helloschool/school/div,components:{school,hello}})//创建vmnew Vue({template:app/app,el:#root,//注册组件局部components:{app}})/script
/htmlVueComponent
1.school组件本质是一个名为VueComponent的构造函数且不是程序员定义的是Vue.extend生成的。 2.我们只需要写school/或school/schoolVue解析时会帮我们创建school组件的实例对象 即Vue帮我们执行的new VueComponent(options)。 3.特别注意每次调用Vue.extend返回的都是一个全新的VueComponent 4.关于this指向 (1).组件配置中 data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。 (2).new Vue(options)配置中 data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。 5.VueComponent的实例对象以后简称vc也可称之为组件实例对象。 Vue的实例对象以后简称vm。
!DOCTYPE html
htmlheadmeta charsetUTF-8 /titleVueComponent/titlescript typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idrootschool/schoolhello/hello/div/bodyscript typetext/javascriptVue.config.productionTip false//定义school组件const school Vue.extend({name:school,template:divh2学校名称{{name}}/h2 h2学校地址{{address}}/h2 button clickshowName点我提示学校名/button/div,data(){return {name:尚硅谷,address:北京}},methods: {showName(){console.log(showName,this)}},})const test Vue.extend({template:spanatguigu/span})//定义hello组件const hello Vue.extend({template:divh2{{msg}}/h2test/test /div,data(){return {msg:你好啊}},components:{test}})// console.log(,school)// console.log(#,hello)//创建vmconst vm new Vue({el:#root,components:{school,hello}})/script
/html一个重要的内置关系
1.一个重要的内置关系VueComponent.prototype.proto Vue.prototype 2.为什么要有这个关系让组件实例对象vc可以访问到 Vue原型上的属性、方法。
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title一个重要的内置关系/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idrootschool/school/div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。Vue.prototype.x 99//定义school组件const 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)}},})//创建一个vmconst vm new Vue({el:#root,data:{msg:你好},components:{school}})//定义一个构造函数/* function Demo(){this.a 1this.b 2}//创建一个Demo的实例对象const d new Demo()console.log(Demo.prototype) //显示原型属性console.log(d.__proto__) //隐式原型属性console.log(Demo.prototype d.__proto__)//程序员通过显示原型属性操作原型对象追加一个x属性值为99Demo.prototype.x 99console.log(,d) *//script
/html单文件组件
以下的代码并不能够正常运行需要运用来脚手架上该部分这是先熟悉文件的编写以及对应的结构编写。
index.html
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title练习一下单文件组件的语法/title/headbody!-- 准备一个容器 --div idroot/divscript typetext/javascript src../js/vue.js/script script typetext/javascript src./main.js/script/body
/html
main.js
import App from ./App.vuenew Vue({el:#root,template:App/App,components:{App},
})App.vue
templatedivSchool/SchoolStudent/Student/div
/templatescript//引入组件import School from ./School.vueimport Student from ./Student.vueexport default {name:App,components:{School,Student}}
/script
School.vue
templatediv classdemoh2学校名称{{name}}/h2h2学校地址{{address}}/h2button clickshowName点我提示学校名/button /div
/templatescriptexport default {name:School,data(){return {name:尚硅谷,address:北京昌平}},methods: {showName(){alert(this.name)}},}
/scriptstyle.demo{background-color: orange;}
/styleStudent.vue
templatedivh2学生姓名{{name}}/h2h2学生年龄{{age}}/h2/div
/templatescriptexport default {name:Student,data(){return {name:张三,age:18}}}
/script
(注意以上的部分的.vue文件由于没有对应的.vue代码模板代码由于无法高亮所以选择了html格式
