有机玻璃制品 东莞网站建设,Wordpress+精确时间分钟,...课程网站建设简介,wordpress更新文章同步微信文章目录 1.Vue组件化1.1 什么是组件1.2 组件的使用1.3 组件的名字1.4 嵌套组件 2.单文件组件2.1 vue 组件组成结构2.1.1 template - 组件的模板结构2.1.2 组件的 script 节点2.1.3 组件的 style 节点 2.2 Vue组件的使用步骤2.2.1 组件之间的父子关系2.2.2 使用组件的三个步… 文章目录 1.Vue组件化1.1 什么是组件1.2 组件的使用1.3 组件的名字1.4 嵌套组件 2.单文件组件2.1 vue 组件组成结构2.1.1 template - 组件的模板结构2.1.2 组件的 script 节点2.1.3 组件的 style 节点 2.2 Vue组件的使用步骤2.2.1 组件之间的父子关系2.2.2 使用组件的三个步骤2.2.3 通过components注册的是私有组件2.2.4 注册全局组件 3.vue-cli(脚手架)3.1 什么是vue-cli3.2 安装vue-cli3.3 使用vue-cli创建项目3.4 脚手架的结构3.4.1 项目的总体结构3.4.2 src目录结构 3.5 分析脚手架初始程序3.6 解释 main.js 中的 render 函数3.7 props 配置3.8 项目运行流程 1.Vue组件化
1.1 什么是组件
1 传统方式开发的应用 一个网页通常包括三部分结构HTML、样式CSS、交互JavaScript ①传统应用存在的问题 a.关系纵横交织复杂牵一发动全身不利于维护 b.代码虽然复用但复用率不高。 2组件化方式开发的应用 ①每一个组件都有独立的js独立的css这些独立的js和css只供当前组件使用不存在纵横交错。更加便于维护。 ②代码复用性增强。组件不仅让js、css复用了HTML代码片段也复用了因为要使用组件直接引入组件即可。 3什么是组件 ①模块一个大的js文件按照模块化拆分规则进行拆分生成多个js文件每一个js文件叫做模块。凡是采用模块方式开发的应用都可以称为模块化应用。 ②组件实现应用中局部功能的代码和资源的集合。凡是采用组件方式开发的应用都可以称为组件化应用。 ③任何一个组件中都可以包含HTML、CSS、JS、图片、声音、视频等这些资源。从这个角度也可以说明组件是可以包括模块的。 4组件的划分粒度很重要粒度太粗会影响复用性。为了让复用性更强Vue的组件也支持父子组件嵌套使用。
1.2 组件的使用
1创建组件Vue.extend({ 该配置项和new Vue的配置项基本相同 })
创建组件对象也有简写形式Vue.extend()可以省略。直接写{}。在底层还是会调用的在注册组件的时候会调用Vue.extend配置项和new Vue的配置项区别主要有以下几点 a.创建Vue组件的时候配置项中不能使用el配置需要使用template配置项来配置模板语句 b.配置项中的data不能直接使用对象的形式必须使用function因为function可以保证data不是共享的这样在多个组件下不会出现问题
2注册组件 ①局部注册(使用components配置项) components : { 组件的名字 : 组件对象 } ②全局注册 Vue.component(‘组件的名字’ , 组件对象) 3使用组件
4实例
bodydiv idapp!-- 3.使用组件 --userlist/userlist/divscript// 1.创建组件const myComponent Vue.extend({template: ulli v-for(user,index) of users :keyuser.id{{index}},{{user.name}}/li/ul,data() {return {users: [{ id: 001, name: jack },{ id: 002, name: lucy },{ id: 003, name: james }]}}})// Vue实例new Vue({el: #app,// 2.注册组件components: {userlist: myComponent}})/script
/body1.3 组件的名字
1全部小写 2首字母大写后面都是小写 3kebab-case命名法例如user-login 4CamelCase命名法驼峰式命名法例如UserLogin但是这种方式只允许在脚手架环境中使用
1.4 嵌套组件
bodydiv idroot/divscript//创建Y1组件const y1 {template: divh3Y1组件/h3/div}//创建X1组件const x1 {template: divh3X1组件/h3/div}//创建Y组件const y {template: divh2Y组件/h2y1/y1/div,components: { y1 }}//创建X组件const x {template: divh2X组件/h2x1/x1/div,components: { x1 }}//创建app组件const app {template: divh1App组件/h1x/xy/y/div,//注册X,y组件components: { x, y }}//vmconst vm new Vue({el: #root,template: app/app,//注册app组件,名字相同可以简写为components: { app }components: { app,app }})/script
/body
2.单文件组件
1什么是单文件组件 ①一个文件对应一个组件不再使用一个html文件中定义了多个组件 (2) 单文件组件的名字通常是x.vue这是Vue框架规定的只有Vue框架能够认识浏览器无法直接打开运行。需要Vue框架进行编译将x.vue最终编译为浏览器能识别的html、js、css。 (3) 单文件组件的文件名命名规范和组件名的命名规范相同 ①全部小写userlist ②首字母大写后面全部小写Userlist ③kebab-case命名法user-list ④CamelCase命名法UserList我们使用这种方式和Vue开发者工具呼应。 4x.vue 文件的内容包括三块 (1) 结构templateHTML代码/template (2) 交互scriptJS 代码/script (3) 样式styleCSS 代码/style 其中每个组件中必须包含 template 模板结构而 script 行为和 style 样式是可选的组成部分。 (4) 使用export 导出暴露组件在需要使用组件的x.vue文件中使用import导入组件 ①默认导入和导出 export default {} import 任意名称 from‘模块标识符’ ②按需导入和导出 export {a, b} import {a, b} from ‘模块标识符’ ③分别导出 export var name ‘zhangsan’ export function sayHi(){}
2.1 vue 组件组成结构
2.1.1 template - 组件的模板结构
1组件的 template 节点 vue 规定每个组件对应的模板结构需要定义到 template 节点中。 注意template 是 vue 提供的容器标签只起到包裹性质的作用它不会被渲染为真正的 DOM 元素。 2在 template 中定义根节点 ①在 vue 2.x 的版本中template 节点内的 DOM 结构仅支持单个根节点
templatediv//该实例以div为根节点h1这是App组件1/h1h2这是App组件2/h2/div
/template②但是在 vue 3.x 的版本中template 中支持定义多个根节点
templateh1这是App组件1/h1h2这是App组件2/h2
/template2.1.2 组件的 script 节点
1vue 规定组件内的 script 节点是可选的开发者可以在 script 节点中封装组件的 JavaScript 业务逻辑。 script 节点的基本结构如下 1script 中的 name 节点 ①可以通过 name 节点为当前组件定义一个名称 ②在使用 vue-devtools 进行项目调试的时候自定义的组件名称可以清晰的区分每个组件。 2 script 中的 data 节点 ①vue 组件渲染期间需要用到的数据可以定义在 data 节点 ②vue 规定组件中的 data 必须是一个函数不能直接指向一个数据对象。
templatedivh1这是App组件1/h1h2这是App组件2---{{ username }}}/h2/div
/template
script
export default {//name属性指向的是当前组件的名称(建议每个单词的首字母大写)name: MyApp,data() {return {username: zhangsan,}},
}
/script3script 中的 methods 节点 组件中的事件处理函数必须定义到 methods 节点中示例代码如下
2.1.3 组件的 style 节点
(1)vue 规定组件内的 style 节点是可选的开发者可以在 style 节点中编写样式美化当前组件的 UI 结构。 script 节点的基本结构如下 (2)其中 style 标签上的 lang“css” 属性是可选的它表示所使用的样式语言。默认只支持普通的 css 语法可 选值还有 less、scss 等。 (3)如果希望使用 less 语法编写组件的 style 样式可以按照如下两个步骤进行配置 ① 运行 npm install less -D 命令安装依赖包从而提供 less 语法的编译支持 ② 在 style 标签上添加 lang“less” 属性即可使用 less 语法编写组件的样式 2.2 Vue组件的使用步骤
2.2.1 组件之间的父子关系
1组件在被封装好之后彼此之间是相互独立的不存在父子关系 2在使用组件的时候根据彼此的嵌套关系形成了父子关系、兄弟关系
2.2.2 使用组件的三个步骤 注意此处的代表src路径
2.2.3 通过components注册的是私有组件 2.2.4 注册全局组件
1在vue项目的main.js入口文件中通过Vue.component()方法可以注册全局组件。例如 2在其他组件中不需要注册就可以使用这个全局组件了 3.vue-cli(脚手架)
3.1 什么是vue-cli
1浏览器不认识.vue文件不认识ES6的模块化语法。需要安装Vue脚手架。Vue 的脚手架VueCLI:CommandLine Interface是 Vue 官方提供的标准化开发平台。它可以将我们.vue的代码进行编译生成html、 css、js代码并且可以将这些代码自动发布到它自带的服务器上为我们Vue的开发提供了一条龙服务。脚手架官网地址https://cli.vuejs.org/zh 2vue-cli 是 Vue.js 开发的标准工具。它简化了程序员基于 webpack 创建工程化的 Vue 项目的过程 3引用自 vue-cli 官网上的一句话 程序员可以专注在撰写应用上而不必花好几天去纠结 webpack 配置的问题。 中文官网https://cli.vuejs.org/zh/
3.2 安装vue-cli
1安装vue-cli之前需要确保 npm能用安装Node.js 2vue-cli 是 npm 上的一个全局包使用 npm install 命令即可方便的把它安装到自己的电脑上 随意打开一个cmd窗口输入npm install -g vue/cli 3输入vue -V即可验证是否成功
3.3 使用vue-cli创建项目
(1)找到需要创建的项目的目录 (2)在方框中输入cmd 3输入你要创建的项目名vue create 项目名 4以创建vue2为例 ①babel负责ES6 语法转换成ES5。 ②eslint负责语法检查的。 回车之后就开始创建项目创建脚手架环境内置了webpackloader自动生成HelloWorld案例 5启动项目dos窗口切换到根目录执行npm run serve
3.4 脚手架的结构 package.json包的说明书包的名字包的版本依赖哪些库。该文件里有webpack的短命令 1serve启动内置服务器 2build 命令是最后一次的编译生成html、css、js给后端人员 3lint 做语法检查的。
3.4.1 项目的总体结构 1node_modules:用来存放第三方依赖包 2public公共的静态资源目录 3src项目的源代码目录(程序员写的源代码都放在此目录下) 4.gitignore是Git的忽略文件 5index.html是SPA单页面应用程序中唯一的HTML页面 6package.json是项目的包管理配置文件
3.4.2 src目录结构 1assets目录用来存放项目中的静态资源文件(css、fonts等) 2components目录用来存放项目中的自定义组件 3App.vue是项目的根组件 4index.css是项目的全局样式表文件 5main.js是整个项目的打包入口文件
3.5 分析脚手架初始程序
1index.html
!DOCTYPE html
html langheadmeta charsetutf-8!-- 让IE浏览器启用最高标准IE8是不支持Vue的 --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!-- 当浏览器不支持JS语言的时候显示如下的提示信息 --noscriptstrongWere sorry but % htmlWebpackPlugin.options.title % doesnt work properly without JavaScript enabled. Please enable it to continue./strong/noscript!-- 容器 --div idapp/div!-- built files will be auto injected --/body
/html
在index.html 中只有一个容器。没有引入vue.js也没有引入main.js Vue 脚手架可以自动找到main.js文件。所以main.js文件名不要修改位置也不要随便移动 2将写好的vue拷贝过来并修改文件路径就好了 3在终端执行npm run serve如果报下面的错 是因为组件的名字应该由多单词组成。这是eslint进行的es语法检测。解决这个问题有两种方案 ①第一种把所有组件的名字修改一下。 ②第二种在vue.config.js 文件中进行脚手架的默认配置。配置如下
3.6 解释 main.js 中的 render 函数
1将render 函数更换为template 配置项你会发现它是报错的。说明引入的Vue无法进行模板编译。 2原因Vue脚手架默认引入的是精简版的Vue这个精简版的Vue缺失模板编译器。
// 等同于引入vue.js
import Vue from vue
// 导入App组件(根组件)
import App from ./App.vue
// 关闭生产提示信息
Vue.config.productionTip false
// 创建Vue实例
new Vue({// 如果去掉render改为使用template会报错// 您正在使用Vue的仅运行时版本其中模板编译器不可用// 怎么解决有两种方案1使用完整版的vue.js 2使用render函数// 为什么采用缺失模板编译器的vue.js?// 目的减小体积。vue.js包括两块vue的核心模板编译器(仅占vue.js总体积的1/3)// 将来程序员使用webpack打包后模板编译器就没有存在的必要了// render函数会被自动调用并且会传过来一个参数createElementcreateElement是一个函数render: h h(App), // 等同于render(createElement){ return creatElement(App) }
}).$mount(#app)
3实际引入的vue.js文件是dist/vue.runtime.esm.jsesm 版本是 ES6 模块化版本
3.7 props 配置
使用props配置可以接收其他组件传过来的数据让组件的data数据变为动态数据 1在被接收的组件中有三种接收方式 ①简单接收 props : [‘name’,’age’,’sex’] ②接收时添加类型限制
props : {name : Stringage : Numbersex : String
}③接收时添加类型限制必要性限制默认值
props : {name : {type : Number,required : true},age : {type : Number,default : 10},sex : {type : String,default : ‘男’}
}2其他组件怎么把数据传过来
User name”jack” age”20” sex”男”/User3注意事项 ①不要乱接收接收的一定是其它组件提供的。 ②props接收到的数据不能修改修改之后会报错但页面会刷新可以找个中间变量来解决
3.8 项目运行流程
在工程化的项目中vue 要做的事情很单纯通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。 其中 ① App.vue 用来编写待渲染的模板结构 ② index.html 中需要预留一个 el 区域 ③ main.js 把 App.vue 渲染到了 index.html 所预留的区域中 实例 1在 App.vue 中编写模板结构 清空 App.vue 的默认内容并书写如下的模板结构
templateh1这是App组件/h1
/template2在 index.html 中预留 el 区域
bodydiv idapp/divscript typemodule src/src/main.js/script
/body3在 main.js 中进行渲染
// 1.从vue中按需导入 creatApp函数
// creatApp函数的作用创建vue的“单页面应用程序实例”
import { createApp } from vue;
// 2.导入待渲染的APP组件
import App from ./App.vue;
import ./index.css;
// 3.调用createApp函数返回值是“单页面应用程序的实例”用常量spa_app进行接收
const spa_app createApp(App);
// 4.调用spa_app实例的mount方法用来指定vue实际要控制的区域
spa_app.mount(#app);
