盐城市网站建设公司,网站关键词和网页关键词的样本,网站每天点击量多少好,信息流广告投放是什么2.1. 模块与组件、模块化与组件化 模块
理解#xff1a;向外提供特定功能的 js 程序#xff0c;一般就是一个 js 文件为什么#xff1a;js 文件很多很复杂作用#xff1a;复用、简化 js 的编写#xff0c;提高 js 运行效率
组件
定义#xff1a;用来实现局部功能的代码…2.1. 模块与组件、模块化与组件化 模块
理解向外提供特定功能的 js 程序一般就是一个 js 文件为什么js 文件很多很复杂作用复用、简化 js 的编写提高 js 运行效率
组件
定义用来实现局部功能的代码和资源的集合html/css/js/image…为什么一个界面的功能很复杂作用复用编码简化项目编码提高运行效率
模块化 当应用中的 js 都以模块来编写的那这个应用就是一个模块化的应用 组件化 当应用中的功能都是多组件的方式来编写的那这个应用就是一个组件化的应用
2.2. 非单文件组件
非单文件组件一个文件中包含有 n 个组件 单文件组件一个文件中只包含有 1 个组件
2.2.1. 基本使用
Vue中使用组件的三大步骤
1. 定义组件
使用 Vue.extend(options) 创建其中 options 和 new Vue(options) 时传入的 options 几乎一样但也有点区别 el 不要写因为最终所有的组件都要经过一个 vm 的管理由 vm 中的 el 才决定服务哪个容器data 必须写成函数避免组件被复用时数据存在引用关系
2. 注册组件
局部注册new Vue()的时候options传入components选项全局注册Vue.component(‘组件名’,组件)
3. 使用组件
编写组件标签如 school/school
script 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}}})
/script 注册组件
局部注册靠new Vue的时候传入components选项全局注册靠Vue.component(‘组件名’,组件) 局部注册(只有注册了那个组件的才能使用) script//创建vmnew Vue({el: #root,data: {msg:你好啊},//第二步注册组件局部注册components: {//左边才是组件名school: school,student: student// ES6简写形式// school,// student}})
/script 全局注册所有的都可以使用 script//第二步全局注册组件Vue.component(hello, hello)
/script 使用组件 !-- 准备好一个容器--
div idroothello/hellohrh1{{msg}}/h1hr!-- 第三步编写组件标签 --school/schoolhr!-- 第三步编写组件标签 --student/student
/div
2.2.2 组件的注意事项
关于组件名
一个单词组成 第一种写法首字母小写school第二种写法首字母大写School 多个单词组成 第一种写法kebab-case 命名my-school第二种写法CamelCase 命名MySchool需要Vue脚手架支持 备注 组件名尽可能回避HTML中已有的元素名称例如h2、H2都不行可以使用 name 配置项指定组件在开发者工具中呈现的名字
关于组件标签
第一种写法school/school第二种写法school/需要Vue脚手架支持备注不使用脚手架时会导致后续组件不能渲染 一个简写方式const school Vue.extend(options)可简写为 const school options因为父组件 components 引入的时候会自动创建 div idrooth2{{msg}}/h2school/school/divscript typetext/javascriptVue.config.productionTip false//定义组件const school Vue.extend({name: atguigu, // 组件给自己起个名字用于在浏览器开发工具上显示template: divh3学校名称{{name}}/h3 h3学校地址{{address}}/h3 /div,data() {return {name: dselegent,address: 长沙}}})new Vue({el: #root,data: {msg: 欢迎学习Vue!},components: {school}})
/script
2.2.3. 组件的嵌套 div idroot/divscript typetext/javascriptVue.config.productionTip false//定义student组件const student Vue.extend({name: student,template: divh4学生姓名{{name}}/h4 h4学生年龄{{age}}/h4 /div,data() {return {name: 尚硅谷,age: 18}}})//定义school组件const school Vue.extend({name: school,template: divh3学校名称{{name}}/h3 h3学校地址{{address}}/h3 student/student/div,data() {return {name: 尚硅谷,address: 北京}},//注册组件局部components: { student }})//定义hello组件const hello Vue.extend({template: h3{{msg}}/h3,data() {return {msg: 欢迎来到尚硅谷学习}}})//定义app组件const app Vue.extend({template: div hello/helloschool/school/div,components: { school, hello }})//创建vmnew Vue({el: #root,template: app/app,//注册组件局部components: { app }})
/script 2.2.4. VueComponent
关于 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
div idrootschool/schoolhello/hello
/divscript 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
Vue 在哪管理 VueComponent 2.2.5. 一个重要的内置关系 例:main.js中Vue.prototype.Axios Axios; 组件xxx.vue中this.Axios({}); 2.3. 单文件组件
单文件组件就是将一个组件的代码写在 .vue 这种格式的文件中webpack 会将 .vue 文件解析成 html,css,js这些形式。
来做个单文件组件的案例
School.vue
templatediv classdemoh2学校名称{{name}}/h2h2学校地址{{address}}/h2button clickshowName点我提示学校名/button /div
/templatescriptexport default {name:School,data(){return {name:尚硅谷,address:北京昌平}},methods: {showName(){alert(this.name)}},}//上面是下面的精简版const school Vue.extend({name:School,data(){return {name:尚硅谷,address:北京昌平}},methods: {showName(){alert(this.name)}},})export default school;
/scriptstyle.demo{background-color: orange;}
/style
Student.vue
templatedivh2学生姓名{{name}}/h2h2学生年龄{{age}}/h2/div
/templatescriptexport default {name:Student,data(){return {name:张三,age:18}}}
/script
App.vue
用来汇总所有的组件(大总管)
templatedivSchool/SchoolStudent/Student/div
/templatescript//引入组件import School from ./School.vueimport Student from ./Student.vueexport default {name:App,components:{School,Student}}
/script
main.js
在这个文件里面创建 vue 实例
import App from ./App.vuenew Vue({el:#root,template:App/App,//因为这里没有多个标签App就是根标签components:{App},
})
index.html
在这写 vue 要绑定的容器
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title练习一下单文件组件的语法/title/headbody!-- 准备一个容器 --div idroot/divscript typetext/javascript src../js/vue.js/scriptscript typetext/javascript src./main.js/script/body
/html
