怎么把网站放到服务器,池州网站建设电话,温州seo公司,wordpress收费下载插件目录
一、学习目标
1.自定义指令
2.插槽
3.综合案例#xff1a;商品列表
4.路由入门
二、自定义指令
1.指令介绍
2.自定义指令
3.自定义指令的语法
三、自定义指令-指令的值
1.需求
2.语法
3.代码示例
五、插槽-默认插槽
1.作用
2.需求
4.使用插槽的基本语法…目录
一、学习目标
1.自定义指令
2.插槽
3.综合案例商品列表
4.路由入门
二、自定义指令
1.指令介绍
2.自定义指令
3.自定义指令的语法
三、自定义指令-指令的值
1.需求
2.语法
3.代码示例
五、插槽-默认插槽
1.作用
2.需求
4.使用插槽的基本语法
5.代码示例
6.总结
六、插槽-后备内容默认值
1.问题
2.插槽的后备内容
3.语法
4.效果
5.代码示例
七、插槽-具名插槽
1.需求
2.具名插槽语法两步
3.v-slot的简写
4.总结
八、作用域插槽
1.插槽分类
2.作用
3.场景
4.使用步骤
5.代码示例
6.总结
十四、单页应用程序介绍
1.概念
2.具体示例
3.单页应用 VS 多页面应用
4.总结
十五、路由介绍
1.思考
2.路由的介绍
十六、路由的基本使用
1.目标
2.作用
3.说明
4.官网
5.VueRouter的使用52
6.代码示例
7.两个核心步骤
十七、组件的存放目录问题
1.组件分类
2.存放目录
十八、路由的封装抽离 一、学习目标
1.自定义指令 基本语法全局、局部注册 指令的值 v-loading的指令封装
2.插槽 默认插槽 具名插槽 作用域插槽
3.综合案例商品列表 MyTag组件封装 MyTable组件封装
4.路由入门 单页应用程序 路由 VueRouter的基本使用
二、自定义指令
1.指令介绍 内置指令v-html、v-if、v-bind、v-on... 这都是Vue给咱们内置的一些指令可以直接使用 自定义指令同时Vue也支持让开发者自己注册一些指令。这些指令被称为自定义指令 每个指令都有自己各自独立的功能
2.自定义指令
概念自己定义的指令可以封装一些对DOM的操作扩展额外的功能
3.自定义指令的语法 全局注册
//在main.js中
//inserted指的是当指令所绑定的元素被添加到页面中时会自动调用的钩子函数
Vue.directive(指令名, {inserted (el) { //形参el可以拿到指定所绑定的元素// 可以对 el 标签扩展额外功能el.focus()}
})
例子
main.js
import Vue from vue
import App from ./App.vueVue.config.productionTip false// 1. 全局注册指令
Vue.directive(focus, {inserted (el) {// console.log(el);el.focus()}
})new Vue({render: h h(App),
}).$mount(#app)Vue.app
templatedivh1自定义指令/h1input v-focus refinp typetext/div
/templatescript
export default {//ref的实现// mounted () {// this.$refs.inp.focus()// }
}
/scriptstyle/style
局部注册
//在Vue组件的directives配置项中然后以指令名:{}的形式注册很多的指令
directives: {指令名: {inserted (el) {el.focus()}}
}
案例
Vue.app
templatedivh1自定义指令/h1input v-focus refinp typetext/div
/templatescript
export default {// 2. 局部注册指令directives: {// 指令名指令的配置项focus: {inserted (el) {el.focus()}}}
}
/scriptstyle/style 在注册好指令后就可以在元素上使用指令 v-指令名。如input typetext v-focus/ 注册指令时不用加v-前缀但使用时一定要加v-前缀
三、自定义指令-指令的值
1.需求
实现一个 color 指令 - 传入不同的颜色, 给标签设置文字颜色
2.语法
1.在绑定指令时可以通过“等号”的形式为指令 绑定 具体的参数值
div v-colorcolor我是内容/div
2.通过 binding.value 可以拿到指令值指令值修改就会 触发 update 函数
directives: {color: {inserted (el, binding) { el.style.color binding.value //binding.value可以获取到指令的值},update (el, binding) {el.style.color binding.value}}
}
3.代码示例
App.vue
templatedivh1 v-colorcolor1指令的值1测试/h1h1 v-colorcolor2指令的值2测试/h1/div
/templatescript
export default {data () {return {color1: red,color2: orange}},directives: {color: {// 1. inserted 提供的是元素被添加到页面中时的逻辑inserted (el, binding) {// console.log(el, binding.value);// binding.value 就是指令的值el.style.color binding.value},// 2. update 指令的值修改的时候触发提供值变化后dom更新的逻辑update (el, binding) {console.log(指令的值修改了);el.style.color binding.value}}}
}
/scriptstyle/style
五、插槽-默认插槽
1.作用
让组件内部的一些 结构 支持 自定义也就是组件内定制一处结构 2.需求
在页面中显示一个对话框封装成一个组件
问题组件的内容部分不希望写死可以在使用的时候自定义。 4.使用插槽的基本语法 在组件内需要定制的部分用slot/slot占位 使用组件时, 在组件标签的内部提供内容MyDialog/MyDialog, 这个内容最终会替换slot标签 给插槽传入内容时可以传入纯文本、html标签、组件 5.代码示例
MyDialog.vue
templatediv classdialogdiv classdialog-headerh3友情提示/h3span classclose✖️/span/divdiv classdialog-content!-- 1. 在需要定制的位置使用slot占位 --slot/slot/divdiv classdialog-footerbutton取消/buttonbutton确认/button/div/div
/templatescript
export default {data () {return {}}
}
/scriptstyle scoped
* {margin: 0;padding: 0;
}
.dialog {width: 470px;height: 230px;padding: 0 25px;background-color: #ffffff;margin: 40px auto;border-radius: 5px;
}
.dialog-header {height: 70px;line-height: 70px;font-size: 20px;border-bottom: 1px solid #ccc;position: relative;
}
.dialog-header .close {position: absolute;right: 0px;top: 0px;cursor: pointer;
}
.dialog-content {height: 80px;font-size: 18px;padding: 15px 0;
}
.dialog-footer {display: flex;justify-content: flex-end;
}
.dialog-footer button {width: 65px;height: 35px;background-color: #ffffff;border: 1px solid #e1e3e9;cursor: pointer;outline: none;margin-left: 10px;border-radius: 3px;
}
.dialog-footer button:last-child {background-color: #007acc;color: #fff;
}
/styleApp.vue
templatediv!-- 2. 在使用组件时组件标签内填入内容 --MyDialogdiv你确认要删除么/div/MyDialogMyDialogp你确认要退出么/p/MyDialog/div
/templatescript
import MyDialog from ./components/MyDialog.vue
export default {data () {return {}},components: {MyDialog}
}
/scriptstyle
body {background-color: #b3b3b3;
}
/style
6.总结
场景组件内某一部分结构不确定想要自定义怎么办
使用插槽的步骤分为哪几步
六、插槽-后备内容默认值
1.问题
通过插槽完成了内容的定制传什么显示什么, 但是如果不传则是空白 能否给插槽设置 默认显示内容 呢
2.插槽的后备内容
封装组件时可以为预留的 slot 插槽提供后备内容默认内容。
3.语法
在 slot 标签内放置内容, 作为默认显示的内容 4.效果 外部使用组件时不传东西则slot会显示后备内容 外部使用组件时传东西了则slot整体会被换掉 5.代码示例
App.vue
templatedivMyDialog/MyDialogMyDialog你确认要退出么/MyDialog/div
/templatescript
import MyDialog from ./components/MyDialog.vue
export default {data () {return {}},components: {MyDialog}
}
/scriptstyle
body {background-color: #b3b3b3;
}
/style
MyDialog.vue
templatediv classdialogdiv classdialog-headerh3友情提示/h3span classclose✖️/span/divdiv classdialog-content!-- 往slot标签内部编写内容可以作为后备内容(默认值) --slot我是默认的文本内容/slot/divdiv classdialog-footerbutton取消/buttonbutton确认/button/div/div
/templatescript
export default {data () {return {}}
}
/scriptstyle scoped
* {margin: 0;padding: 0;
}
.dialog {width: 470px;height: 230px;padding: 0 25px;background-color: #ffffff;margin: 40px auto;border-radius: 5px;
}
.dialog-header {height: 70px;line-height: 70px;font-size: 20px;border-bottom: 1px solid #ccc;position: relative;
}
.dialog-header .close {position: absolute;right: 0px;top: 0px;cursor: pointer;
}
.dialog-content {height: 80px;font-size: 18px;padding: 15px 0;
}
.dialog-footer {display: flex;justify-content: flex-end;
}
.dialog-footer button {width: 65px;height: 35px;background-color: #ffffff;border: 1px solid #e1e3e9;cursor: pointer;outline: none;margin-left: 10px;border-radius: 3px;
}
.dialog-footer button:last-child {background-color: #007acc;color: #fff;
}
/style七、插槽-具名插槽
1.需求
一个组件内有多处结构需要外部传入标签进行定制也就是一个组件内有多处内容要定制 上面的弹框中有三处不同但是默认插槽只能定制一个位置这时候怎么办呢?
2.具名插槽语法两步 给多个slot标签使用name属性起名字用来区分插槽的名字此时插槽就是具名插槽 在组件标签中提供内容的时候用template标签配合v-slot:插槽名来给不同的插槽分发对应的内容 3.v-slot的简写
v-slot写起来太长vue给我们提供一个简单写法 v-slot — #
MyDialog.vue
templatediv classdialogdiv classdialog-header!-- 一旦插槽起了名字就是具名插槽只支持定向分发 --slot namehead/slot/divdiv classdialog-contentslot namecontent/slot/divdiv classdialog-footerslot namefooter/slot/div/div
/templatescript
export default {data () {return {}}
}
/scriptstyle scoped
* {margin: 0;padding: 0;
}
.dialog {width: 470px;height: 230px;padding: 0 25px;background-color: #ffffff;margin: 40px auto;border-radius: 5px;
}
.dialog-header {height: 70px;line-height: 70px;font-size: 20px;border-bottom: 1px solid #ccc;position: relative;
}
.dialog-header .close {position: absolute;right: 0px;top: 0px;cursor: pointer;
}
.dialog-content {height: 80px;font-size: 18px;padding: 15px 0;
}
.dialog-footer {display: flex;justify-content: flex-end;
}
.dialog-footer button {width: 65px;height: 35px;background-color: #ffffff;border: 1px solid #e1e3e9;cursor: pointer;outline: none;margin-left: 10px;border-radius: 3px;
}
.dialog-footer button:last-child {background-color: #007acc;color: #fff;
}
/styleApp.vue
templatedivMyDialog!-- 在组件标签中提供内容的时候用template标签配合v-slot:名字来分发对应内容 --template v-slot:headdiv我是大标题/div/templatetemplate v-slot:contentdiv我是内容/div/templatetemplate #footerbutton取消/buttonbutton确认/button/template/MyDialog/div
/templatescript
import MyDialog from ./components/MyDialog.vue
export default {data () {return {}},components: {MyDialog}
}
/scriptstyle
body {background-color: #b3b3b3;
}
/style
4.总结 组件内 有多处不确定的结构 怎么办? 具名插槽的语法是什么 v-slot:插槽名可以简化成什么?
八、作用域插槽
1.插槽分类 默认插槽 具名插槽 插槽只有两种作用域插槽不属于插槽的一种分类是插槽的一个传参语法
2.作用
定义slot 插槽的同时 以添加属性的方式 传值将来 在使用组件的组件 内可以接收到插槽传的数据
3.场景
封装表格组件 4.使用步骤 在 slot 标签中, 以 添加属性的方式 传值 slot :iditem.id msg测试文本/slot 内部自动将solt标签中所有添加的属性, 收集到一个对象中 { id: 3, msg: 测试文本 } 在使用组件的组件内在template中, 通过 #插槽名 obj 接收插槽传过来的对象第二步的对象默认的插槽名为 default MyTable :listlisttemplate #defaultobjbutton clickdel(obj.id)删除/button/template
/MyTable
5.代码示例
MyTable.vue
templatetable classmy-tabletheadtrth序号/thth姓名/thth年纪/thth操作/th/tr/theadtbodytr v-for(item, index) in data :keyitem.idtd{{ index 1 }}/tdtd{{ item.name }}/tdtd{{ item.age }}/tdtd!-- 1. 给slot标签以添加属性的方式 传值 --slot :rowitem msg测试文本/slot/td/tr/tbody/table
/templatescript
export default {props: {data: Array}
}
/scriptstyle scoped
.my-table {width: 450px;text-align: center;border: 1px solid #ccc;font-size: 24px;margin: 30px auto;
}
.my-table thead {background-color: #1f74ff;color: #fff;
}
.my-table thead th {font-weight: normal;
}
.my-table thead tr {line-height: 40px;
}
.my-table th,
.my-table td {border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;
}
.my-table td:last-child {border-right: none;
}
.my-table tr:last-child td {border-bottom: none;
}
.my-table button {width: 65px;height: 35px;font-size: 18px;border: 1px solid #ccc;outline: none;border-radius: 3px;cursor: pointer;background-color: #ffffff;margin-left: 5px;
}
/style
App.vue
templatedivMyTable :datalist!-- 3. 通过template #插槽名变量名 接收 --template #defaultobjbutton clickdel(obj.row.id)删除/button/template/MyTableMyTable :datalist2template #default{ row }button clickshow(row)查看/button/template/MyTable/div
/templatescript
import MyTable from ./components/MyTable.vue
export default {data () {return {list: [{ id: 1, name: 张小花, age: 18 },{ id: 2, name: 孙大明, age: 19 },{ id: 3, name: 刘德忠, age: 17 },],list2: [{ id: 1, name: 赵小云, age: 18 },{ id: 2, name: 刘蓓蓓, age: 19 },{ id: 3, name: 姜肖泰, age: 17 },]}},methods: {del (id) {this.list this.list.filter(item item.id ! id)},show (row) {// console.log(row);alert(姓名${row.name}; 年纪${row.age})}},components: {MyTable}
}
/script6.总结
1.作用域插槽的作用是什么
2.作用域插槽的使用步骤是什么
十四、单页应用程序介绍
1.概念
单页应用程序SPA【Single Page Application】是指所有的功能都在一个html页面上实现
2.具体示例
单页应用网站 网易云音乐 网易云音乐
多页应用网站京东 京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物
3.单页应用 VS 多页面应用 单页应用类网站系统类网站 / 内部网站 / 文档类网站 / 移动端站点
多页应用类网站公司官网 / 电商类网站
4.总结
1.什么是单页面应用程序?
2.单页面应用优缺点?
3.单页应用场景
十五、路由介绍
1.思考
单页面应用程序之所以开发效率高性能好用户体验好
最大的原因就是页面按需更新 比如当点击【发现音乐】和【关注】时只是更新下面部分内容对于头部是不更新的
要按需更新首先就需要明确访问路径和 组件的对应关系
访问路径 和 组件的对应关系如何确定呢 路由
2.路由的介绍
生活中的路由设备和ip的映射关系 Vue中的路由是访问路径 和 组件 的映射关系 十六、路由的基本使用
1.目标
认识 VueRouter插件掌握 VueRouter 的基本使用步骤
2.作用
修改地址栏路径时切换显示的组件
3.说明
Vue 官方的一个路由插件是一个第三方包
4.官网
Vue Router
5.VueRouter的使用52
固定的5个基本步骤不用死背熟能生巧
1.下载 VueRouter模块到当前工程中版本3.6.5vue2对应的路由版本是VueRouter3.x
yarn add vue-router3.6.5
2.在main.js中引入VueRouter模块
import VueRouter from vue-router
3.在main.js中安装注册VueRouter插件Vue相关的插件要使用时都需要按照注册
Vue.use(VueRouter)
4.在main.js中创建路由对象
const router new VueRouter()
5.在main.js中将路由对象注入到new Vue实例中建立关联
new Vue({render: h h(App),router:router
}).$mount(#app)当我们配置完以上5步之后 就可以看到浏览器地址栏中的路由 变成了 /#/的形式。表示项目的路由已经被Vue-Router管理了 6.代码示例
import Vue from vue
import App from ./App.vueimport VueRouter from vue-router
Vue.use(VueRouter)
const router new VueRouter()Vue.config.productionTip falsenew Vue({render: h h(App),router
}).$mount(#app)7.两个核心步骤
1.先创建需要的组件 (在views目录下)并在实例化VueRouter对象的时候配置其路由规则
在main.js中实例化VueRouter对象的同时传递一个带有routes属性的对象进去其中routes数组的每个对象就是一个路由规则path是地址栏路径component是对应的组件当访问某个path时匹配的就是对应的组件 2.配置导航链接还有配置路由出口router-view/router-view用来控制组件所展示的位置
App.vue divdiv classfooter_wrapa href#/find发现音乐/aa href#/my我的音乐/aa href#/friend朋友/a/divdiv classtop!-- 路由出口匹配的组件所展示的位置 --router-view/router-view/div/div
十七、组件的存放目录问题
注意 .vue文件 本质无区别
路由相关的组件为什么要放在views目录下呢
1.组件分类
.vue文件分为2类都是 .vue文件本质无区别 页面组件 配置路由规则时使用的组件 复用组件多个组件中都使用到的组件 2.存放目录
分类开来的目的就是为了 更易维护 src/views文件夹下放 页面组件 - 页面展示 - 配合路由用 src/components文件夹下放 复用组件 - 展示数据 - 常用于复用
十八、路由的封装抽离
将路由模块抽离出来。 好处拆分模块利于维护
将路由相关的代码抽取到src/router/index.js文件中然后在main.js中就只需要导入路由然后注入到Vue实例中即可 index.js
//导入组件
import Find from /views/Find
import My from /views/My
import Friend from /views/Friend.vue
//导入需要的模块
import Vue from vue
import VueRouter from vue-router
Vue.use(VueRouter) //VueRouter插件初始化//创建路由对象同时配置路由规则
const router new VueRouter({routes:[{path: /find, component: Find},{path: /my,component: My},{path: /friend,component: Friend}]
})//导出路由对象
export default router
main.js
import Vue from vue
import App from ./App.vue//导入路由对象
import router from ./router/indexVue.config.productionTip falsenew Vue({render: h h(App),router
}).$mount(#app)
