南昌企业网站建设,wordpress 大门户,顺德建设行政主管部门网站,途牛旅游网站建设背景v 创建一个vue实例插值表达式{{}}vue响应式特性vue指令v-if vs. v-show 指令v-else-if 指令v-on指令 注册监听内联语句methods中的函数名v-on 调用传参 v-bind 动态的设置html… v 创建一个vue实例插值表达式{{}}vue响应式特性vue指令v-if vs. v-show 指令v-else-if 指令v-on指令 注册监听内联语句methods中的函数名v-on 调用传参 v-bind 动态的设置html标签v-for指令 基于数据循环v-for中的keyv-model 表单绑定 指令修饰符v-bind对于样式控制的增强v-model应用于其他表单元素计算属性computed 计算属性 VS methods方法计算属性的完整写法watch 监听器watch完整写法VUE的生命周期和生命周期的四个阶段created应用新闻迭代输入框获取焦点 工程化开发脚手架vue CLI组件化开发根组件 局部注册全局注册组件组件样式冲突scopeddata是一个函数组件通信父传子用props方式子传父 prop校验类型校验 非父子通信-事件总线非父子通宵扩展-provide-injectv-model原理表单类组件封装v-model简化代码sync修饰符ref和refs获取dom和组件vue异步更新 nextTickVue 自定义指令-基础语法自定义指令-封装v-loading插槽-默认插槽插槽-后备内容具名插槽作用域插槽组件标签封装-my-tag单页应用路由路由的使用组件存放路由封装抽离 创建一个vue实例 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleVue 实例/title!-- 引入 Vue.js --script srchttps://cdn.jsdelivr.net/npm/vue2.6.14/dist/vue.js/script
/head
body!--创建vue容器初始化渲染1.准备容器2.引包vue的js包 3.创建实例4.添加配置项 完成渲染--div idapp!--这将来会编写一些用于渲染的代码逻辑--{{msg}}/div!-- 创建实例 --script//引入了vuejs的核心包在全局环境下就有了vue构造函数const app new Vue(//通过el配置选择器指定了vue管理的是那个盒子//#app就指定管理了上面app的那个盒子{el:#app,//通过data提供数据进行渲染data:{msg:hello vue}})/script
/body
/html
插值表达式{{}}
插值是用来展示渲染的
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleVue 实例/title!-- 引入 Vue.js --script srchttps://cdn.jsdelivr.net/npm/vue2.6.14/dist/vue.js/script
/head
body!--创建vue容器初始化渲染1.准备容器2.引包vue的js包 3.创建实例4.添加配置项 完成渲染--div idapp!--这将来会编写一些用于渲染的代码逻辑--{{msg.toUpperCase()}}{{msg.toUpperCase()你好啊}}h1{{msg}}/h1/div!-- 创建实例 --script//引入了vuejs的核心包在全局环境下就有了vue构造函数const app new Vue(//通过el配置选择器指定了vue管理的是那个盒子//#app就指定管理了上面app的那个盒子{el:#app,//通过data提供数据进行渲染data:{msg:hello word}})/script
/body
/html
vue响应式特性 //引入了vuejs的核心包在全局环境下就有了vue构造函数const app new Vue(//通过el配置选择器指定了vue管理的是那个盒子//#app就指定管理了上面app的那个盒子{el:#app,//通过data提供数据进行渲染data:{//响应式数据》数据变化后视图会自动更新msg:你好响应式}//data中的数据是会被添加到实例上。//1.实例.属性名//2.实例.属性名新值})一旦数据变化数据也会变化。
vue指令 具体指令查看https://cn.vuejs.org/api/built-in-directives.html#built-in-directives 例如v-html这个指令。 v-html 的内容直接作为普通 HTML 插入
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleVue 实例/title!-- 引入 Vue.js --script srchttps://cdn.jsdelivr.net/npm/vue2.6.14/dist/vue.js/script
/head
body!--创建vue容器初始化渲染1.准备容器2.引包vue的js包 3.创建实例4.添加配置项 完成渲染--div idappdiv v-htmlmsg/div/div!-- 创建实例 --script//引入了vuejs的核心包在全局环境下就有了vue构造函数const app new Vue(//通过el配置选择器指定了vue管理的是那个盒子//#app就指定管理了上面app的那个盒子{el:#app,//通过data提供数据进行渲染data:{//响应式数据》数据变化后视图会自动更新msg:a hrefhttp://ww.baidu.com百度/a}//data中的数据是会被添加到实例上。//1.实例.属性名//2.实例.属性名新值})/script
/body
/html
v-if vs. v-show 指令 v-if 是“真实的”按条件渲染因为它确保了在切换时条件区块内的事件监听器和子组件都会被销毁与重建。 v-if 也是惰性的如果在初次渲染时条件值为 false则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。 相比之下v-show 简单许多元素无论初始条件如何始终会被渲染只有 CSS display 属性会被切换。 总的来说v-if 有更高的切换开销而 v-show 有更高的初始渲染开销。因此如果需要频繁切换则使用 v-show 较好如果在运行时绑定条件很少改变则 v-if 会更合适。 show是通过css来控制隐藏if是通过判断条件控制元素的创建和移除 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleVue 实例/title!-- 引入 Vue.js --script srchttps://cdn.jsdelivr.net/npm/vue2.6.14/dist/vue.js/script
/head
bodydiv idapph1 v-showmsgHello!/h1h1 v-ifmsgv-if/h1/div!-- 创建实例 --scriptconst app new Vue({el:#app,data:{msg: true}})/script
/body
/html
v-else-if 指令 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleVue 实例/title!-- 引入 Vue.js --script srchttps://cdn.jsdelivr.net/npm/vue2.6.14/dist/vue.js/script
/head
bodydiv idappp v-ifgender1男/pp v-else女/phrp v-ifscore90A/pp v-else-ifscore70B/pp v-elseC/p/div!-- 创建实例 --scriptconst app new Vue({el:#app,data:{gender: 2,score:80}})/script
/body
/html
v-on指令 注册监听 内联语句
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleVue 实例/title!-- 引入 Vue.js --script srchttps://cdn.jsdelivr.net/npm/vue2.6.14/dist/vue.js/script
/head
bodydiv idappbutton v-on:clickcount---/buttonspan{{count}}/span!-- 给号注册点击事件 --button v-on:clickcount/button/div!-- 创建实例 --scriptconst app new Vue({el:#app,data:{count:100}})/script
/body
/html
或者用click注册 button clickcount/buttonmethods中的函数名
methods中用来提供方法。 实现隐藏方法
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleVue 实例/title!-- 引入 Vue.js --script srchttps://cdn.jsdelivr.net/npm/vue2.6.14/dist/vue.js/script
/head
bodydiv idappbutton clickfun显示隐藏/buttonh1 v-showisshow测试/h1/div!-- 创建实例 --scriptconst app new Vue({el:#app,data:{isshow:true},methods:{fun(){app.isshow!app.isshow; }}})/script
/body
/html
v-on 调用传参 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleVue 实例/title!-- 引入 Vue.js --script srchttps://cdn.jsdelivr.net/npm/vue2.6.14/dist/vue.js/script
/head
bodydiv idappbutton clickfun(5)减5 /buttonbutton clickfun(10)减10 /buttonp当前数值{{number}}/p/div!-- 创建实例 --scriptconst app new Vue({el:#app,data:{number: 100},methods:{fun(number){this.number-number;}}})/script
/body
/html
v-bind 动态的设置html标签 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleVue 实例/title!-- 引入 Vue.js --script srchttps://cdn.jsdelivr.net/npm/vue2.6.14/dist/vue.js/script
/head
bodydiv idappimg v-bind:srcimgUrl/div!-- 创建实例 --scriptconst app new Vue({el:#app,data:{imgUrl: ./omg/10.png }})/script
/body
/html
简写
div idappimg :srcimgUrl
/divv-for指令 基于数据循环 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleVue 实例/title!-- 引入 Vue.js --script srchttps://cdn.jsdelivr.net/npm/vue2.6.14/dist/vue.js/script
/head
bodydiv idappulli v-for(item,index) in list{{item}} - {{index}}/li/ul/div!-- 创建实例 --scriptconst app new Vue({el:#app,data:{list: [1,2,3]}})/script
/body
/html
v-for中的key v-model 表单绑定 数据变化视图自动你更新 视图变化数据自动更新 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleVue 实例/title!-- 引入 Vue.js --script srchttps://cdn.jsdelivr.net/npm/vue2.6.14/dist/vue.js/script
/head
bodydiv idapp账户input v-modelusernamebr密码input v-modelpasswordbrbutton clicklogin登陆/button/div!-- 创建实例 --scriptconst app new Vue({el:#app,data:{username:,password:},methods:{login(){console.log(this.username,this.password)}}})/script
/body
/html
指令修饰符 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleVue 实例/title!-- 引入 Vue.js --script srchttps://cdn.jsdelivr.net/npm/vue2.6.14/dist/vue.js/script
/head
bodydiv idapp!-- 绑定键盘回车事件 --input keyup.enterfn v-modelusername typetext/div!-- 创建实例 --scriptconst app new Vue({el:#app,data:{username:},methods:{fn(){console.log(this.username)}}})/script
/body
/html
v-bind对于样式控制的增强 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleVue 实例/title!-- 引入 Vue.js --script srchttps://cdn.jsdelivr.net/npm/vue2.6.14/dist/vue.js/scriptstyle.active{color: red;}/style
/headbodydiv idappulli v-for(item,index) in list :keyitem.id clickactiveIndex index//通过{active: index activeIndex}实现动态控制a :class{active: index activeIndex} href#{{item.name}}/a/li/ul/div!-- 创建实例 --scriptconst app new Vue({el:#app,data:{activeIndex:0,//记录高亮list:[{id:1,name:京东秒杀},{id:2,name:每日特价},{id:3,name:品类秒杀},]}})/script
/body
/html
STYLE单独控制某个属性变化
v-model应用于其他表单元素 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyletextarea {display: block;width: 240px;height: 100px;margin: 10px 0;}/style
/head
bodydiv idapph3小黑学习网/h3姓名input typetext v-modelusername brbr是否单身input typecheckbox v-modelisSingle brbr!-- 前置理解1. name: 给单选框加上 name 属性 可以分组 → 同一组互相会互斥2. value: 给单选框加上 value 属性用于提交给后台的数据结合 Vue 使用 → v-model--性别: input v-modelgender typeradio namegender value1男input v-modelgender typeradio namegender value2女brbr!-- 前置理解1. option 需要设置 value 值提交给后台2. select 的 value 值关联了选中的 option 的 value 值结合 Vue 使用 → v-model--所在城市:select v-modelcityIdoption value101北京/optionoption value102上海/optionoption value103成都/optionoption value104南京/option/selectbrbr自我描述textarea v-modeldesc/textarea button立即注册/button/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {username: ,isSingle: false,gender: 2,cityId: 102,desc: }})/script
/body
/html计算属性 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyletable {border: 1px solid #000;text-align: center;width: 240px;}th,td {border: 1px solid #000;}h3 {position: relative;}/style
/head
bodydiv idapph3小黑的礼物清单/h3tabletrth名字/thth数量/th/trtr v-for(item, index) in list :keyitem.idtd{{ item.name }}/tdtd{{ item.num }}个/td/tr/table!-- 目标统计求和求得礼物总数 --p礼物总数{{ totalCount }} 个/p/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {// 现有的数据list: [{ id: 1, name: 篮球, num: 1 },{ id: 2, name: 玩具, num: 2 },{ id: 3, name: 铅笔, num: 5 },]},computed: {totalCount () {// 基于现有的数据编写求值逻辑// 计算属性函数内部可以直接通过 this 访问到 app 实例// console.log(this.list)// 需求对 this.list 数组里面的 num 进行求和 → reducelet total this.list.reduce((sum, item) sum item.num, 0)return total}}})/script
/body
/htmlcomputed 计算属性 VS methods方法
计算属性是有缓存的一旦算出来结果就会立刻缓存 下一次读取》直接读缓存就行》性能特别高 计算属性的完整写法 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srchttps://cdn.jsdelivr.net/npm/vue2.6.14/dist/vue.js/script
/head
bodydiv idapp姓input typetextbr名input typetextbrp姓名{{ fullName }}/pbutton修改姓名/button/divscriptconst app new Vue({el: #app,data: {firsName:刘,lastName:备,},computed: {fullName: {get() {return this.firstName this.lastName;}}
},methods: {changeName(){}}})/script
/body
/htmlwatch 监听器
作用监视数据变化执行一些逻辑或异步操作
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle* {margin: 0;padding: 0;box-sizing: border-box;font-size: 18px;}#app {padding: 10px 20px;}.query {margin: 10px 0;}.box {display: flex;}textarea {width: 300px;height: 160px;font-size: 18px;border: 1px solid #dedede;outline: none;resize: none;padding: 10px;}textarea:hover {border: 1px solid #1589f5;}.transbox {width: 300px;height: 160px;background-color: #f0f0f0;padding: 10px;border: none;}.tip-box {width: 300px;height: 25px;line-height: 25px;display: flex;}.tip-box span {flex: 1;text-align: center;}.query span {font-size: 18px;}.input-wrap {position: relative;}.input-wrap span {position: absolute;right: 15px;bottom: 15px;font-size: 12px;}.input-wrap i {font-size: 20px;font-style: normal;}/stylescript srchttps://cdn.jsdelivr.net/npm/vue2.6.14/dist/vue.js/script/headbodydiv idapp!-- 条件选择框 --div classqueryspan翻译成的语言/spanselectoption valueitaly意大利/optionoption valueenglish英语/optionoption valuegerman德语/option/select/div!-- 翻译框 --div classboxdiv classinput-wraptextarea v-modelobj.words/textareaspani⌨️/i文档翻译/span/divdiv classoutput-wrapdiv classtransboxmela/div/div/div/divscript// 接口地址https://applet-base-api-t.itheima.net/api/translate// 请求方式get// 请求参数// 1words需要被翻译的文本必传// 2lang 需要被翻译成的语言可选默认值-意大利// -----------------------------------------------const app new Vue({el: #app,data: {words: ,},// 具体讲解(1) watch语法 (2) 具体业务实现watch:{//该方法会在数据变化的时候执行obj.words(newValue,oldValue){console.log(变化了,newValue,oldValue)}}})/script/body
/html
watch完整写法 VUE的生命周期和生命周期的四个阶段 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodydiv idapph3{{ title }}/h3divbutton clickcount---/buttonspan{{ count }}/spanbutton clickcount/button/div/divscript src./vue.js/scriptscriptconst app new Vue({el: #app,data: {count: 100,title: 计数器},//1.创建阶段beforeCreate(){console.log(响应数据准备好之前)},created(){console.log(响应数据准备好之后)},//2.挂载阶段beforeMount(){console.log(模板渲染之前)},mounted(){console.log(模板渲染之后)},//3.更新阶段修改数据》更新视图beforeUpdatre(){console.log(数据修改了视图还没有更新);},updated(){console.log(update数据修改视图已经更新了)},//4.卸载阶段beforeDestroy(){console.log(卸载前)},destroyed(){console.log(卸载后)}})/script
/body/htmlcreated应用新闻迭代
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;list-style: none;}.news {display: flex;height: 120px;width: 600px;margin: 0 auto;padding: 20px 0;cursor: pointer;}.news .left {flex: 1;display: flex;flex-direction: column;justify-content: space-between;padding-right: 10px;}.news .left .title {font-size: 20px;}.news .left .info {color: #999999;}.news .left .info span {margin-right: 20px;}.news .right {width: 160px;height: 120px;}.news .right img {width: 100%;height: 100%;object-fit: cover;}/style
/head
bodydiv idappulli v-for(item,index) in list :keyitem.id classnewsdiv classleftdiv classtitle{{item.title}}/divdiv classinfospan{{item.source}}/spanspan{{item.time}}/span/div/divdiv classrightimg :srcitem.img alt/div/li/ul/divscript src./vue.js/scriptscript src./axios.js/scriptscript// 接口地址http://hmajax.itheima.net/api/news// 请求方式getconst app new Vue({el: #app,data: {list:[]},async created(){//进入页面立即发送请求const res await axios.get(http://hmajax.itheima.net/api/news);console.log(res)//将数据更新到data中的listthis.listres.data.data}})/script
/body
/html输入框获取焦点 !DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title示例-获取焦点/title!-- 初始化样式 --link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/reset.css2.0.2/reset.min.css!-- 核心样式 --stylehtml,body {height: 100%;}.search-container {position: absolute;top: 30%;left: 50%;transform: translate(-50%, -50%);text-align: center;}.search-container .search-box {display: flex;}.search-container img {margin-bottom: 30px;}.search-container .search-box input {width: 512px;height: 16px;padding: 12px 16px;font-size: 16px;margin: 0;vertical-align: top;outline: 0;box-shadow: none;border-radius: 10px 0 0 10px;border: 2px solid #c4c7ce;background: #fff;color: #222;overflow: hidden;box-sizing: content-box;-webkit-tap-highlight-color: transparent;}.search-container .search-box button {cursor: pointer;width: 112px;height: 44px;line-height: 41px;line-height: 42px;background-color: #ad2a27;border-radius: 0 10px 10px 0;font-size: 17px;box-shadow: none;font-weight: 400;border: 0;outline: 0;letter-spacing: normal;color: white;}body {background: no-repeat center /cover;background-color: #edf0f5;}/style
/headbody
div classcontainer idappdiv classsearch-containerimg srchttps://www.itheima.com/images/logo.png altdiv classsearch-boxinput typetext v-modelwords idinpbutton搜索一下/button/div/div
/divscript src./vue.js/script
scriptconst app new Vue({el: #app,data: {words: },//等输入框渲染完成输入框获取焦点mounted(){document.querySelector(#inp).focus()}})
/script/body/html工程化开发脚手架vue CLI 组件化开发根组件 局部注册 新建components局部文件夹在里面编写局部组件 编写一个头部局部组件
templatediv classhm-header我是header/div
/templatescript
export default {}
/scriptstyle.hm-header{height: 100px;line-height: 100px;text-align:center;font-size: 30px;}
/style然后引入局部组件使用
templatediv classApp!-- 头部组件 --HmHeader/HmHeader!-- 主体组件 --!-- 底部组件 --/div
/templatescript
import HmHeader from ./components/HmHeader.vue;
export default {// 使用变量components:{// 组件名组件对象HmHeader:HmHeader}
}
/scriptstyle.App{width: 600px;height: 700px;background-color: aqua;margin:0 auto;padding:1 ;}
/style全局注册组件 在main.JS进行全局注册
// 导入全局组件
import HmButton from ./components/HmButton.vue;
Vue.config.productionTip false
// 进行全局注册
Vue.component(HmButton,HmButton)直接引入
templatediv classhm-header我是headerHmButton/HmButton/div/template组件样式冲突scoped 默认的style样式会作用到全局如果不想影响全局加上scoped属性这样只会作用于当前组件。
data是一个函数 组件通信 父传子用props方式
templatediv classapp styleborder: 3px solid #000; margin: 10px我是APP组件!-- 1.给组件标签添加属性方式 赋值 --Son :titlemyTitle/Son/div
/templatescript
import Son from ./components/Son.vue
export default {name: App,components: {Son,},data() {return {myTitle: 学前端就来黑马程序员,}},
}
/scriptstyle
/styletemplatediv classson styleborder:3px solid #000;margin:10px!-- 3.直接使用props的值 --我是Son组件 /div
/templatescript
export default {name: Son-Child,// 2.通过props来接受props:[title]}
/scriptstyle/style子传父 templatediv classapp styleborder: 3px solid #000; margin: 10px我是APP组件!-- 1.给组件标签添加属性方式 赋值 --Son :titlemyTitle changeTitlehandleChange/Son/div
/templatescript
import Son from ./components/Son.vue
export default {name: App,components: {Son,},data() {return {myTitle: 学前端就来黑马程序员,}},methods:{//3.提供处理函数handleChange(newTitle){console.log(newTitle)}}
}
/scriptstyle
/styletemplatediv classson styleborder:3px solid #000;margin:10px!-- 3.直接使用props的值 --我是Son组件 /div
/templatescript
export default {name: Son-Child,// 2.通过props来接受props:[title],methods:{changeFn(){//1.通过$emit像父组件传递消息this.$emit(changeTitle,船只教育)}}}
/scriptstyle/styleprop校验 templatediv classbase-progressdiv classinner :style{ width: w % }span{{ w }}%/span/div/div
/templatescript
export default {props: {//设置校验类型w:Number}// 1.基础写法类型校验// 2.完整写法类型、是否必填、默认值、自定义校验
}
/scriptstyle scoped
.base-progress {height: 26px;width: 400px;border-radius: 15px;background-color: #272425;border: 3px solid #272425;box-sizing: border-box;margin-bottom: 30px;
}
.inner {position: relative;background: #379bff;border-radius: 15px;height: 25px;box-sizing: border-box;left: -3px;top: -2px;
}
.inner span {position: absolute;right: 0;top: 26px;
}
/styletemplatediv classappBaseProgress :wwidth/BaseProgress/div
/templatescript
import BaseProgress from ./components/BaseProgress.vue
export default {data() {return {width: 30,}},components: {BaseProgress,},
}
/scriptstyle
/style类型校验 非父子通信-事件总线 创建一个空的总线
A组件监听事件 B组件监听事件
非父子通宵扩展-provide-inject v-model原理 表单类组件封装v-model简化代码 sync修饰符 ref和refs获取dom和组件 templatediv classappdiv classbase-chart-box这是一个捣乱的盒子/divBaseChart/BaseChart/div
/templatescript
import BaseChart from ./components/BaseChart.vue
export default {components:{BaseChart}
}
/scriptstyle
.base-chart-box {width: 300px;height: 200px;
}
/styletemplatediv refmychart classbase-chart-box子组件/div
/templatescript
import * as echarts from echartsexport default {mounted() {// 基于准备好的dom初始化echarts实例// document.querySelector 会查找项目中所有的元素// $refs只会在当前组件查找盒子// var myChart echarts.init(document.querySelector(.base-chart-box))var myChart echarts.init(this.$refs.mychart)// 绘制图表myChart.setOption({title: {text: ECharts 入门示例,},tooltip: {},xAxis: {data: [衬衫, 羊毛衫, 雪纺衫, 裤子, 高跟鞋, 袜子],},yAxis: {},series: [{name: 销量,type: bar,data: [5, 20, 36, 10, 10, 20],},],})},
}
/scriptstyle scoped
.base-chart-box {width: 400px;height: 300px;border: 3px solid #000;border-radius: 6px;
}
/stylevue异步更新 nextTick templatediv classappdiv v-ifisShowEditinput typetext v-modeleditValue refinp /button确认/button/divdiv v-elsespan{{ title }}/spanbutton编辑/button/div/div
/templatescript
export default {data() {return {title: 大标题,isShowEdit: false,editValue: ,}},methods: {handleEdit(){//1.显示输入框this.isShowEdit true//2.让输入框获取焦点this.$nextTick((){this.$refs.inp.focus()})}},
}
/scriptstyle
/styleVue 自定义指令-基础语法 自定义指令-封装v-loading 插槽-默认插槽 插槽-后备内容 具名插槽 一旦起了名字就是具名插槽需要添加template包裹起来
作用域插槽 templatedivMyTable :datalisttemplate #defaultobjbutton clickdel(obj.row.id)删除/button/template/MyTableMyTable :datalist2/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 },]}},components: {MyTable}
}
/script
templatetable classmy-tabletheadtrth序号/thth姓名/thth年纪/thth操作/th/tr/theadtbody v-for(item,index) in data :keyitem.idtrtd1/tdtd小张/tdtd8/tdtd!-- 给slot标签传值 --slot :rowitem /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组件标签封装-my-tag 单页应用路由 路由的使用 组件存放 路由封装抽离 wwwwwwwwwww
