广州建设网站技术,欧美网站建设案例,鹤壁做网站推广,专业网站建设套餐声明:只是记录#xff0c;初心是为了让页面更好看,会有错误,我并不是一个会记录的人#xff0c;所以有点杂乱无章的感觉#xff0c;我先花点时间把视频迅速过掉#xff0c;再来整理这些杂乱无章的内容 组件化编程 按照视频来的话#xff0c;这里应该有一些概念的东西… 声明:只是记录初心是为了让页面更好看,会有错误,我并不是一个会记录的人所以有点杂乱无章的感觉我先花点时间把视频迅速过掉再来整理这些杂乱无章的内容 组件化编程 按照视频来的话这里应该有一些概念的东西但我不管这些东西我这里只做一个浅显得记录 组件:实现局部功能效果的代码,复用编码简化开发模块:提供特定功能的js程序,这样可以提高复用性简化开发模块化: 都是以模块来编写的组件化:都是以组件来编写的
Vue中使用组件的三大步骤
定义组件 使用Vue.extend创建注意点
el不要写因为组件都受vm的管理由vm中的el决定服务哪个容器data必须写成函数要不然组件复用的时候组件a改了数据那组件b存储的数据也发生了改变但我们本意只想改变a写成函数的话可以保证每次返回的都是一个新的值
注册组件
局部注册new Vue的时候传入compoents选项全局注册:靠Vue.component(‘组件名’,组件)
使用组件 这个特别简单如果组件名叫做demo,那么直接写上即可
非单文件组件
这个基本上不用一般是作为过渡的不得不说这个template没有提示是真的烦
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodydiv idrootstudent/studentschool/schoolcommon/common/div!-- 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--!--组件名:单个单词组成单词首字母大写或小写都可以多个单词组成以短横线来分割例如my-school各个单词的首字母大写 例如MySchool 但是需要Vue脚手架避免HTML已有的元素名称使用name配置项指定组件在开发者工具中呈现的名字组件标签第一种写法:school/school第二种写法:school/ 自闭合写法这种写法有bug同一个页面使用了多次组件该组件生效的只有一个如school/school/school/生效的只有一个暂且认为是第一个简写方式const school Vue.extend(options) 简写为 const schooloptions--script src../../js/vue.js/scriptscript typetext/javascript//①const student Vue.extend({name:andong,//指定开发者工具中呈现的名字template:divh3姓名:{{name}}/h3h3年龄:{{age}}/h3 hr//div,data() {return { name: 王矽疑, age: 19 }}})// 局部const school Vue.extend({template: divh3学校:{{name}}/h3h3地址:{{address}}/h3h3校龄{{age}}/h3hr/div,data() {return { name: 安东大, address: 安天, age: 200 }}})//②const common Vue.extend({template:divh3我是全局组件 a的值是{{a}}/h3button clickchangea1/buttonhr/div,data(){return {a:10}},methods: {change(){this.a;}},})//注册全局组件// 单引号里面的内容是组件名字这个任意取但要见名知义// 第二个参数是组件的位置(说成变量更好理解点) 名字要和②处定义的保持一致Vue.component(common,common) new Vue({el: #root,components: {// 完整的是student:student,但由于键与值一样只写一个也可以//冒号之前的是组件名(若其没有name属性那么这个可以随便写但是名字最好见名知意)//冒号之后的是变量名和①处保持一致student,school}})/script
/body/htmlVueComponent !DOCTYPE html
htmlheadmeta charsetUTF-8 /titleVueComponent/titlescript typetext/javascript src../js/vue.js/script/headbody!-- 关于VueComponent1.school组件本质是一个名为VueComponent的构造函数且不是程序员定义的是Vue.extend生成的。 在vue.js的5837行有体现2.我们只需要写school/或school/schoolVue解析时会帮我们创建school组件的实例对象即Vue帮我们执行的new VueComponent(options)。每次调用Vue.extend返回的都是一个全新的VueComponent2.关于this指向(1).组件配置中data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。(2).new Vue(options)配置中data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。5.VueComponent的实例对象以后简称vc也可称之为组件实例对象。Vue的实例对象以后简称vm。--!-- 准备好一个容器--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组件的嵌套
!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
/html一个重要的关系
这个主要是理解这一个等式:VueComponentName.prototype.__proto__ Vue.prototype理解下面的这张图 实例的隐式原型属性永远指向缔造者的原型对象终点是ObjectObject的隐式原型属性的值是null 隐式原型属性:__proto__ console.dir(object) object是对象该语句是查看obj对象有哪些属性
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title一个重要的内置关系/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 1.一个重要的内置关系VueComponentName.prototype.__proto__ Vue.prototype2.为什么要有这个关系让组件实例对象vc可以访问到 Vue原型上的属性、方法。--!-- 准备好一个容器--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(){//这个是vc(VueComponent)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
单文件组件
单文件的三个部分
template标签部分:组件的结构script部分 组件交互相关的代码数据、方法等等style部分:组件的样式(css样式)
index.html
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title练习一下单文件组件的语法/title/headbody!-- 准备一个容器 --div idroot/div!-- script typetext/javascript src../../js/vue.js/script --!-- script typetext/javascript src./main.js/script --/body
/htmlmain.js
import App from ./App.vuenew Vue({el:#root,template:App/App,components:{App},
})App.vue
templatediv//下面的一行可以直接换成 /School 只要是在脚手架中即可School/SchoolStudent/Student/div
/templatescript//引入组件import School from ./School.vueimport Student from ./Student.vueexport default {name:App,components:{School,Student}}
/scriptSchool.vue
templatediv classdemoh2学校名称{{name}}/h2h2学校地址{{address}}/h2button clickshowName点我提示学校名/button /div
/templatescript//暴露组件export 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
