做网站设计怎么样,个人博客网站搭建,电商无货源怎么做,文山州住房建设网站目录
案例
一Vue基础
什么是Vue#xff1f;
补充#xff1a;mvvm框架
mvvm的组成
详解
Vue的使用方法 1.直接下载并引入
2.通过 CDN 使用 Vue
3.通过npm安装
4.使用Vue CLI创建项目
二插值表达式
什么是插值表达式#xff1f;
插值表达式的缺点
解决方法 …目录
案例
一Vue基础
什么是Vue
补充mvvm框架
mvvm的组成
详解
Vue的使用方法 1.直接下载并引入
2.通过 CDN 使用 Vue
3.通过npm安装
4.使用Vue CLI创建项目
二插值表达式
什么是插值表达式
插值表达式的缺点
解决方法
相关代码
三 属性绑定 简写方式 :属性名 属性名/变量名 绑定style
数组形式绑定class
对象形式绑定class
相关代码
四事件绑定 事件的修饰符 stop 阻止事件冒泡 prevent 阻止默认事件 once 只执行一次事件 self当event.target是当前绑定元素的时候触发 capture 事件捕获的时候触发 passive 触发滚动事件的默认行为
相关代码 按键修饰符
相关代码
五数据双向绑定
设置单选框的 v-model
设置复选框的 v-model
修饰符
number 修饰符
trim 修饰符
lazy 修饰符 相关代码
六常用指令
v-if和v-show
相关代码
v-for循环
注意
相关代码
其他内置指令
v-pre v-once
相关代码
七计算属性
注意
计算属性的优点
相关代码
八侦听器
什么场景下需要侦听器 书写方法 设置外部的侦听器
九生命周期
生命周期常用函数
相关代码
十自定义属性
十一组件
组件基础
注册组件
组件的命名
相关代码 外部组件配置
组件的属性 设置属性的具体类型设置属性的多样性 设置默认属性
设置必读属性
十二组件传值
父传子 完整代码
子传父
解析 相关代码
非父子传值
provide和inject
十三动态组件
十四插槽
注意
十五过渡动画
设置过渡的流程
过度动画的应用场景
相关代码 案例 VUE简单的表单操作 VUE留言板效果 VUE两种常见的tab切换实现方式 VUE简易购物车 VUE计划清单 一Vue基础
什么是Vue vue 是一个mvvm 框架Model-View-ViewModel是一个MVC 的前端版本 补充mvvm框架 mvvm的组成 ViewModel 是一个控制器的角色在他里面实现逻辑运算等这样就可以把Model层和View层 高度分离。 View视图用于封装和展示数据以及效果其实就是html结构。 Model数据模型用来封装数据以及数据运行的业务逻辑。 详解 MVVM的一个关键特征是数据绑定。在典型的MVVM框架中视图和模型之间通过ViewModel实现双向数据绑定。当模型的数据发生变化时ViewModel会负责更新视图反之亦然。这降低了手动管理DOM的复杂性提高了代码的可维护性。 一些流行的前端框架如Vue.js和Angular采用了MVVM的设计模式。这些框架通过提供响应式的数据绑定、组件化、以及其他功能简化了前端应用的开发流程。 举例来说使用Vue.js的MVVM框架的代码可能如下所示
templatedivh1{{ message }}/h1input v-modelmessage/div
/templatescript
export default {data() {return {message: Hello, MVVM!};}
};
/script在这个例子中{{ message }} 是Vue.js中的模板语法它会自动将message数据绑定到对应的DOM元素上。当用户在输入框中输入时数据会自动更新反之亦然。这种双向数据绑定的机制是MVVM框架的核心概念之一。
Vue的使用方法 使用vue的方法 1.通过script 引入vue文件 2.可以通过vue-cli 创建vue项目进行开发 1.直接下载并引入
script src./js/vue.global.js/script
script//解构出一个创建应用的方法const {createApp} Vue;//创建应用createApp({//设置数据data(){return{str:wbg加油}}}).mount(#app);/script
2.通过 CDN 使用 Vue 在HTML文件中通过script标签引入Vue.js的CDN链接如下所示 script srchttps://unpkg.com/vue3/dist/vue.global.js/script
3.通过npm安装 使用npmNode Package Manager可以将Vue.js安装为项目的依赖项。首先在项目目录下运行以下命令安装Vue.js
npm install vue 然后在JavaScript文件中通过import语句引入Vue
import Vue from vue;
4.使用Vue CLI创建项目 Vue CLI命令行界面是一个官方提供的工具用于快速搭建Vue项目。首先全局安装Vue CLI
npm install -g vue/cli 然后通过以下命令创建新项目
vue create my-vue-project 进入项目目录运行以下命令启动开发服务器
cd my-vue-project
npm run serve 在这种方式下Vue.js会被自动安装并作为项目的依赖项。
二插值表达式
什么是插值表达式 {{ }} :插值表达式在他的里面可以执行 vue的变量表达式,也可以执行函数插值表达式实际上是一个js的域在插值表达式中可以执行简单的js语句并且把执行结果返回到插值表达式所在的dom结构的位置上。 插值表达式的缺点 初次加载的时候文本闪烁 解决方法 解决方法 1.把vue文件引入到head中不建议使用 2.使用指令 v-cloak 来隐藏数据没有加载完成的dom结构这样可以解决页面开始时候的闪烁问题 该指令的运行方式是首先隐藏没有编译成功的dom结构等到dom编译成功之后会自动把隐藏的方式去掉 相关代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title插值表达式/titlestyle*{margin: 0;padding: 0;}/* //使用属性选择器绑定v-cloak 属性的内容 */[v-cloak]{display: none;}/style
/head
bodydiv idappp v-cloak{{ str }}/p p v-cloak{{ 11 }}/pp v-cloak{{ 34?wbg:vue}}/pp v-textstr/pdiv v-htmlstr1/divp{{obj.name演唱obj.song}}/p/div
/body
/html
script src./js/vue.global.js/script
script
const {createApp}Vue;
let app createApp({/*data函数中存放当前页面中所有的数据如果需要声明数据必须声明在data中data是一个方法发的返回值是一个对象data必须有返回值否则报错*/data(){return{str:伤不起香水有毒,str1:h2老鼠爱大米/h2,obj:{name:伍佰,song:挪威的森林,}}}
})app.mount(#app)
/script
三 属性绑定 在vue中{{}}插值表达式不能直接绑定属性的值 可以使用 v-bind来绑定属性 语法是 v-bind:属性名 属性值/变量名 简写方式 :属性名 属性名/变量名
body!-- 属性绑定在vue中{{}}插值表达式不能直接绑定属性的值可以使用 v-bind来绑定属性语法是v-bind:属性名 属性值/变量名简写方式:属性名 属性名/变量名--div idappa v-bind:hrefhttp://jd.com微博/aa v-bind:hrefurl微博/aa :hrefurl微博简写/a/div
/body
/html
script src./js/vue.global.js/script
script
const { createApp } Vue;
createApp({data(){return{url:https://www.sina.com.cn}}
}).mount(#app)
/script 绑定style
!-- 绑定style --h2 :style{ color:#04be02,fontSize:30px }{{ str }}/h2div :stylestyle/divdiv :stylefont-size:20px;color:#f00;多行不义必自毙/divdiv :style[ {color:#04be02},{ fontSize:30px } ]多行不义必自毙/divdiv classabc柳宗元/divdiv :classabc aa曾巩/div
数组形式绑定class
div :class[ abc,aa ]韩愈/div
对象形式绑定class 使用对象形式绑定class属性名为class名属性的值是一个boolean值如果布尔值为true则绑定该class名否则不绑定 div :class{abc:34,aa:34}苏轼/div
相关代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title绑定style和class/titlestyle* {margin:0;padding:0;}.abc {width:200px;height: 200px;background:#f60;margin:30px auto;}.aa {background:#f0f;}/style
/head
bodydiv idapp!-- 绑定style --h2 :style{ color:#04be02,fontSize:30px }{{ str }}/h2div :stylestyle/divdiv :stylefont-size:20px;color:#f00;多行不义必自毙/divdiv :style[ {color:#04be02},{ fontSize:30px } ]多行不义必自毙/divdiv classabc柳宗元/divdiv :classabc aa曾巩/div!-- 使用 数组形式绑定class --div :class[ abc,aa ]韩愈/div!-- 使用对象形式绑定class属性名为class名属性的值是一个boolean值如果布尔值为true则绑定该class名否则不绑定 --div :class{abc:34,aa:34}苏轼/div!-- 总结style和class的绑定都支持 数组形式和对象形式 --div :class34?className:欧阳修/divdiv :class34className欧阳封/div/div
/body
/html
script typemodule
import { createApp } from ./js/vue.esm-browser.js;createApp({data(){return {str:从此君王不早朝,style:{height:200px,width:200px,background:#04be02},className:abc}}
}).mount(#app);
/script
四事件绑定 绑定事件 v-on:事件名 表达式/方法名 方法名的参数问他如果没有参数可以不用加 事件绑定指令的简写 时间名表达式/方法名 button v-on:clicknum点击/buttonbutton v-on:clickshow(天涯何处有房产)点击显示/buttonbutton clickshow(天涯何处没有草)点击显示/buttonbutton click()show(天涯何处没有草)点击显示/buttonhrbutton clicknum点击显示或者隐藏元素/buttondiv classwp :style{display:num%20?block:none}/div/div
/body
/html
script typemodule
import {createApp} from ./js/vue.esm-browser.js;createApp({data() {return {num:100}}//methods中存放了组件所有的方法方法只能存储在 methods中,methods: {show(str){alert(东边日出西边雨str)}},
}).mount(#app) 事件的修饰符 vue提供了事件的修饰符用来提高开发效率 事件名.修饰符.修饰符.修饰符...触发方式 stop 阻止事件冒泡 prevent 阻止默认事件 once 只执行一次事件 self当event.target是当前绑定元素的时候触发 capture 事件捕获的时候触发 passive 触发滚动事件的默认行为 相关代码 bodydiv idappp{{num}}/pbutton clickadd点击添加/buttondiv classwp clickshowInfodiv classcont click.stop.onceshowMsg contextmenu.preventshowMsg /div/div/div/body
/html
script typemoduleimport {createApp} from ./js/vue.esm-browser.js;createApp({data() {return {num:100}},methods: {add(){//在vue实例中获取data中的数据,直接this.num},showInfo(){console.log(外层触发);},showMsg(){console.log(内层触发);}} }).mount(#app)/script 按键修饰符 按键修饰符当按下或者抬起对应对应修饰符的按键时触发事件 .enter .tab .delete (捕获“Delete”和“Backspace”两个按键) .esc .space .up .down .left .right .ctrl .alt .shift .meta .exact 非系统键 相关代码
bodydiv idappinput typetext value keyup.entershow brtextarea cols30 rows10 keyup.upshow/textarea!-- 非系统键 --input typetext value keyup.exactshow/div/body
/htmlscript typemodule/*按键修饰符当按下或者抬起对应对应修饰符的按键时触发事件.enter.tab.delete (捕获“Delete”和“Backspace”两个按键).esc.space.up.down.left.right.ctrl.alt.shift.meta.exact 非系统键*/import {createApp} from ./js/vue.esm-browser.js;createApp({data() {return {} },methods: {show(e){console.log(e.target.value);}},}).mount(#app)
五数据双向绑定 在表单元素中使用v-model 实现数据的双向绑定 双向绑定简言之就是数据在视图层的更改会立即体现在model层反之在model层的改变也会立即体现在视图层。 设置单选框的 v-model
!-- 设置单选框的 v-model --label性别/labellabelinput typeradio namesex v-modelsex value男男/labellabelinput typeradio namesex v-modelsex value女女/labelbutton clickshowSex点击显示选择的性别/buttonbrscript typemoduleimport {createApp} from ./js/vue.esm-browser.js;createApp({data() {return {val:货卖堆山,val2:男要俏一身皂,sex:男,hero:[张居正,海瑞,王阳明,朱熹],num:100,str:玩物丧志}},methods: {show(){alert(this.val2)},showSex(){alert(this.sex)},showHero(){console.log(this.hero);},showNum(){console.log(this.num);}},
}).mount(#app)
/script
设置复选框的 v-model
label for英雄/labellabel forinput typecheckbox v-modelhero value张居正张居正/labellabel forinput typecheckbox v-modelhero value海瑞海瑞/labellabel forinput typecheckbox v-modelhero value王阳明王阳明/labellabel forinput typecheckbox v-modelhero value朱熹朱熹/labellabel forinput typecheckbox v-modelhero value张载张载/labellabel forinput typecheckbox v-modelhero value程颐程颐/labelbrbutton clickshowHero选中的值/buttonscript typemoduleimport {createApp} from ./js/vue.esm-browser.js;createApp({data() {return {val:货卖堆山,val2:男要俏一身皂,sex:男,hero:[张居正,海瑞,王阳明,朱熹],num:100,str:玩物丧志}},methods: {show(){alert(this.val2)},showSex(){alert(this.sex)},showHero(){console.log(this.hero);},showNum(){console.log(this.num);}},
}).mount(#app)
/script
修饰符 number 修饰符 把输入框中的内容转化为数字 trim 修饰符 去掉输入内容左右两变的空格 lazy 修饰符 把input事件改为change事件 (可以优化性能) input typenumber v-model.numbernump{{num}}/pbutton clickshowNum点击显示数字/buttonhrinput typetext v-model.lazystrp styleborder: 1px #f00 solid;{{str}}/p 相关代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title数据双向绑定/title
/head
bodydiv idappinput typetext :valueval inputevale.target.valuep{{val}}/p!-- 在表单元素中使用v-model 实现数据的双向绑定双向绑定简言之就是数据在视图层的更改会立即体现在model层反之在model层的改变也会立即体现在视图层--input typetext v-modelval2p{{val2}}/pbutton clickshow点击显示/buttonhr!-- 设置单选框的 v-model --label性别/labellabelinput typeradio namesex v-modelsex value男男/labellabelinput typeradio namesex v-modelsex value女女/labelbutton clickshowSex点击显示选择的性别/buttonbr!-- 设置复选框的 v-model设置复选框的 v-model的值是一个数组该数组存储复选框选中的内容--label for英雄/labellabel forinput typecheckbox v-modelhero value张居正张居正/labellabel forinput typecheckbox v-modelhero value海瑞海瑞/labellabel forinput typecheckbox v-modelhero value王阳明王阳明/labellabel forinput typecheckbox v-modelhero value朱熹朱熹/labellabel forinput typecheckbox v-modelhero value张载张载/labellabel forinput typecheckbox v-modelhero value程颐程颐/labelbrbutton clickshowHero选中的值/buttonhr!-- 修饰符number 修饰符把输入框中的内容转化为数字trim 修饰符去掉输入内容左右两变的空格lazy 修饰符把input事件改为change事件 (可以优化性能)--input typenumber v-model.numbernump{{num}}/pbutton clickshowNum点击显示数字/buttonhrinput typetext v-model.lazystrp styleborder: 1px #f00 solid;{{str}}/p/div
/body
/html
script typemoduleimport {createApp} from ./js/vue.esm-browser.js;createApp({data() {return {val:货卖堆山,val2:男要俏一身皂,sex:男,hero:[张居正,海瑞,王阳明,朱熹],num:100,str:玩物丧志}},methods: {show(){alert(this.val2)},showSex(){alert(this.sex)},showHero(){console.log(this.hero);},showNum(){console.log(this.num);}},
}).mount(#app)
/script
六常用指令
v-if和v-show v-show 指令如果他的值是true则他所绑定的元素显示否则他绑定的元素会自动添加一个display:none 无隐藏v-show改变的是css样式属于元素重绘 v-if 指令如果他的值是true则他所绑定的元素从dom树中对应的位置渲染如果为false他所绑定的元素会在dom书中删除 v-if 改变的是dom树的结构属于元素重排 v-else-if 需要结合 v-if使用用法同js的if- else-if 相关代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlev-if和v-show/titlestyle*{margin: 0;padding: 0;}.wp{width: 200px;height: 200px;background: #04be02;}/style
/head
bodydiv idappdiv classwp v-showbolshow/divdiv classwp v-ifbolif/divbutton clickshow点击显示或者隐藏/buttonhrdiv v-ifnum%20晚上吃啥{{num}}/divdiv v-else-ifnum%30螺蛳粉{{num}}/divdiv v-else麻辣烫{{num}}/divbutton clicknum点击/buttonulli v-for(item,index) in arr{{itemindex}}button clickarr.splice(index,1)删除/button/li/ulbutton clickadd添加数组/button/div
/body
/html
script typemoduleimport {createApp} from ./js/vue.esm-browser.js;createApp({data() {return {bol:true,num:1,arr:[晚上吃啥,螺蛳粉,麻辣烫]}},methods: {show(){this.bol !this.bol},add(){this.num1;this.arr.push(老母鸡汤this.num)}},
}).mount(#app)
/script
v-for循环 v-for 结合 template 标签组件循环数据 template 标签 不会被渲染到页面上一般用来实现数据绑定的功能 注意 v-for 语法v-for形参 in 数组/对象 如果需要 下标或者对象的属性 v-for(形参下标形参/属性名形参) in 数组/对象 使用 v-for 的标签元素都需要绑定一个key属性属性的值一般都是要循环对象中的唯一值列如id 使用key属性的目的是 使已经渲染过的列表内容不再从新渲染 提高列表的渲染效率注意 index 虽然可以设置key的值但是由于index的值 会发生变化这样会导致 列表从新渲染 因此慎用 相关代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlev-for/title
/head
bodydiv idappulli v-for(item,index) in arr :keyindex clickshowAlert(item.name)span{{index}}-{{item.name}}:{{item.nickname}}/span/li/ulhrul v-foraa in arrli{{aa.name}}:{{aa.nickname}}/li/ulp v-for(item,key) in obj{{key}}:{{item}}/phr!-- v-for 结合 template 标签组件循环数据template 标签 不会被渲染到页面上一般用来实现数据绑定的功能--template v-foritem in arr :keyitem.namep{{item.name}}/p/templatehr!-- 循环数字一般是整数每一个整体是一个循环的项 --p v-forn in 10{{n}}/p!-- 循环字符串 --p v-fort in set{{t}}/p/div
/body
/html
script typemoduleimport {createApp} from ./js/vue.esm-browser.jscreateApp({data() {return {arr:[{name:吕布,nickname:奉先},{name:马岱,nickname:丁玲},{name:马超,nickname:孟起},{name:文鸳,nickname:文鸳},],obj:{name:孙尚香,age:20,job:射手},str:念天地之悠悠独怆然而涕下}},methods: {showAlert(str){alert(str)}},}).mount(#app)
/script
其他内置指令
v-pre 他所绑定的元素不进行vue的编译原样输出 v-once 他所绑定的元素只渲染一次忽略之后所有的更新 相关代码
bodydiv idapp!-- v-pre 他所绑定的元素不进行vue的编译原样输出 --p{{str}}/p!-- v-once 他所绑定的元素只渲染一次忽略之后所有的更新 --p v-once{{num}}/pbutton clicknum点击/buttonhr!-- div v-for(item,index) in arr v-memoarr{{item}}/divbutton clickchange点击改变数据/button --!-- 实现组件内容的缓存如果他的值不发生改变那么他绑定的元素内部不会各跟据数据的改变而重新渲染 --div v-memoarrh1{{str}}/h1/divbutton clickchange1点击改变数据/button/div
/body
/html
script typemodule import {createApp} from ./js/vue.esm-browser.jscreateApp({data() {return {str:诸葛亮,num:100,arr:[诸葛亮,诸葛瑾]}},methods: {change(){this.arr.push(诸葛均)},change1(){this.arr.push(诸葛均)this.str 司马光}},}).mount(#app)
/script
七计算属性 如果在插值表达式中直接渲染数据非常方便但是如果有比较复杂的逻辑运算{{}}的渲染效率就会受到影响并且不利于后期维护因此可以把比较复杂的运算逻辑放到计算属性中。 注意 每个计算属性实际上都包含 get和set两个方法默认是get方法 在计算属性的get方法中不要异步请求数据ajax或者操作dom 给计算属性设置值的时候执行的是set方法 从计算属性获取值的时候执行的是 get方法 计算属性的优点 1.数据没有发生变化的时候优先读取缓存在computed中经过逻辑运算操作的数据把数据渲染在dom树中并且不用考虑 methods和watch中数据的变化 2.计算属性值会基于其响应式依赖被缓存 3.他有get方法和set方法可以进行灵活设置 get在获取的时候被触发如果没有set则默认是get set在数据设置的时候被触发 相关代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title计算属性/title
/head
bodydiv idapph2{{num}}/h2p{{str.split().reverse().join()}}/pp{{changeStr}}/ptemplate v-foritem in arrp v-ifitem%20{{item}}/p/templatep v-foritem in numArr{{item}}/ph1{{aa}}/h1button clicksetVal(零陵上将邢道荣)点击设置/button/div
/body
/html
script typemoduleimport { createApp } from ./js/vue.esm-browser.js;let app createApp({data() {return {num:100,str:相见时难别亦难东风无力百花残,arr:[1,2,3,4,5,6,7,8,9],txt:尔今死去}},methods: {setVal(str){//设置计算属性的值this.aa str;}},//设置计算属性computed:{changeStr(){return this.str.split().reverse().join()},numArr(){return this.arr.filter(item{return item%2 0;})} , aa:{get(){return this.txt -林黛玉},set(val){console.log(val);this.txt val;}} , }})app.mount(#app)
/script
八侦听器
什么场景下需要侦听器 如果需要数据的变化来执行操作可以使用数据侦听器 书写方法 书写侦听器的方法 方法名就是侦听器侦听data数据中数据的属性名该方法具有两个参数 第一个参数是 数据当前的值新值 第二个参数是 数据变化之前的值老值 //数据侦听watch:{num(newVal,oldVal){let r this.rand(0,255);let g this.rand(0,255);let b this.rand(0,255);console.log(newVal,oldVal);if (newVal%100) {this.col rgb(${r},${g},${b})}},val(newVal,oldVal){console.log(newVal,oldVal);},//设置侦听器的深度监听obj:{//设置监听的回调方法handler(newVal,oldVal){console.log(newVal,oldVal);},//设置深度监听deep:true,//设置加载立即监听immediate:true},//监听对象中某一个属性的变化//可通过此方法直接监听路由对象的变化obj.name:{//设置监听的回调方法handler(newVal,oldVal){console.log(监听名字的变化);console.log(newVal,oldVal);},}} 设置外部的侦听器 app.$watch(name,(newVal,oldVal){console.log(newVal,oldVal);})
九生命周期
生命周期常用函数 Mounted() 注册一个回调函数在组件挂载完成后执行。 Updated() 注册一个回调函数在组件因为响应式状态变更而更新其 DOM 树之后调用 Unmounted() 注册一个回调函数在组件实例被卸载之后调用。 beforeCreate 在组件实例初始化完成之后立即调用。 created() 在组件实例处理完所有与状态相关的选项后调用。 BeforeMount() 注册一个钩子在组件被挂载之前被调用 BeforeUpdate() 注册一个钩子在组件即将因为响应式状态变更而更新其 DOM 树之前调用。 BeforeUnmount()注册一个钩子在组件实例被卸载之前调用。 相关代码
bodydiv idapph1 idabc{{num}}/h1button clicknum点击/buttonul idlistli v-for(item,index) in arr :keyindex{{item}}/li/ulbutton clickadd点击添加高端学府/buttonbutton clickdie销毁组件实例/button/div
/body
/html
script typemodule
import {createApp} from ./js/vue.esm-browser.js;
let appcreateApp({data(){return{str:中午吃啥,num:100,arr:[郑州大学,西亚斯学院,郑州科技学院]}},//在组件实例初始化完成之后立即调用。此刻其他的属性和方法均没有执行或者编译beforeCreate(){console.log(this.str);},
/*
在组件实例处理完所有与状态相关的选项后调用。当这个钩子被调用时以下内容已经设置完成响应式数据、计算属性、方法和侦听器。然而此时挂载阶段还未开始因此 $el 属性仍不可用。此时不能操作dom
*/
created(){console.log(created,this.str);let abcdocument.querySelector(#abc);console.log(abc);this.num100;
},
/*
vue的组件模板如果在实例中设置的有组件的模板则会替换掉挂载的dom元素
模板的第一层需要是一个完整的dom元素(vue2版本)
*/
// template:
// h3{{num}}/h3
// h2{{str}}/h2
// /*
在组件被挂载之前调用。此刻还没有挂载任何模板因此还无法操作dom
*/
beforeMount(){console.log(beforeMount);
},
/*
组件被挂之后调用。此时所有的模板内容都已经被挂载可以操作组件中所有的dom
常用此钩子函数来进行加载立即执行的操作
*/
mounted(){console.log(mounted);this.show()
},
methods:{show(){let abcdocument.querySelector(#abc);console.log(abc);abc.style.border1px #f00 solid ;},add(){this.arr.push(河南建筑职业技术学院);},die(){//销毁vue实例// this.$destroy();//解绑/卸载vue实例console.log(app);app.unmount();}
},/*
beforeUpdate 钩子 数据更新前触发显示的数据是更新后的数据
但是如果改变了dom结构那么改函数中的dom结构是更新前的内容
*/
beforeUpdate(){let listdocument.querySelector(#list);console.log(beforeUpdate,this.num,list.innerHTML);
},
/*
Update 钩子 数据更新后触发显示的数据是更新后的数据
但是如果改变了dom结构那么该函数中的dom结构是更新后的内容
*/
updated(){console.log(updated,this.num,list.innerHTML);
},/*
在一个组件实例被卸载之前调用。
*/
beforeUnmount(){console.log(beforeUnmount);
},
/*
在一个组件实例被卸载之后调用。
*/
unmounted(){log(unmounted);
},
});
//挂载
app.mount(#app);
/script
十自定义属性
bodydiv idappdiv v-aa#f0f classwp/divdiv v-abccol classwpbutton clickcol#000点击更新/button/div/div
/body
/html
script typemoduleimport {createApp} from ./js/vue.esm-browser.jscreateApp({data() {return {col:#0ff}},methods: {},//自定义指令directives:{/*aa是指令名参数el表示的是自定义指令绑定的元素binding 是一个对象 包含是属性是value 传递给指令的值。oldValue 指令绑定的数据或者元素内部发生改变的值仅在beforeUpdate 和 updated中有值*/aa(el,binding){console.log(el,binding);el.onmouseenter(){el.style.background #f00}el.onmouseleave(){el.style.background binding.value}},//配置指令abc:{created(el,binding) {console.log(created,el,binding);},mounted(el,binding) {el.onmouseenter(){el.style.background #f00}el.onmouseleave(){el.style.background binding.value}},updated(el,binding) {console.log(更新了,binding.oldValue);el.onmouseleave(){el.style.background binding.value}},}}}).mount(#app)
十一组件
组件基础 组件将来项目开发的时候使用的都是组件组件具有极高的复用性 注册组件 外部注册组件的关键字是 component 在实例内部注册组件。属性名为 components app.component(组件名组件的配置) 组件的命名 1.命名不能和原生html冲突 2.可以使用驼峰使用驼峰的时候在视图模版中书写驼峰的大写字母可以变为 - 列如abcd 使用的时候写 ab-cd/ 3.推荐使用w3c的命名规则 aa-bb 相关代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title组件基础/titlestyle*{margin: 0;padding: 0;}/style
/head
bodydiv idapph1{{name}}/h1abc/abcmy-show/my-showmy-run/my-run/div
/body
/html
template idrunh1辛弃疾/h1h2柳永/h2 h2{{name}}/h2
/template
script typemoduleimport {createApp} from ./js/vue.esm-browser.jslet app createApp({data() {return {name:袁世凯}},//实例的内部注册组件components:{myShow:{template:p classabc最喜小儿无赖/p,data(){return {nme:孙终末}}},//w3c 推荐my-run:{template:#run,data() {return {name:原神启动}},}}})//外部注册app.component(abc,{template:h1相顾无言惟有泪千行/h1h1相顾无言惟有泪千行/h1h1相顾无言惟有泪千行/h1h1相顾无言惟有泪千行/h1})app.mount(#app)
/script 外部组件配置
bodydiv idappabc/abcabc/abc/div
/body
/html
template idabch1郑州科技学院-郑科公园/h1h1我在郑科很想你{{num}}/h1button clickadd点击/button/template
script typemodule
import { createApp } from ./js/vue.esm-browser.js;
let abc {template:#abc,data(){return {num:100,}},methods: {add(){this.num;},mounted(){this.add();},components:{aa:{template:h4组件内部的/h4}}
},
}createApp({data() {return {};},components:{abc:abc}
}).mount(#app);
/script
组件的属性 给组件设置属性,属性名设置在一个数组中简写 props:[abc,aa,obj] 设置属性的具体类型设置属性的多样性
props:{abc:{//设置属性abc的值必须是一个字符串type:String}, 设置默认属性
obj:{type:Object,//设置默认值对象类型的默认值是一个函数返回一个默认对象default(){return {name:燕青,age:20}
}
},
设置必读属性
aa:{type:String,//设置为必写属性required:true,//设置属性的默认值当属性没有值的时候默认显示的内容default:中午吃啥子}
十二组件传值
父传子 组件中通过 this.获取所有携带属性的子组件实例refs是一个集合 this.$refs.aa 就可以 获取 refaa 的 组件实例 methods:{change(){//获取组件实例console.log(this.$refs.son);//执行组件实例中的方法this.$refs.son.add();this.$refs.wp.innerHTMLthis.$refs.son.num;}} 完整代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleref/titlestyle*{margin: 0;padding: 0;}.wp{width: 200px;height: 200px;background: #04be02;}/style
/head
bodydiv idappshow refson/showbutton clickchange点击/buttondiv classwp refwp/div/div
/body
/html
template idshowh2{{num}}/h2
/template
script typemoduleimport { createApp } from ./js/vue.esm-browser.js;/*组件中通过this.$refs 获取所有携带ref属性的子组件实例this.$refs 是一个集合this.$refs.aa 就可以获取 refaa 的组件实例*/let show {data() {return {num:1,}},template:#show,methods: {add(){this.num;}},}createApp({data() {return { }},components:{show:show},methods:{change(){//获取组件实例console.log(this.$refs.son);//执行组件实例中的方法this.$refs.son.add()this.$refs.wp.innerHTML this.$refs.son.num;}}}).mount(#app)/script
子传父
解析 使用 $emit() 触发自定义事件并且可以传递参数 子组件中的操作 this.$emit(event-name,args参数) 然后把 event-name 绑定到子组件上 son event-name父组件的接收方法/son 过程: 子组件中 执行 this.$emit() ,触发了 绑定在子组件上的 event-name然后执行父组件的接收方法 父组件的接收方法接收一个默认的参数参数的值是 子组件中 this.$emit传递的参数这样通过参数的形式 把数据从子组件传递到父组件 $parent 获取当前组件的父组件如果没有父组件则返回null $root 获取当前组件的根组件如果当前组件没有父组件则返回当前组件 $emit 在当前组件触发一个自定义事件。任何额外的参数都会传递给事件监听器的回调函数。 this.$emit(abc,this.msg); }, 相关代码
bodydiv idapph1{{info}}/h1button click点击/buttonson abcchangeInfo/son/div
/body
/html
template idsondiv classwph1{{msg}}/h1button clickpass点击传递给父组件/buttonbutton clickgetFu点击获取父组件/button/div
/template
script typemodule
import {createApp} from ./js/vue.esm-browser.js;let son{data(){return{msg:道不轻传}},template:#son,methods:{pass(){// $emit 在当前组件触发一个自定义事件。任何额外的参数都会传递给事件监听器的回调函数。this.$emit(abc,this.msg);},//通过获取父组件的实例传递数据getFu(){// this.$parent.changeInfo(this.msg);this.$root.changeInfo(this.msg);}}
};
createApp({data(){return{info:稻香}},components:{son},methods:{changeInfo(data){console.log(触发方法,data);this.infodata;}}
}).mount(#app);
/script非父子传值
bodydiv idapph1摇滚不死/h1son1/son1son2/son2/div
/body
/html
template idson1
div classson1h2子组件1/h2h4{{msg}}/h4button clickpass点击传递给子组件2/button
/div
/templatetemplate idson2
div classson2h2子组件2/h2h4{{info}}/h4
/div
/template
!-- 引入 mitt 插件 的js --
script srchttps://unpkg.com/mitt/dist/mitt.umd.js/script
script typemodule
import { createApp } from ./js/vue.esm-browser.js;
//引入mitt实例
let bus mitt();console.log( bus );//声明两个组件
let son1 {template:#son1,data(){return {msg:假行僧}},methods: {pass(){//执行 mitt 实例中的 emit() 方法来触发自定义事件 并且 传递参数bus.emit(abc, this.msg);}},
};
let son2 {template:#son2,data(){return {info:一块红布}},mounted() {//执行 mitt 实例中的 on() 方法来监听 自定义事件是否被触发如果被触发则执行回调函数//回调函数默认传入一个参数该参数的值即为 通过 emit 触发事件传递的数据bus.on(abc,data{this.info data;});},
};createApp({data(){return {}},components:{son1:son1,son2:son2}
}).mount(#app);
/script
provide和inject
/head
bodydiv idapph1{{str}}/h1zi //div
/body
/html
template idzi
div classwph1子组件/h1p{{msg}}/psun/sun
/div
/templatetemplate idsundiv classwph1孙组件/h1p{{msg}}/p/div
/template
script typemoduleimport { createApp } from ./js/vue.esm-browser.js; let sun {template:#sun,//通过inject 直接接收 provide 传递的数据inject:[msg]}let zi {template:#zi,components:{sun},inject:[msg]};createApp({data() {return {str:却惹六千烦恼丝}},//配置直接传入后代的值// provide:{// msg:却惹三千烦恼丝,// },//如果直接获取 data 中的数据作为传递到后代组件的数据则使用函数的形式返回数据provide(){return{msg:this.str}},components:{zi}}).mount(#app)
/script
十三动态组件 动态组件 使用标签 component 该组件具有一个 is 属性is 属性的值 是 要渲染组件的名字即为is属性的值是哪一个组件名components标签就会渲染哪一个组件 缺点 component 可以动态渲染组件的内容但是每一次切换都会重新渲染组件内容降低渲染效率 使用 keep-alive 标签(组件),可以缓存曾经渲染过的组件从而提高渲染 bodydiv idappdiv classwpspan :classnum1on clicknum1水浒传/spanspan :classnum2on clicknum2红楼梦/spanspan :classnum3on clicknum3西游记/spanspan :classnum4on clicknum4三国演义/span/div!-- comp1 v-ifnum1/comp1comp2 v-ifnum2/comp2comp3 v-ifnum3/comp3comp4 v-ifnum4/comp4 --!-- 动态组件 使用标签 component 该组件具有一个is属性is属性的值 是 要渲染组件的名字即为is属性的值是哪一个组件名component 标签就会渲染哪一个组件缺点component 可以动态渲染组件的内容但是每一个切换都会重新渲染组件内容降低渲染效率使用keep-alive 标签(组件)可以缓存曾经渲染过的组件从而提高渲染效率--keep-alivecomponent :iscompnum/component/keep-alive/div
/body
/html
script typemoduleimport { createApp } from ./js/vue.esm-browser.js; let comp1{template:h1水浒传/h1}let comp2{template:h1红楼梦/h1}let comp3{template:h1西游记/h1p{{n}}/pbutton click n点击/button,data() {return {n:100,}},}let comp4{template:h1三国演义/h1}let aa {template:h1金瓶梅/h1}createApp({data() {return {num:1,}},components:{comp1,comp2,comp3,comp4,aa}}).mount(#app)
/script
十四插槽 插槽 指的是 写入自定义组件中包括的内容一般都是html结构或者自定义组件 插槽的出口在自定义内部设置一个slot标签表示插槽的出口将来插槽的内容会渲染在slot标签所在的位置 如果需要不同的 插槽内容渲染在 组件中不同的位置那么就需要使用具名插槽。具名插槽的名字设置当是是 1.在插槽的内部部分设置v-slot 插槽名 来包裹需要渲染在具体位置的html内容结构 2.在自定义组件中设置slot 在对应的位置并且slot 的name 属性值是 插槽名 注意 v-slot:插槽名 可以简写成 #插槽名 使用指令 v-slot 绑定的插槽名字可以是一个变量 v-slot:[变量名] #[变量名] bodydiv idappson1h2一夫当关鸡犬升天/h2p我爱云和/p/son1son2template v-slot:headerh3 slotheader一人得道鸡犬升天/h3/templatep芶使郑州/pp鸡你太美/pp鸡你太美/pp鸡你/ptemplate #footerh3风吹草低见牛羊/h3/templatehrson3template #[dog]h3一人得道鸡犬升天/h3/templatebutton lickdogfooter点击修改插槽的值/button/son3/son2/div
/body
/html
template idson1slot/sloth1一眼碗面/h1/templatetemplate idson2slot/sloth1方便面/h1slot/slotslot namefooter/slot
/templatetemplate idson3
slot namefooterh1中午吃啥/h1
/slot
/templatescript typemoduleimport { createApp } from ./js/vue.esm-browser.js; let son1 {template:#son1
}let son2{template:#son2
}let son3{template:#son3
}createApp({data() {return {dog:header}},components:{son1,son2,son3}}).mount(#app)
/script
十五过渡动画
设置过渡的流程 1把需要使用过渡的动画的元素使用 transition 组件包裹起来 2.给transition 组件设置一个name属性 3.给name属性的值设置过渡动画 4.控制元素或者组件的显示或者隐 过度动画的应用场景 1.结合 v-if 使用 2.结合 v-show 使用 3.结合 路由切换 使用 transition-group 组件常用来操作一系列数据他具有一个tag属性可以把当前的transition-group组件 渲染为tag属性设置的html标签 相关代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title过度动画/titlestyle*{margin: 0;padding: 0;}.wp{width: 200px;height: 200px;background: pink;}.aa-enter-active,.aa-leave-active {transition: opacity 1s ease;}.aa-enter-from,.aa-leave-to {opacity: 0;}.list-enter-active,
.list-leave-active {transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {opacity: 0;transform: translateX(30px);
}/style
/head
bodydiv idapptransition nameaadiv classwp v-showbol/div/transition button clickbol!bol点击/buttonhr!-- 设置动画组--transition-group namelist tagulli v-for(n,index) in arr :keyindex{{n}}/li/transition-groupbutton clickarr.push(前端开发)点击添加/button/div
/body
/html
script typemodule/*设置过渡的流程1把需要使用过渡的动画的元素使用 transition 组件包裹起来2.给transition 组件设置一个name属性3.给name属性的值设置过渡动画4.控制元素或者组件的显示或者隐藏transition-group 组件常用来操作一系列数据他具有一个tag属性可以把当前的transition-group组件渲染为tag属性设置的html标签过度动画的应用场景1.结合 v-if 使用2.结合 v-show 使用3.结合 路由切换 使用*/
import { createApp } from ./js/vue.esm-browser.js;
createApp({data() {return {bol:true,arr:[java,c,ui设计,php]}},
}).mount(#app)/script
