尚vue核心技术课件瑞客

1章：Vue英文官网中文官网 作用:编码简洁,体积小,运行效率高,适合移动/PCvue-router:vuex:vue-vue- vue-scroller:mint-ui:vueUI组件库(移动端element-ui:vueUI组件库(PC端1.2.Vue1.2.1.效果 1.2.2.<div<inputtype="text"v- o,<scripttype="text/javascript"<scripttype="text/javascript">newVue({el:'#app',data:{username:}1.2.3.使用vue1.2.4.理解Vue1.3. 功能:指令一:功能: 指令二:功能:绑定指 <<div<h2>1双大括号表达式<h2>2指令一强制数据绑定<a <av- <a <h2>3指令二<scripttype="text/javascript"<scripttype="text/javascript">newVue({el:msg:'NBAILoveThisGame!',url:'ht handleClick}}.4.3.当属性变化时,回调函数自动调用,1.4.4. 计算属性存在缓存,1.4.5.<<div姓<inputtype="text"ceholder="FirstNamev-名<inputtype="text"ceholder="LastName"v-1(单向):<inputtype="text"ceholder="FullName"v-model="fullName1"><br>2(单向):<inputtype="text"ceholder="FullName"v-model="fullName2"><br>3(双向<inputtype="text"ceholder="FullName2v-model="fullName3"><br><<scripttype="text/javascript"<scripttype="text/javascript">varvm=newVue({el:'#demo',data:{firstName:'Kobe',lastName:'bryant',fullName2:'Kobebryant'computed:fullName:function()returnthis.firstName+""+fullName3:get:function()returnthis.firstName+""+set:function(value)varnames=value.split('')this.firstName=names[0]this.lastName=names[1]}}watch:lastName:function(newVal,oldVal)this.fullName2=this.firstName+''+}}vm.$watch('firstName',function(val)this.fullName2=val+''+classstyle(04_classstyle绑定1.5.2.,1.5.3.class1.5.4.style1.5.5..classAcolor:}.classBbackground:}.classCfont-size:}<div<h2>1.class绑定<pclass="classB:class="a">表达式是字符串<p:class="{classAisAclassBisB}">表达式是对象classA:isAclassB<p:class="['classAclassC']">表达式是数组classA<h2>2style绑定<p:style="{color,fontSize}">style="{color:activeColor,fontSize:fontSize+'px'}"</p><button@click="update">更新<scripttype="text/javascript"<scripttype="text/javascript">newVue({el:'#demo',data:{a:'classA',isA:true,isB:false,color:'red',fontSize:methods{update(){this.a='classC'this.isA=falsethis.isB=truethis.color='blue'this.fontSize='30px'}}(05_条件渲染1.6.2.v-ifv-1.6.3.比较v-ifv-v-show1.6.4.<div<h2v-if="ok">表白成功<h2v-else>表白失败<h2v-show="!ok">求婚失败<button@click="ok=!ok">切换<<scripttype="text/javascript"<scripttype="text/javascript">varvm=newVue({el:'#demo',data:{ok:}(06_列表渲染 数组v-forindex对象:v-for/key删除item<<div<h2>测试v-for遍历数组<<liv-for="(p,index)s"--,{<h2>测试v-for遍历对象<liv-for="(value,key){{key}}:{{value<scripttype="text/javascript"<scripttype="text/javascript">newVue({el:'#demo',data:{s:{id:1,name:'Tom',age:{id:2,name:'Jack',age:{id:3,name:'Bob',age:]{deleteItem(index) s.splice(index,updateItem(index,p) s.splice(index,1,}}<div<inputtype="text"name="searchName" ceholder="搜索指定用户名"<liv-for="(p,index)in "name:'Jack',age:name:'Bob',age:name:'Cat',age:name:'Mike',age:name:'Monica',age:this.orderType=}{ ()let{orderType, s}=s s.filter(p=>.indexOf(searchName)!=-if(orderType!==0)ss.sort(function(p1,p2)if(orderType===1)returnp1.age-}elsereturnp2.age-}} }}1.8.1.效果处理 1.8.2.: 默认形参:1.8.3.修饰.prevent:的默认行为.stop:停止冒泡1.8.4..keyName操作的某个按键名的键(少部分1.8.5.<div<h2>1.绑 <buttonv-<button<button@click="test2($event, 修饰符 <a <divstyle="width:200px;height:200px;background:red"<divstyle="width:100px;height:100px;background:green"<h2>3按键修饰符<input<input<scripttype="text/javascript"<scripttype="text/javascript">newVue({elel:data:name:methods:test1(event)// o'++test2(event,{alert(event.target.innerHTML+'---'+test3()test4(){test6(event)alert(event.keyCode+'---'+}}<<div<form<span>用户名<inputtype="text"v-:<inputtype="password"v-:<inputtype="radio"id="female"value="female"v- <inputtype="radio"id="male"value="male"v- :<inputtype="checkbox"id="basket"1.9.2.使用v-model1.9.3.<inputtype="checkbox"id="foot"value="football"<label <inputtype="checkbox"id=" pang"value=" pang" <span>城市<selectv-<optionv-for="cityinallCitys"{{<span>介绍<textareav-model="user.desc"<inputtype="submit" <scripttype="text/javascript"varvm=newVue({data:{user:username:pwd::likes:cityId:desc:allCitys:[{id:1,name:'BJ'},{id:2,name:'SZ'},{id:4,name:methods:{handleSubmit(event){}}}0.1.(09_Vue实例_生命周期.10.3.vue1.10.4.created()/mountedajax请求,beforeDestory():做收尾工作,如:1.10.5.<button@click="destoryVue">destory<pv-<scripttype="text/javascript"<scripttype="text/javascript">varvue=newVue({data:{isShowing:true,s:[]beforeCreate()console.log('beforeCreate()msg='+created()ervalId=setInterval(()=> this.isShowing=!this.isShowing},beforeMount()mounted()beforeUpdate()updated()console.log('updatedbeforeDestroy{console.log('beforeDestroy()destroyed(){destoryVue()}}(10_过渡&动画

xxx-enter-active:指定显示的transitionxxx-leave-active:指定隐藏的transitionxxx-enter/xxx-leave-to指定隐藏时的样式.11.4..fade-enter-active,.fade-leave-activetransition:opacity}.fade-enter,.fade-leave-toopacity:}/*transition:all.3s}transition:all.8scubic-bezier(1.0,0.5,0.8,}.slide-fade-enter,.slide-fade-leave-totransform:translateX(10px);opacity:0;}<div<button@click="show=!show"><transition<pv- <div<button@click="show=!show"><pv- <scripttype="text/javascript"<scripttype="text/javascript">newVue({el:'#demo1',data:{show:}newel:'#demo2',data:{show:}1.5..bounce-enter-activeanimation:bounce-in}.bounce-leave-activeanimation:bounce-in.5s}@keyframesbounce-in0%transformtransform:}50%transform:}100%transform:}}<div<button@click="show=!show">Toggle<transition<pv-if="show" y:inline-block">Lookat<scripttype="text/javascript"newel:'#test2',data:{show:}(11_过滤器.12.2.:注意:并没有改变原本的数据,1.12.3. //1.12.4.<<div<p>当前时间为.13.1.效果(12_指令<p>1为currentTime|<p>3为{currentTime|<scripttype="text/javascript"<script Vue.filter('dateStr',function(value,format)returnmoment(value).format(format||'YYYY-MM-DDnewel:'#test',data:{currentTime:new}v:text:v-html:v-if:如果为true,当前才会输出到页v-else:如果为false,当前才会输出到页v-for:遍历数组/v-on:绑定,一般简写为v-bind:强制绑定解析表达式,v-v-model:ref:指定唯一标识,vue对象通过$els属 v-cloak:防止闪现,与css配合:[v-cloak]{ y:noneVue.directive('my-directive',function(el,binding){el.innerHTML=directives:bind(el,binding)el.innerHTML=}}}[v-cloak] y:}<div<pv-<pv-<pv-<img:id="myid"<span <pv-<scripttype="text/javascript"<scripttype="text/javascript">newdata:{url:'<amyid:'abc123',imageSrc:'methods:showMsg:function{}}需求:2<<div<pv-upper-<pv-lower-<div<<pv-upper-<scripttype="text/javascript"<script Vue.directive('upper-text',function(el,{el.innerHTML=newel:'#demo1',data:{msg:'NBAlovethis 'lower-text':bind(el,binding)el.innerHTML=}}}newel:'#demo2',data:{msg2:'ILike}(13_插件,(function()constMyPlugin=MyPlugin.install=function(Vue,options)Vue.myGlobalMethod=functionalert('Vue函数对象方法执行}Vue.directive('my-directive',function(el,{el.innerHTML="MyPluginmy-directive"+Vtotype.$myMethod=functionalert('vue实例对象方法执行}}windowwindow.MyPlugin=2章：vue2.1.vue-cli<div<pv-my-<scripttype="text/javascript"<scripttype="text/javascript"src="vue-<scriptvarvm=newVue({el:'#demo',data:msg:} 作用: 创建vuenpminstall-gvue-vueinitwckvue_democdvue_demonpminstall: |config |--index.js:指定 |--|src:|App.vue:|--main.js:应 |static: |index.html:::.2.1.打包npmrun:serve::web服务器output: }npmrun :,官网style .eslintrc.js}/*eslint-disableno-new*/newVue({el:'body',components:{App}:vue文件的组成(3个部分 export{data(){}},methods:{},computed:{},components:{}} 2.4.3. oWorldfrom' exportdefault{ }}写法一:写法二:大写变小写,并用-,: 定 方式一:方式二:name:String,age:}方式三:指定名称/类型/必要性/name:{type:String,required:true,}//// ,,2.7.2vue.7.2.//方式一:v-on//方式二:通过$on()this.$refs.xxx.$on('delete_todofunctiontodo7.3.注意:3:消息订阅与发布(PubSubJS库 优点:此方式可实现任意关系组件间通信(数据 目标 元素名(类型 :用户在浏览器上对应的界面上做对应的操作自定义:编码手动触发子组件 结构 父组件0.demo1:commenttmanage.gif2.11.demo2:todo 3章：vue-vue插件, ////////successcallback},(response)=>//error)//axios:npminstallaxios--3.4.//importaxiosfrom//ajax//.catch(error{ demo3:4章：vueUI4.1.Mint:说明:vuePCUI4.2.Mint4.2.1.{"style":true}<metaname="viewport"content="width=device-width,initial-minimum-scale=1,user-scalable=no" if('addEventListener' .addEventListener('DOMContentLoaded',function(){ },}{} 使用mint-uiimportimport{Button}from'mint-5.1. import{Toast}from'mint-ui'exportdefault{{handleClick(){}}} 中文文档: ():new//{//path:'/about',{//自动跳转路由path:'/',}]newVue({<router-link>:应用组件5.2.4.路由器模块VueRouter({routes:{path:'/',{path:'/about',{path:'/home',}]5.2.5.路由器:importVuefrom'vue'importVuefrom'vue'//vuenewrender:h=>5.2.6. 的5.2.7.总结:3path:'/home',children:[{path:'news',{path:'message',component:Message}]路 1:路由路径携带参数{path:'mdetail/:id',component:MessageDetail}] 默认情况下,被切换的路由组件对象 释放,再次回来时是重新创建,相关 ):():):):6vuex 文档: :state::.conststate=xxx:}只能包含同步的代码//state}} ,触发:组件中:$store.dispatch('action名称', //可以包含异步代码(定时器ajax)constactions={}} :组件中:$store.getters.xxxconstgetters={mmm(state)}} exportdefaultnewimport{mapState,mapGetters,mapActions}from'vuex'exportdefault{}}{{xxx}}{{mmm}}映射newVue({state:的state对getters:的getters对 ):6.3demo1:5.3.1.importVuefrom'vue'importVuexfrom'vuex'state对象conststate=count },constmutations{INCREMENT(state)DECREMENT(state){//ctrl+shift+}}:constactions{increment({commit}){decrement({commit}){incrementIfOdd({commit,state}){}{setTimeout(()=>{},}}.3.2.importVuefrom'vue'importappfrom'./app1.vue'//importappfromimportstorefromnewel:render:h=>包含多个getconstgetters{oddOrEven(state)returnstate.count%2===0'偶数'奇数count(state)return}} exportdefaultnewVuex.Store({state,. <p>clicked:{{$store.state.count}}times,countis<button<button@click="incrementIfOdd">incrementif exportdefault{oddOrEven()return}{increment{decrement()incrementIfOdd()incrementAsync()}}}. <p>clicked:{{count}}times,countis<button<button@click="incrementIfOdd">incrementif<button@click="incrementAsync">increment import{mapGetters,mapActions}fromexportdefaultcomputedmapGettersoddOrEven2:'oddOrEven',count:'count'methodsmapActions(['increment''decrement''incrementIfOdd','incrementAsync'])//名称一样}6.4.demo2:todotodo6.3.1.importimport{RECEIVE_TODOS,ADD_TODO,REMOVE_TODO,DELETE_DONE,UPDATE_ALL_TODOS}exportdefault[RECEIVE_TODOS](state,{state.todos=[ADD_TODO](state,{[REMOVE_TODO](state,{state.todos.splice(index,[DELETE_DONE](state)state.todos=state.todos.filter(todo[UPDATE_ALL_TODOS](state,{state.todos.forEach(todo plete=}}6.3.2.exportconstRECEIVE_TODOS='receive_todos'exportconstADD_TODO='add_todo'exportconstREMOVE_TODO='remove_todo'exportconstDELETE_DONE=exportconstUPDATE_ALL_TODOS=}}updateAllTodos({commit},isCheck)}deleteDone({commit})removeTodo({commit},index)commit(REMOVE_TODO,addTodo({commit},todo)commit(ADD_TODO,exportdefaultreadTodo{setTimeout(()=>consttodos=},importstorageUtilfromimport{RECEIVE_TODOS,ADD_TODO,REMOVE_TODO,DELETE_DONE,UPDATE_ALL_TODOS}.3.4.exportexport{todos{returntotalSizetotalSize(state)returncompleteSize(state)returnstate.todos.reduce((preTotal,todo)=>returnpreTotal+ plete?1:},plete(state,getters)returnpleteSize&&}}6.3.5.importVuefrom'vue'importVuexfrom'vuex'importmutationsfrom'./mutations'importactionsfrom'./actions'importgettersfrom'./getters'conststate=todos:}exportdefaultnewVuex.Store({state,6.3.6. <divclass="todo-<divclass="todo- importtodoHeaderfrom'./todoHeader.vue'importto from'./to importtodoFooterfrom'./todoFooter.vue'importstorageUtilfromexport{created() }}{width:margin:0}.todo-container.todo-wrappadding:border:1pxsolidborder-radiusborder-radius:}6.3.7. <divclass="todo-<input v-model="title" <scripttype="text/ecmascript-6">exportdefault{data()returntitle:}{addItem()consttitle=this.title&&this.title.trim()if(title){consttodo{}this.title=}}}}{width:height:.3.8. <ulclass="todo-<todo-itemv-for="(todo,index)todos":todo="todo":key="index":index="index"></todo- <scripttype="text/ecmascript-6">importto temfrom'./to importstorageUtilfrom'../util/storageUtil'exportdefault{{ {todos{return}watch:font-size:14px;border:1pxsolid#ccc;border-radius:4px;padding:4px7px;}.todo-headerinput:focusoutline:border-color:rgba(82,168,236,box-shadow:inset01px1pxrgba(0,0,0,0.075),008pxrgba(82,168,236,}.3.9. <li:style="{background: <inputtype="checkbox"v- " <scripttype="text/ecmascript-6">exportdefault{handler:deep:}}.todo-mainmargin-left:0px;border:1pxsolid#ddd;border-radius:2px;padding:0px;}.todo-emptyheight:line-height:40px;border:1pxsolid#ddd;border-radius:2px;padding-left:5px;margin-top:10px;}props:['todo','index'],data(){return{isShown:false,libg:}methods:handleStyle(isEnter)if(isEnter){this.isShown=truethis.libg='#ddd'}elsethis.isShown=falsethis.libg='#fff'}deleteItem()const{todo,deleteTodo,index}=//}}}}lilist-style:none;height:36px;padding:05px;border-bottom:1pxsolid}lilabelfloat:left;cursor:pointer;}.3.10. <divclass="todo-<inputtype="checkbox"v-/<buttonclass="btnbtn-danger"@click="deleteDonev-show="completeSize>0">清除已 import{mapGetters,mapActions}from'vuex'exportdefault{lilabelli{vertical-align:middle;margin-right:6px;position:relative;top:-1px;}li{float:right; y:none;margin-top:3px;}li:beforecontent:}li:last-childborder-bottom:}methods:computed:{get()return set