Vue
文章目录 Vue 1、vue 初识2、MV*格式的模式3、MVVM模式4、第一个Vue程序5、vue的逻辑基本语法6、Vue双向绑定6.1 单行文本6.2 单选框6.3 下拉菜单 7、Vue组件讲解8、Axios异步通信9、第一个Axios应用程序10、vue的生命周期11、计算属性12、插槽slot（内容分发）12.1 模板定义一个待办事项的组件12.2 可以设计两个插槽使标题和动态绑定，即留出两个插槽，实现可拔插（组件）12.3 用组件插上两个插槽12.4 通过插槽将组件插入12.5 整合代码实现插槽的应用 13、自定义事件14、前部总结15、第一个vue-cli项目15.1 vue-cli简介15.2 第一个vue-cli应用程序 16、Webpack17、vue-router17.1 路由跳转测试 18、嵌套路由19、参数传递及重定向20、404与路由钩子20.1 异步请求与钩子 21、总结21、总结 1、vue 初识概述
vue是一套用于构建用户界面的渐进式框架，vue被设计为可以自底向上逐层应用。vue核心库只关注视图层，第三方库有：（vue-router页面跳转、vue-resource网络通信、vuex状态管理、vue-UI:ICE）
官网：https://cn.vuejs.org/v2/guide/ICE：https://ice.work/前台的三要素
html(结构)：超文本标记语言css(表现)：层叠样式表JavaScript(行为)：脚本语言，解释型语言css预处理器
概念：可以将css作为目标文件生成，即动态生成css文件
常用的css预处理器：
SASS：基于Ruby编程语言LESS：基于Node.js （建议使用）JavaScript与ES6配合使用（webpack打包成为ES6支持）
JavaScript框架
jQuery:JavaScript框架，简化了DOM操作Angular：模块化开发理念React：虚拟DOMvue：结合了模块化开发理念(Angular)和虚拟DOM(React),中国人开发Axios:前端通信框架，为jQuery提供的ajax通信功能UI框架
Ant-Design：基于React的UI框架ElementUI：基于vue的UI框架Bootstrap：用于前端开发的开源工具包AmazeUI：一款HTML5跨屏前端框架JavaScript构建工具
Bable：js编译工具，用于编译TypeScript
WebPack：模块打包器，主要作用是打包、压缩、合并及按序加载
后端技术：
Express：Node.jsKoa：Express简化npm：项目综合管理工具，类似于maven 2、MV*格式的模式前端模式的演变：
MVC（同步通信为主）：model、view、controllerMVP（异步通信为主）：model、view、presenterMVVM（异步通信为主）：model、view、ViewModel为了降低前端开发复杂度，涌现大量的前端框架，比如：AngularJS、React、VueJS、EmberJS。这些框架总的原则是先按类型分层
**总结:**模式也好、技术也罢，没有好坏之分只有适合与不适合之分。
3、MVVM模式MVVM模式是一种软件架构设计模式，是一种简化的用户界面的事件驱动编程方式。核心为==ViewModel==
该层向上与视图进行双向数据绑定向下与Model层通过接口请求进行数据交换流行的MVVM框架：Vue.js、Angular Js等
MVVM模式示意图：过程：
前台view层向ViewModel层拿到数据显示在页面中view与ViewModel为双向绑定只要数据变化视图会立即跟着变化ViewModel向Model层通过ajax请求数据，Model层会返回一个JSON格式的数据Model层就与java有关系了，通过之前所学的SSM或其他框架进行业务逻辑处理从数据库拿数据返回这就是MVVM模式的大概过程。MVVM好处：低耦合、可复用、独立开发、可测试。
4、第一个Vue程序代码编写
<!--下载地址线上静态资源引入--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>vue.js的核心是实现MVVM模式的ViewModel角色（双向绑定）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!--ES6模板字符取数据--> {{message}} </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <script> var vm=new Vue({ el:"#app", data:{ message:"hello,vue!" } }); </script> </body> </html>vue命令：v-bind:title="message"
<!--使用vue的命令字符取数据--> <div id="app"> <span v-bind:title="message"></span> </div> 5、vue的逻辑基本语法 v-if 条件判断 <li v-if="type==='A'">A</li> v-else 条件判断 <li v-else>C</li> v-else-if 条件判断 <li v-else-if="type==='B'">B</li> v-for 循环 <li v-for="item in items"> {{item.messages}} </li>总代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <li v-if="type==='A'">A</li> <li v-else-if="type==='B'">B</li> <li v-else>C</li> </div> <div id="bpp"> <li v-for="item in items"> {{item.messages}} </li> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <script> var vm=new Vue({ el:"#app", data:{ type:'A' } }); var vm2=new Vue({ el:"#bpp", data:{ items:[{messages:"学SSM框架"},{messages: "学Vue前端"},{messages: "学Mysql数据库"}] } }); </script> </body> </html>事件绑定v-on
<div id="app"> <button v-on:click="sayHi">click me</button> </div> <!DOCTYPE html> <html lang="en" xmlns:v-on="http://·/download/Git：https://git-scm.com/downloads
镜像：https://npm.taobao.org/mirrors/git-for-windows/
2.确定node.js是否安转成功：
cmd下输入 node -v，查看是否正确的打印版本号cmd下输入 npm -v，查看是否正确的打印版本号3.安转node.js淘宝镜像加速器（cnpm）：
# -g 全局安装(推荐使用) npm install cnpm -g #或使用如下语句解决npm速度慢的问题 npm install --registry=https://registry.npm.taobao.org默认安装的位置：C：\Users\Administrator\AppData\Roaming\npm
4.安转vue-cli：
cnpm install vue-cli -gvue list (测试是否安转成功) 15.2 第一个vue-cli应用程序创建一个Vue项目，在任意盘符下建立一个空文件夹
使用管理员身份运行cmd并进入该创建的空文件夹（必须进入文件夹）
在文件夹中创建一个基于webpack模板的vue应用程序
? vue init webpack myvue （myvue为自定义项目名）
说明：初始化时一直选择 no
初始化并运行
cd myvue npm install npm run dev 16、Webpackwebpack是前端热门的模块加载器兼打包工具，相当于maven，可以使得ES6规范的代码通过打包降低版本提高一些兼容性
ES6模板：
// EcmaScript6标准增加了JavaScript语言层面的模块体系定义，能把各种资源，如：js、jsx、es6、sass、less、图片等都作为模块来处理使用，ES6模块的设计思想，是尽量静态化，是编译时能够确定模块的依赖关系，以及输入输出的变量优点：
容易进行静态分析面向未来的EcmaScript标准缺点：
原生浏览器端还没有实现该标准（webpack）全新的命令，新版的Node.js才支持安装Webpack(命令提示符)
npm install webpack -gnpm install webpack-cli -g测试是否成功：webpack -v、webpack-cli -v (版本打印)配置
? 创建 webpack.config.js
entry：入口文件，指定webpack用哪个文件作为项目的入口output：输出，指定webpack把处理完成即打包好的文件放置指定路径module：模块plugins：插件resolve：设置路径指向watch：监听，用于设置文件改动后直接自动打包使用webpack
1、创建项目
2、创建一个名为modules的目录，用于放置技术模块等资源文件
3、在module目录下创建一个hello.js，导出，在下面导入
exports.sayhi=function (){ document.write("<h1>qiuminxuevue</h1>") }4、在module目录下创建一个入口文件qiumin.js，用于entry属性
var hello=require("./hello"); hello.sayhi()5、在项目目录下创建webpack.config.js配置文件，使用webpack命令打包
module.exports={ entry: "./modules/qiumin.js", output: { filename: "./js/bundle.js" } };6、打包后会生成一个js文件
7、在index页面中导入该打包后的文件即可
17、vue-router? vue-router是vue.js官方的路由管理器，它hevue.js的核心深度集成，让构建单页面应用变得高效
功能：
嵌套的路由/视图表模块化、基于组件的路由配置路由参数基于vue.js过渡系统的视图过渡效果细粒度导航控制自动激活css class的链接，自定义滚动条行为安装
vue-router是一个插件包，在项目目录中安装，即不全局安装只在特定项目中安装
npm install vue-router --save-dev
特别注意：需要指定安装版本，默认为最新版本可能会存在问题，所以在package.json中指定版本
"vue-router": "^3.5.3", 使用 import Vue from 'vue' import VueRouter from 'vue-router' //安装路由 Vue.use(VueRouter); 17.1 路由跳转测试 组件1（Main） <template> <h1>首页</h1> </template> <script> export default { name: "Main" } </script> <style scoped> </style> 组件2（Content） <template> <h1>内容页</h1> </template> <script> export default { name: "Content" } </script> <style scoped> </style> 路由配置（index.js） import Vue from 'vue' import VueRouter from 'vue-router' import Main from '../components/Main' import Content from '../components/Content' //安装路由 Vue.use(VueRouter); //配置导出路由 export default new VueRouter({ routes:[ {//路由路径 path: '/content', //路由名称 name: 'content', //跳转到的组件 component:Content }, { path: '/main', name: 'main', component: Main } ] }); App.vue（在该页面点击跳转） <template> <div id="app"> //路由跳转 <router-link to="/main">首页</router-link> <router-link to="/content">内容页</router-link> //视图 <router-view></router-view> </div> </template> <script> export default { name: 'App', } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style> 入口（main.js） // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, //路由自动配置 components: { App }, template: '<App/>' })运行测试
特别注意：控制vue-router版本下载！！！特别注意：控制vue-router版本下载！！！特别注意：控制vue-router版本下载！！！ 18、嵌套路由嵌套路由又称子路由，在实际应用中，通常由多层嵌套组合而成，同样的，URL中各段动态路径也按某种结构对应嵌套的各层组件中，即在一个组件的另一个组件中也有路由
父组件（content.vue） <template> <div> <h1>内容页</h1> <router-link to="/content/user">用户信息页</router-link> <router-link to="/content/useradd">用户添加页</router-link> <router-view></router-view> </div> </template> <script> export default { name: "Content" } </script> <style scoped> </style> 子组件（user.vue） <template> <h1>用户信息页</h1> </template> <script> export default { name: "user" } </script> <style scoped> </style> 子组件（useradd.vue） <template> <h1>用户添加页</h1> </template> <script> export default { name: "useradd" } </script> <style scoped> </style> 路由配置 import Vue from 'vue' import VueRouter from 'vue-router' import Main from '../components/Main' import Content from '../components/Content' import User from '../components/user' import Useradd from '../components/useradd' //安装路由 Vue.use(VueRouter); //配置导出路由 export default new VueRouter({ routes:[ {//路由路径 path: '/content', //路由名称 name: 'content', //跳转到的组件 component:Content, //嵌套路由配置 children:[ { path: '/content/user', component: User }, { path : '/content/useradd', component : Useradd } ] }, { path: '/main', name: 'main', component: Main } ] }); APP.vue <template> <div id="app"> <router-link to="/main">首页</router-link> <!--该组件中也具有路由配置--> <router-link to="/content">内容页</router-link> <router-view></router-view> </div> </template> <script> export default { name: 'App', } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style> 19、参数传递及重定向参数传递
方式一：
通过router-link中的to中的另一个属性params传递传递参数 <router-link :to="{name:'user',params:{id:1}}">用户信息页</router-link> 路由配置设置 path: '/content/user/:id', //后面直接加上/:d 视图展示 {{$route.params.id}}方式二：
通过router-link中的to中的另一个属性params传递传递参数 <router-link :to="{name:'user',params:{id:1}}">用户信息页</router-link> 路由配置设置，加上props:true path: '/content/user/:id', props:true 视图展示 <template> <div> <h1>用户信息页</h1> {{$route.params.id}} {{id}} <!--直接用绑定的id取值--> </div> </template> <script> export default { props:['id'], //加上 name: "user" } </script> <style scoped> </style>重定向
重定向去首页 { path: '/gohume', redirect:'/main' //重定向会首页 } 20、404与路由钩子路由模式：
hash： 路径带 # 符号， 如 http://localhost/#/userhistory：路径不带 # 符号，如http://localhost/user当不想让路由带有 # 符号路由配置为加上：mode : 'history'
export default new VueRouter({ mode:'history', //不带 # 符号 routes:[ {//路由路径 path: '/content', //路由名称 name: 'content', //跳转到的组件 component:Content }为处理404创建一个视图组件，当资源不存在时显示：
<template> <h1>404,资源访问不存在！！！</h1> </template> <script> export default { name: "notfind" } </script> <style scoped> </style> 路由配置 { //当请求没有匹配时就会到404组件 path : '*', component : Notfind }登录时请求操作且带参数
methods:{ onsubmit(forname){ //为表单提供验证功能 this.$refs[forname].validate((valid)=>{ if(valid){ //使用vue-router路由到指定页面，该方法称为编程式导航 this.$router.push("/main/"+this.form.user); //带参数push到首页 }else { this.dialogVisible=true; return false; } }); } }路由钩子与异步请求
beforeRouterEnter：在路由进入之前执行beforeRouterLeave：在路由离开前执行 <script> export default { name: "Content", beforeRouteEnter:(to,from,next)=>{ console.log("进入路由前"); next(); }, beforeRouteLeave:(to,from,next)=>{ console.log("离开路由前"); next(); } } </script>参数说明：
**to：**路由要跳转的路径信息**from：**路由跳转前的路径信息**next：**路由控制参数 next()跳入下一个页面next(’/path’) 改变跳转方向，使其跳到另一个路由next(false) 返回原来的页面next((vm)=>{}) 仅在beforeRouterEnter中使用，vm是组件实例，可实现自定义事件，即可拿到其他组件中的方法 20.1 异步请求与钩子1、安装Axios：cnpm install axios -s
? npm install --save vue-axios
2、main.js引用Axios
import axios from "axios" import Vueaxios from 'vue-axios' Vue.use(Vueaxios,axios);3、在static中准备json数据
{ "name": "java学习", "address": { "street": "北京冬奥会", "city": "beijing", "country": "中国" }, "links": [ { "h1": "bei" },{ "h2": "jing" } ] }4、在beforeRouterEnter进行异步请求JSON数据
<script> export default { name: "Content", beforeRouteEnter:(to,from,next)=>{ console.log("进入路由前"); next(vm => { vm.getData(); //进入路由前执行getData方法 }); }, beforeRouteLeave:(to,from,next)=>{ console.log("离开路由前"); next(); }, methods : { getData:function (){ //axios请求数据 this.axios({ method : 'get', url:'http://localhost:8080/static/mock/data.json' }).then(function (response){ console.log(response); //控制台打印响应的数据 }) } } } </script> 21、总结 vue的基础部分讲完，提高部分可深入研究MVVM+vue（基础，组件，生命周期，插槽，自定义事件）+vue-cli+axios（异步通信）+webpack+vue-router（路由选择）+路由钩子?
? qiumin
l axios -s`
? npm install --save vue-axios
2、main.js引用Axios
import axios from "axios" import Vueaxios from 'vue-axios' Vue.use(Vueaxios,axios);3、在static中准备json数据
{ "name": "java学习", "address": { "street": "北京冬奥会", "city": "beijing", "country": "中国" }, "links": [ { "h1": "bei" },{ "h2": "jing" } ] }4、在beforeRouterEnter进行异步请求JSON数据
<script> export default { name: "Content", beforeRouteEnter:(to,from,next)=>{ console.log("进入路由前"); next(vm => { vm.getData(); //进入路由前执行getData方法 }); }, beforeRouteLeave:(to,from,next)=>{ console.log("离开路由前"); next(); }, methods : { getData:function (){ //axios请求数据 this.axios({ method : 'get', url:'http://localhost:8080/static/mock/data.json' }).then(function (response){ console.log(response); //控制台打印响应的数据 }) } } } </script> 21、总结 vue的基础部分讲完，提高部分可深入研究MVVM+vue（基础，组件，生命周期，插槽，自定义事件）+vue-cli+axios（异步通信）+webpack+vue-router（路由选择）+路由钩子?
? qiumin
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
