Vue

组件内的守卫组件内的守卫又叫路由钩子，可以理解为页面跳转的中间件处理函数官方文档：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E7%BB%84%E4%BB%B6%E5%86%85%E7%9A%84%E5%AE%88%E5%8D%AB可用的API提供有三个API，这三个API的参数是一样的(to,from,next)=>{...}xx(to,from,next)=>{//to将要跳转到的页面对象//from跳转前的页面对象//next()不填参数表现继续跳转d到下一个页面//next('/path')改变跳转的路由//next(false)返回原来的界面}beforeRouteEnter进入路由时<template></template><script>exportdefault{name:'User',beforeRouteEnter:(to,from,next)=>{console.log("进入页面");next();}}</script><style></style>beforeRouteLeave离开路由时<template></template><script>exportdefault{name:'User',beforeRouteEnter:(to,from,next)=>{console.log("离开页面");next();}}</script><style></style>beforeRouteUpdate路由改变<template></template><script>exportdefault{name:'User',beforeRouteEnter:(to,from,next)=>{console.log("路由改变，组件重用时");next();}}</script><style></style>

介绍VueRouter是Vue.js的官方路由。它与Vue.js核心深度集成，让用Vue.js构建单页应用变得轻而易举。功能包括：嵌套路由映射动态路由选择模块化、基于组件的路由配置路由参数、查询、通配符展示由Vue.js的过渡系统提供的过渡效果细致的导航控制自动激活CSS类的链接HTML5history模式或hash模式可定制的滚动行为URL的正确编码官网文档：https://router.vuejs.org/zh/introduction.html安装vue-router：npminstallvue-router//默认安装最新稳定版npminstallvue-router@3//安装3.Xvue-routervue2.X使用一个重要概念Vue的是单页程序，路由跳转是把内容展示在<router-view>标签上也能实现页面的条件创建路由管理文件在src里新建router文件夹，在新建index.js//src/router/index.jsimportVuefrom"vue";importVueRouterfrom"vue-router";importLoginfrom'../components/Login'importRegisterfrom'../components/Register'Vue.use(VueRouter)//使用VueRouterexportdefaultnewVueRouter({//导出VueRouter实例routes:[{//登录path:'/login',//请求路径name:'login',//定义名字为了更好的传递参数component:Login,//展示的组件},{//注册path:'/register',name:'register',component:Register,}]})在src/main.js引入路由importVuefrom'vue';importrouterfrom'./router';//自动扫描index.js文件importAppfrom'./App';newVue({el:'#app',router,//添加render:h=>h(App)});路由跳转<router-link>最终会被渲染成<a>标签<router-linkto="/register"><h2>注册</h2></router-link><router-linkto="/login"><h3>登录</h3></router-link><!--路由匹配到的组件将渲染在这里--><router-view></router-view><!--路由定义了名字才能这样传递参数--><router-link:to="{name:'user',params:{userId:123}}">User</router-link>路由模式两种路由方式都不会重新加载页面hash路由模式（默认值）：http://localhost:8080/#/registerhistory路由模式：http://localhost:8080/registerexportdefaultnewVueRouter({mode:'history',routes:[...]})路由传参路由参数的传递，设置后，在$route.params获取参数值exportdefaultnewVueRouter({routes:[//动态路径参数以冒号开头{path:'/user/:id',component:User},//设置多段路径参数{path:'/user/:username/post/:id',component:User}]})/*/user/12-->$route.params-->{id:12}/user/Bob/post/2-->$route.params-->{username:'Bob',id:2}*/使用$route.params会造成严重耦合，所有还有一种方式传递路由参数exportdefaultnewVueRouter({mode:'history',routes:[{path:'/user/:id',name:'user',component:User,props:true,//设置props为ture}]})捕获所有路由或404Notfound路由路由是支持正则表达式匹配的，匹配的优先级就是定义路由的顺序当使用通配符路由时，请确保路由的顺序是正确的，也就是说含有通配符的路由应该放在最后。路由{path:'*'}通常用于客户端404错误。如exportdefaultnewVueRouter({routes:[//动态路径参数以冒号开头{path:'/user/:id',component:User},//设置多段路径参数{path:'/user/:username/post/:id',component:User},{//通配会匹配所有路径path:'*'},{//会匹配以`/user-`开头的任意路径path:'/user-*'}]})重定向exportdefaultnewVueRouter({routes:[{path:'/a',redirect:'/b'},//直接重定向{path:'/c',redirect:{name:'login'}}//可以使用name]})嵌套路由效果其实是在子组件中渲染界面exportdefaultnewVueRouter({routes:[//动态路径参数以冒号开头{path:'/user/:id',component:User,children:[{//当/user/:id/profile匹配成功，//UserProfile会被渲染在User的<router-view>中path:'profile',component:UserProfile},{//当/user/:id/posts匹配成功//UserPosts会被渲染在User的<router-view>中path:'posts',component:UserPosts}]},})

ElementUI说明ElementUI是饿了么团队基于Vue开发的前端框架，使用方便简单官方文档：https://element.eleme.cn/#/zh-CN/component推荐使用npm的方式安装，它能更好地和webpack打包工具配合使用。npmielement-ui-S引入Element操作main.js完整引入打包体积会变的大一点importVuefrom'vue';importElementUIfrom'element-ui';import'element-ui/lib/theme-chalk/index.css';importAppfrom'./App.vue';Vue.use(ElementUI);#使用ElementUInewVue({el:'#app',render:h=>h(App)});按照需要引入借助babel-plugin-component我们可以只引入需要的组件，以达到减小项目体积的目的。npminstallbabel-plugin-component-D修改.babelrc文件{"presets":[["es2015",{"modules":false}]],"plugins":[["component",{"libraryName":"element-ui","styleLibraryName":"theme-chalk"}]]}接下来就能安装需要引入组件importVuefrom'vue';import{Button,Select}from'element-ui';importAppfrom'./App.vue';Vue.component(Button.name,Button);Vue.component(Select.name,Select);/*或写为*Vue.use(Button)*Vue.use(Select)*/newVue({el:'#app',render:h=>h(App)});官网有个完整单独组件引入https://element.eleme.cn/#/zh-CN/component/quickstart现在基于Element的环境开发搭建完毕

安装安装Vue//npminstall-gvue-g全局安装npminstall-gvue安装Vue-cli安装之后，你就可以在命令行中使用vue命令。npminstall-g@vue/cli//npmupdate-g@vue/cli全局升级npminstall-g@vue/cli-init//使用vue-cli相关模板创建项目这里使用webpackvue-V//查看版本创建一个项目运行下面命令，使用Vue-cli创建webpack模板项目vueinitwebpackhello_worldD:\HBuilderProjects>vueinitwebpackhello_world?Projectnamehello_world#项目名称?ProjectdescriptionAVue.jsproject#项目描述?Authorbigdataboy#项目作者?Vuebuild(Usearrowkeys)>Runtime+Compiler:recommendedformostusersRuntime-only:about6KBlightermin+gzip,buttemplates(oranyVue-specificHTML)areONLYallowedin.vuefiles-renderfunctionsarerequiredelsewhere然后四个No，选择npm安装依赖，等待下载Installvue-router?No#路由不安装?UseESLinttolintyourcode?No#代码检测不安装?SetupunittestsNo#测试不安装?Setupe2etestswithNightwatch?No#调试不安装?Shouldwerun`npminstall`foryouaftertheprojecthasbeencreated?(recommended)npm运行ui界面创建web-ui界面不止能创建项目，还能管理项目，依赖，插件，配置打包等vueui手动选择全部都不选选择Vue2目录介绍启动&打包npmrundev//开发环境打包，主要用于测试，不会生成打包文件npmrunstart//与上一个相同，最终调用的还是上一个命令npmrunbuild//打包

说明插槽：可以理解为占一块位置，然后可以插入组件，当有数据传入待插入组件时，再展示出来，没有数据时，插槽位置为空有数据时没有数时注册组件//留有插槽的组件模板里关联有待插入组件Vue.component('item',{template:'<div>\<slotname="h4-title"></slot>\<ul>\<slotname="li-slot"></slot>\</ul>\</div>'})//待插入组件Vue.component('h4-title',{props:['title'],template:'<h4>{{title}}</h4>'})//待插入组件Vue.component('li-slot',{props:['item'],template:'<li>{{item}}</li>'})使用item组件<item><!--插槽与待插入组件关联--><h4-titleslot="h4-title":title="title"></h4-title><li-slotslot="li-slot"v-for="(item,index)initems":item='item'></li-slot></item>全部代码<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title></title><!--<scriptsrc="https://unpkg.com/vue@next"></script>--><scriptsrc="js/v2.6.10/vue.min.js"type="text/javascript"charset="utf-8"></script></head><body><divid="app"><item><!--插槽与待插入组件关联--><h4-titleslot="h4-title":title="title"></h4-title><li-slotslot="li-slot"v-for="(item,index)initems":item='item'></li-slot></item></div><script>Vue.component('item',{template:'<div>\<slotname="h4-title"></slot>\<ul>\<slotname="li-slot"></slot>\</ul>\</div>'})Vue.component('h4-title',{props:['title'],template:'<h4>{{title}}</h4>'})Vue.component('li-slot',{props:['item'],template:'<li>{{item}}</li>'})varvue=newVue({el:'#app',data:{counter:'hello',title:'标题',items:['AA','BB','CC']}})</script></body></html>

说明Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中。相关请求引入：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.jsGET请求精简（只有url，没有参数）axios.get(url).then(response=>{//请求成功console.log(response.data);}).catch(error=>{//请求失败，console.log(error);});完整参数axios.get(url,{//设置请求头信息，可以传递空值headers:{K:V,},//传递参数params:{K:V,},}).then(response=>{//请求成功console.log(response.data);}).catch(error=>{//请求失败，console.log(error);});POST请求qs库地址：https://cdn.bootcdn.net/ajax/libs/qs/3.0.0/qs.jsqs.stringify()：将对象或者数组序列化成URL的格式qs.parse()：将qs.stringify()序列化的对象或者数组转回去letdata={K:V}axios.post("api",qs.stringify(data),{headers:{'token':token}}).then(response=>{//请求成功letres=response.data;console.log(res);}).catch(error=>{//请求失败，console.log(error);});其他请求待更新

案例介绍CSS有点丑，但是功能完整，将就看一下完整代码：https://pan.bigdataboy.cn/#/s/Oeia点击回车键添加内容清空所有内容总条数显示内容删除清空内容，隐藏底部条数与清空按钮功能说明内容添加v-model绑定表单内容用于数据绑定，@keyup.enter绑定回车键事件，添加内容<inputtype="text"v-model="inputValue"@keyup.enter="add"/>内容显示及删除v-for循环数组，显示内容。@click绑定点击事件，删除内容<ul><liv-for="(item,index)inlist"><span>{{index+1}}</span><span>{{item}}</span><buttonclass="remove"@click="remove(index)">X</button></li></ul>显示总条数及清空v-show判断是否显示，{{list.length}}显示总条数，@click绑定点击事件，用于清空数组<divv-show="list.length!=0"><span>{{list.length}}items</span><buttonclass="clear"@click="clear">Clear</button></div>Vue代码varvue=newVue({el:"#app",data:{//内容数组list:["吃饭饭","睡觉觉","打豆豆"],//输入的内容inputValue:"",},methods:{//添加add:function(){this.list.push(this.inputValue)},//移除remove:function(index){this.list.splice(index,1)},//清空clear:function(){this.list=[]}}})

说明上下条数切换第一条时，上一条按钮禁止点击最后一条时，下一条按钮禁止点击<scriptsrc="js/vue.js"type="text/javascript"charset="utf-8"></script><body><divid="app"><!--当第一条时，按钮禁止--><buttontype="button"v-bind:disabled="index==0?true:false"@click="prev">上一条</button><br/><spanv-text="arr[index]"></span><br/><!--最后一条时，按钮禁止--><buttontype="button"v-bind:disabled="index==arr.length-1?true:false"@click="next">下一条</button></div></body><script>varvue=newVue({el:"#app",data:{arr:["你要努力的去生活，因为你只有努力了，才知道自己真的不行。","好看的皮囊三千一晚，有趣的灵魂要车要房。","别人的钱财，乃我的身外之物。","别人的身体里都是才华，你的身体里都是珍珠奶茶。",],index:0},methods:{prev:function(){this.index-=1},next:function(){this.index+=1}}})</script>

v-text设置标签的文本属性v-text会覆盖原本标签的值标签想要部分设置文本可以使用{{}}方式v-text、{{}}支持逻辑表达式<scriptsrc="js/vue.js"type="text/javascript"charset="utf-8"></script><body><divid="app"><h2>信息：{{message}}</h2><h2>信息：{{message+"!"}}</h2><h2v-text="name">姓名</h2><h2v-text="name+'!'">姓名</h2></div></body><script>varvue=newVue({el:"#app",data:{message:"大数据男孩",name:"Bigdataboy",}})</script>v-html设置元素的innerHTML，data对象里的HTML结构会解析成标签，v-text只会解析成文本<scriptsrc="js/vue.js"type="text/javascript"charset="utf-8"></script><body><divid="app"><pv-html="content"></p></div></body><script>varvue=newVue({el:"#app",data:{content:"<h2>大数据男孩</h2>"}})</script>v-on为元素绑定事件完整格式：v-on:事件="方法名"缩写：@事件="方法名"绑定的方法定义在methods属性里面相关事件：click点击、dblclick双击、mouseenter鼠标移动…<body><divid="app"><inputtype="button"value="v-on指令"v-on:click="fun"><inputtype="button"value="v-on缩写"@click="fun"><pv-text="message"@click="changeMessage"></p></div></body><script>varvue=newVue({el:"#app",data:{message:"大数据男孩",},methods:{fun:function(){alert("事件绑定")},changeMessage:function(){this.message+="真帅"},},})</script>v-on补充传参事件绑定方法写成函数调用形式，可以传入自定义参数<scriptsrc="js/vue.js"type="text/javascript"charset="utf-8"></script><body><divid="app"><inputtype="button"value="按钮"@click="doBtn('老铁','666666')"/></div></body><script>varvue=newVue({el:"#app",methods:{doBtn:function(p1,p2){console.log(p1,p2)}}})</script>修饰符事件的后面跟上.修饰符可以对事件进行限制更多访问：https://cn.vuejs.org/v2/api/#v-on<scriptsrc="js/vue.js"type="text/javascript"charset="utf-8"></script><body><divid="app"><inputtype="text"@keyup.enter="doEnter('回车被点击')"/></div></body><script>varvue=newVue({el:"#app",methods:{doEnter:function(p){console.log(p)}}})</script>v-show用于显示&隐藏标签支持条件表达式本质是控制display:none;<scriptsrc="js/vue.js"type="text/javascript"charset="utf-8"></script><body><divid="app"><!--布尔值--><imgv-show="true"src="./img/1.jpg"style="width:10%;height:10%;"/><!--变量控制--><imgv-show="isShow"src="./img/1.jpg"style="width:10%;height:10%;"/><!--条件表达式--><imgv-show="age>18"src="./img/1.jpg"style="width:10%;height:10%;"/></div></body><script>varvue=newVue({el:"#app",data:{isShow:true,age:17},})</script>v-if用于显示&隐藏标签支持条件表达式本质是判定为false时把标签移除v-if相对于v-show，更消耗性能，因为v-if需要操作DOM树<body><divid="app"><inputtype="button"@click="toggleIsShow"value="切换v-if"/><p></p><!--变量控制--><imgv-if="isShow"src="./img/1.jpg"style="width:10%;height:10%;"/><!--条件表达式--><imgv-if="age>18"src="./img/1.jpg"style="width:10%;height:10%;"/></div></body><script>varvue=newVue({el:"#app",data:{isShow:true,age:17},methods:{toggleIsShow:function(){this.isShow=!this.isShow}}})</script>v-bind为元素绑定属性完整写法：v-bind:属性缩写：:属性如果设置的class属性，建议使用对象方式判断是否添加类名<scriptsrc="js/vue.js"type="text/javascript"charset="utf-8"></script><body><divid="app"><!--绑定src属性（完整写法）--><imgv-bind:src="isSrc"style="width:10%;height:10%;"/><br/><!--绑定src属性（缩写写法）--><img:src="isSrc"style="width:10%;height:10%;"/><br/><!--绑定类名（建议对象写法）--><img:src="isSrc":class="{img:isShow,active:isActive}"style="width:10%;height:10%;"/><!--绑定类名（数组写法）--><img:src="isSrc":class="[show,active]"style="width:10%;height:10%;"/></div></body><script>varvue=newVue({el:"#app",data:{isSrc:"./img/1.jpg",isShow:true,isActive:true,show:"show",active:"active",}})</script>v-for根据数组生成列表结构v-for经常与数组搭配使用语法：(item,index)in数组改变数组的内容会同步更新到页面上，是响应式的<scriptsrc="js/vue.js"type="text/javascript"charset="utf-8"></script><body><divid="app"><h2>大数据男孩</h2><ul><liv-for="(item,index)inarr">{{index+1}}{{item}}</li></ul><h2>兴趣</h2><h3v-for="iininterest"v-bind:title="i.name">{{i.name}}</h3></div></body><script>varvue=newVue({el:"#app",data:{arr:["帅气","没钱","可爱","有趣","想了解吗？"],interest:[{"name":"摄影"},{"name":"网络"},{"name":"哲学"},]}})</script>v-model便捷设置和获取表单元素的值绑定的数据会和表单元素的值相关联绑定的数据<—->表单元素的值<scriptsrc="js/vue.js"type="text/javascript"charset="utf-8"></script><body><divid="app"><inputtype="text"v-model="message"/><h2v-text="message"></h2></div></body><script>varvue=newVue({el:"#app",data:{message:"",}})</script>

概述官网：https://cn.vuejs.org/第一个Vue程序引入Js<!--开发环境版本，包含了有帮助的命令行警告--><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>渲染数据数据渲染不支持单标签、html、body标签<divid="app">{{message}}<p>{{date}}</p></div>Vue数据渲染支持同步刷新渲染数据data对象，支持选择的标签及后代标签<script>varvue=newVue({el:"#app",//挂载点选择器都支持(建议使用ID选择器)data:{message:"HelloBigdataboy",date:"2020.9.275.20"}})</script>data对象渲染复杂类型数据<body><divid="app">{{message}}<h2>{{infor.name}}</h2><ul><li>{{advantage[0]}}</li><li>{{advantage[1]}}</li><li>{{advantage[2]}}</li></ul></div></body><script>varvue=newVue({el:"#app",data:{message:"HelloBigdataboy",//普通类型infor:{//Json对象name:"bigdataboy",age:"18"},advantage:["帅气","幽默","有内涵"]//数组}})</script>