嵌套的父选择器和属性嵌套的占位符选择器%variable$width:5em;字符串赋值插值语句#{$selector}@import@extendprops用法父组件通过props向下传递数据子组件传递事件给父组件发送消息静态props子类需要使用dashprops:["name"]动态props使用v-bindprops验证String,Number,Boolean,Function,Object,Array,Symbolprops:{propA:Number,propB:[String,Number],propC:{type:String,required:true},propD:{type:Number,default:101},propE:{type:Object,default:function(){return{message:"我来自propE"}}},propF:{isValid:function(value){返回值>100;}}}单向数据流不应在子组件更改父组件数据修改props使用局部变量接收修改data(){return{ownChildMsg:this.forChildMsg};}计算属性将响应地更改计算：{ownChildMsg(){returnthis.forChildMsg+"---ownChildMsg";}}使用变量存储，使用watch观察变化data(){return{ownChildMsg:this.forChildMsg};},观看：{forChildMsg(){this.ownChildMsg=this.forChildMsg;}}vueslotslotv-slot占坑数据不能跨组件传递defaultcontentslot命名插槽
这里可能是一个页面标题
一个段落主要内容。
还有一个。
Heresomecontactinfo
{{user.lastName}}</div>//定义内容data(){return{user:{firstName:"Fan",lastName:"Jun"}}}//home.vue{{slotProps.usertext.firstName}}
多个slot数据需要完整写出{{slotProps.user.firstName}}...解构插槽对象{{slotProps.usertext.firstName}}
//等同于{{usertext.firstName}}
//或{{person.firstName}}
//或者给默认值{{usertext.firstName}}
动态插槽名称...namedslot缩写v-slot:header可以改写为#headervue-routerSPA单页路由器更新视图无需重新请求页面``hashmodeviaanchor值的改变在指定的DOM中呈现不同位置的数据。history模式使用route覆盖所有候选资源使用route跳转1.直接改变状态栏2.this.$router.push3核心点使用name传递参数routes:[{path:'/',name:'Hello',component:Hello}]在vue中使用$route.name在router-link中使用to来传递参数valueString在vue中使用$route.params接收并使用url传递参数{path:'/params/:newsId/:newsTitle',component:paramsparamsnewsId=198newsTitle=jspangwebsite非常不错的单页多路由区域操作组件使用时{path:'/',name:'HelloWorld',components:{default:HelloWorld,left:H1,//显示H1组件内容'我是H1页面，欢迎来到H1'right:H2//显示H2组件内容'我是H2页面，欢迎来到H2'}}vue-router配置子路由二级路由配合children/user/foo/profile/user/foo/postsfoo.vue添加children:[{path:'/h1',name:'H1',component:H1},{path:'/h2',name:'H2',component:H2}]vue-router跳转方法this.$router.go(-1)跳转到上次浏览的页面this.$router.replace('/menu')跳转到指定地址this.$router.replace({name:'menulink'})指定名称路由this.$router.push('/menu')跳转到指定地址this.$router.push({name:'menulink'})指定使用*匹配的路由名称sourcemapbuild:{extend(config,{isDev,isClient}){if(isClient&&!isDev){config.devtool='source-map'//处理客户端}}}build:{extend(config,{isDev,isClient}){if(isClient&&!isDev){config.devtool='source-map'//处理客户端}}}native@invueclick.native="goback"自定义按钮exportdefault{name:'button',方法：{clickHandler(){这个.$emit('vclick')//触发`vclick`事件}}}使用button.vuebuttonimportvButtonfrom'@/components/Button'exportdefault{components:{vButton},methods:{clickHandler(){alert('onclick')//这里不会执行，因为组件中没有定义`click`事件},vClickHandler(){alert('onvclick')//触发`vclick`自定义事件}}}如果添加了native，则同时触发button也可以兼容<模板>flex布局盒子模型是基于display+position+float，布局不便displayflexmainaxismainaxisauxiliaryaxiscrossaxisflex-directionmainaxisdirectionrowrow-reversecolumncolumn-reverseflex-wrap换行方式nowrap无换行wrap在第一行上面换行wrap-reverseflex-flow是主轴边和换行的缩写rownowrapjustify-content主轴对齐flex-startflex-endcenterspace-周围空间之间align-items横轴对齐flex-startflex-endcenterbase-linestretchalign-content多轴对齐适用于多行flex-startflex-endcenterstretchspace-betweenspace-arounditempropertiesorderarrangementpositionitempropertiesflex-grow0定义放大倍数为0，同时不放大。item属性flex-shrink1为0，不收缩。项目属性flex-basisautoauto为其自身的大小分配多余的空间。item属性align-self之前的size让我有区别于别人flexgrowshrink的依据！！+cookies使用加号转换成值使用双感叹号转换成bool值Vue中使用scss变量共享变量$menuText:#bfcbd9;:export{menuText:$menuText;}invue:text-color="variables.menuText"通过计算属性引用计算：{variables(){returnvariables}}
