前端学习之路---vue（三）
-
今日重点 下一篇 vue（四）
* vue组件的使用
* 组件间通信
* vue-router使用
* vue-resource发起http请求
* axios - vue单文件方式 xxx.vue
- 1:准备好配置文件 package.json(包描述文件&& 封装命令npm run dev) + webpack.config.js文件（打包的配置文件）
2:创建index.html（单页应用的页）
3:创建main.js(入口文件)
4:引入vue和相关的文件xxx.vue
5:new Vue(options)
6:options（选项）:
- data
- methods
- components（组件内声明子组件)
- props
7:实例:
- 在组件内（xxx.vue）中的this
- new Vue()
- 事件
+ this.$on(事件名,回调函数(参数))
+ this.$emit(事件名,数据)
+ this.$once(事件名,回调函数(参数)) 就触发一次
+ this.$off(事件名); 取消事件
8:全局
- Vue.component('组件名',组件对象) 在哪里都可以使用
9: 组件传值
- 父传子: 属性作为参数
+ 常量 title="xxx" 子组件声明接收参数 props:['xxx']
+ 变量 :title="num" 子组件声明接收参数 props:['xxx']
- 子传父: vuebus（只能是同一辆车）
+ 先停车到父组件，On一下
+ 再开车到子组件，如果需要的话，emit一下，触发上述时间的回调函数
- 过滤器
* content | 过滤器,vue中没有提供相关的内置过滤器,可以自定义过滤器
* 组件内的过滤器 + 全局过滤器
- 组件内过滤器就是options中的一个filters的属性（一个对象）
+ 多个key就是不同过滤器名,多个value就是与key对应的过滤方式函数体
- `Vue.filter(名,fn)`
* 输入的内容帮我做一个反转
* 例子:父已托我帮你办点事
* 总结
- 全局 ：范围大，如果出现同名时，权利小
- 组件内: 如果出现同名时，权利大，范围小 - 过滤器示例
- 目录结构
-
app.vue
3.index.html
01_过滤器 4.main.js
//引入vue import Vue from 'vue'; //引入app.vue import App from './app.vue'; //创建全局过滤器 Vue.filter('myFilter', function(value) { return '我是全局过滤器'; }); //new Vue new Vue({ el: '#app', render: c => c(App) })5.sub.vue
sub.vue {{'大家好，我是sub' | myFilter}}6.package.json
{ "name": "webpack_class", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev":".\\node_modules\\.bin\\webpack-dev-server --inline --hot --open --port 8888", "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "autoprefixer-loader": "^3.2.0", "babel-core": "^6.25.0", "babel-loader": "^7.1.1", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-es2015": "^6.24.1", "css-loader": "^0.28.4", "file-loader": "^0.11.2", "less": "^2.7.2", "less-loader": "^4.0.5", "style-loader": "^0.18.2", "url-loader": "^0.5.9", "vue-loader": "^13.0.4", "vue-template-compiler": "^2.4.2", "webpack": "^3.4.1", "webpack-dev-server": "^2.6.1" }, "dependencies": { "html-webpack-plugin": "^3.2.0", "vue": "^2.4.2" } }7.webpack.config.js
const htmlWebpackPlugin = require('html-webpack-plugin'); const path = require('path') module.exports = { entry:{ //main是默认入口,也可以是多入口 main:'./src/main.js' }, //出口 output:{ filename:'./build.js', //指定js文件 path: path.join(__dirname,'dist') //最好是绝对路径 //代表当前目录的上一级的dist }, module:{ //一样的功能rules: webpack2.x之后新加的 loaders:[ //require('./a.css||./a.js') {test:/\.css$/, loader:'style-loader!css-loader', //顺序是反过来的2!1 }, { test:/\.(jpg|svg|png|gif)$/, loader:'url-loader?limit=4096&name=[name].[ext]', //顺序是反过来的2!1 //[name].[ext]内置提供的，因为本身是先读这个文件 // options:{ // limit:4096, // name:'[name].[ext]' // } },{//处理ES6的js test:/\.js$/, loader:'babel-loader', //排除 node_modules下的所有 exclude:/node_modules/, options:{ presets:['es2015'],//关键字 plugins:['transform-runtime'],//函数 } },{//解析vue test:/\.vue$/, loader:'vue-loader',//vue-template-compiler是代码上的依赖 } ] }, plugins:[ //插件的执行顺序是依次执行的 new htmlWebpackPlugin({ template:'./src/index.html', }) //将src下的template属性描述的文件根据当前配置的output.path，将文件移动到该目录 ] }8.进入到01_fitter 目录下，进入cmd，执行npm install 安装package.jaon里面的模块产生node_modules目录。然后执行 npm run dev ，页面效果如下：
-
过滤器（二 ）
-
目录与如上
-
app.vue
-
index.html
01_过滤器 -
main.js
//引入vue import Vue from 'vue'; //引入app.vue import App from './app.vue'; //new Vue new Vue({ el: '#app', render: c => c(App) }) -
sub.vue
sub.vue {{'大家好，我是sub' }} -
package.json和webpack.config.js不变，进入到目录下，进入cmd，执行npm install 安装package.jaon里面的模块产生node_modules目录。然后执行 npm run dev ，页面效果如下：：
-
获取DOM元素
* 救命稻草, 前端框架就是为了减少DOM操作，但是特定情况下，也给你留了后门
* 在指定的元素上，添加ref="名称A"
* 在获取的地方加入 this.$refs.名称A
- 如果ref放在了原生DOM元素上，获取的数据就是原生DOM对象
+ 可以直接操作
- 如果ref放在了组件对象上，获取的就是组件对象
+ 1:获取到DOM对象,通过this.$refs.sub.$el,进行操作
- 对应的事件
+ created 完成了数据的初始化，此时还未生成DOM，无法操作DOM
+ mounted 将数据已经装载到了DOM之上,可以操作DOM -
mint-ui
* 组件库
* 饿了么出品,element-ui 在PC端使用的
* 移动端版本 mint-ui
* https://mint-ui.github.io/#!/zh-cn
* 注意:
- 如果是全部安装的方式
+ 1:在template中可以直接使用组件标签
+ 2:在script中必须要声明，也就是引入组件对象（按需加载） -
mint-ui案例
-
目录结构
-
app.vue
返回 关闭 1 2 3 -
index.html
01_过滤器 -
main.js
//引入vue import Vue from 'vue'; //引入app.vue import App from './app.vue'; //引入mint-ui import MintUi from 'mint-ui'; //引入样式 import '../node_modules/mint-ui/lib/style.css'; //安装插件 Vue.use(MintUi); //use实际操作 //1: 组件库，在内部注册了各种全局组件 //2: 插件, 挂载属性，为了方便this.可以使用到其功能 //new Vue new Vue({ el: '#app', render: c => c(App) }) -
package.json和webpack.config.js不变，进入03 目录下，进入cmd，执行npm install ,如果没有mint-ui的话要安装mint-ui，命令为npm install mint-ui， 安装package.jaon里面的模块产生node_modules目录。然后执行 npm run dev ，页面效果如下：
-
vue-router
* 前端路由 核心就是锚点值的改变，根据不同的值，渲染指定DOM位置的不同数据
* ui-router:锚点值改变，如何获取模板？ajax、
* vue中，模板数据不是通过ajax请求来，而是调用函数获取到模板内容
* 核心：锚点值改变
* 以后看到vue开头，就知道必须Vue.use
* vue的核心插件:
- vue-router 路由
- vuex 管理全局共享数据
* 使用方式
- 1:下载 `npm i vue-router -S`
- 2:在main.js中引入 `import VueRouter from 'vue-router';`
- 3:安装插件 `Vue.use(VueRouter);`
- 4:创建路由对象并配置路由规则
+ `let router = new VueRouter({ routes:[ {path:'/home',component:Home} ] });`
- 5:将其路由对象传递给Vue的实例，options中
+ options中加入 `router:router`
- 6:在app.vue中留坑 `` -
命名路由
* 需求，通过a标签点击，做页面数据的跳转
* 使用router-link标签
- 1:去哪里 `去北京 `
- 2:去哪里 `去北京 `
+ 更利于维护，如果修改了path，只修改路由配置中的path，该a标签会根据修改后的值生成href属性 -
参数router-link
* 在vue-router中，有两大对象被挂载到了实例this
* $route(只读、具备信息的对象)、$router(具备功能函数)
* 查询字符串
- 1:去哪里 `xxx `
- 2:导航(查询字符串path不用改) `{ name:'detail' , path:'/detail',组件}`
- 3:去了干嘛,获取路由参数(要注意是query还是params和对应id名)
+ `this.$route.query.id`
* path方式
- 1:去哪里 `xxx `
- 2:导航(path方式需要在路由规则上加上/:xxx)
- `{ name:'detail' , path:'/detail/:name',组件}`
- 3:去了干嘛,获取路由参数(要注意是query还是params和对应name名)
+ `this.$route.params.name` -
vue-router案例
-
目录结构
-
app.vue
-
home.vue
我是主页 -
index.html
Document -
main.js
-
//引入一堆 import Vue from 'vue'; import VueRouter from 'vue-router'; //主体 import App from './components/app.vue'; import Home from './components/home.vue' //安装插件 Vue.use(VueRouter); //挂载属性 //创建路由对象并配置路由规则 let router = new VueRouter({ //routes routes: [ //一个个对象 { path: '/home', component: Home } ] }); //new Vue 启动 new Vue({ el: '#app', //让vue知道我们的路由规则 router: router, //可以简写router render: c => c(App), }) -
package.json和webpack.config.js不变，进入到目录下，进入cmd，执行npm install 安装package.jaon里面的模块产生node_modules目录。然后执行 npm run dev ，页面效果如下：
记住，在main.js里import了什么就要安装什么，所以别忘了安装vue-router
-
vue-router 和参数案例
-
目录结构
-
app.vue
头部底部 -
detail.vue
详情 -
list.vue
查询字符串列表:-
{{hero.name}}
查看
-
{{hero.name}}
-
index.html
Document -
main.js
//引入一堆 import Vue from 'vue'; import VueRouter from 'vue-router'; //主体 import App from './components/app.vue'; //路由切换页面 import List from './components/list.vue' import Detail from './components/detail.vue' //安装插件 Vue.use(VueRouter); //挂载属性 //创建路由对象并配置路由规则 let router = new VueRouter({ //routes routes: [ //一个个对象 { name: 'list', path: '/list', component: List }, //以下规则匹配 /detail? xxx = xx & xxx = xxx 多少个查询字符串都不影响 //查询字符串path不用改 { name: 'detail', path: '/detail', component: Detail }, // // {name:'detail',params:{id:index} } -> /detail/12 { name: 'detail', path: '/detail/:id', component: Detail } ] }); -
package.json和webpack.config.js不变，进入到目录下，进入cmd，执行npm install 安装package.jaon里面的模块产生node_modules目录。然后执行 npm run dev ，页面效果如下：
记住，在main.js里import了什么就要安装什么，所以别忘了安装vue-router
- 音乐和电影案例
- 目录结构
-
app.vue
头部底部 -
movie.vue
我是电影 -
music.vue
我是音乐 -
index.html
Document -
main.js
//引入一堆 import Vue from 'vue'; import VueRouter from 'vue-router'; //主体 import App from './components/app.vue'; //路由切换页面 import Music from './components/music.vue' import Movie from './components/movie.vue' //安装插件 Vue.use(VueRouter); //挂载属性 //创建路由对象并配置路由规则 let router = new VueRouter({ //routes routes: [ //一个个对象 { name: 'music', path: '/music', component: Music }, { name: 'movie', path: '/movie', component: Movie } ] }); //new Vue 启动 new Vue({ el: '#app', //让vue知道我们的路由规则 router, //可以简写router render: c => c(App), }) -
package.json和webpack.config.js不变，进入到目录下，进入cmd，执行npm install 安装package.jaon里面的模块产生node_modules目录。然后执行 npm run dev ，页面效果如下：
别忘了main.js里的模块安装
-
编程导航
* 不能保证用户一定会点击某些按钮
* 并且当前操作，除了路由跳转以外，还有一些别的附加操作
* this.$router.go 根据浏览器记录 前进1 后退-1
* this.$router.push(直接跳转到某个页面显示)
- push参数: 字符串 /xxx
- 对象 : `{name:'xxx',query:{id:1},params:{name:2} }` -
复习
` 作为一个DOM上的标识
* 过滤器，全局，组件内
* 获取DOM元素 ，在元素上ref="xxx"
* 在代码中通过this.$refs.xxx 获取其元素
- 原生DOM标签获取就是原生DOM对象
- 如果是组件标签，获取的就是组件对象 $el继续再获取DOM元素
* 声明周期事件(钩子)回调函数
- created: 数据的初始化、DOM没有生成
- mounted: 将数据装载到DOM元素上，此时有DOM
* 路由
- `window.addEventListener('hashchange',fn);`
- 根据你放`
- 最终当锚点值改变触发hashchange的回调函数，我们将指定的模板数据插入到DOM标识上
-
重定向和404
* 进入后，默认就是/
* 重定向 `{ path:'/' ,redirect:'/home' }`
* 重定向 `{ path:'/' ,redirect:{name:'home'} }`
* 404 : 在路由规则的最后的一个规则
- 写一个很强大的匹配
- `{ path:'*' , component:notFoundVue}` -
重定向和404案例
-
目录结构
-
app.vue
头部底部 -
home.vue
我是首页 -
index.html
Document -
main.js
//引入vue import Vue from 'vue'; import VueRouter from 'vue-router'; //引入 import App from './app.vue'; //引入notFoundVue import NotFound from './notFound.vue'; import Home from './home.vue'; //引入home //安装插件 Vue.use(VueRouter); //创建路由对象配置路由规则 let router = new VueRouter(); router.addRoutes([ //重定向 // { path: '/', redirect: '/home' }, // { path: '/home', component: Home } { path: '/', redirect: { name: 'home' } }, { name: 'home', path: '/home', component: Home }, // 最终无法匹配 -> 404 { path: '*', component: NotFound } ]); //构建vue实例 new Vue({ el: '#app', router, render: c => c(App) }) -
notFound.vue
您要访问的页面出去旅行了。。。 -
package.json和webpack.config.js不变，进入到目录下，进入cmd，执行npm install 安装package.jaon里面的模块产生node_modules目录。然后执行 npm run dev ，页面效果如下：
直接重定向到home界面，如果不是home，则为：
-
多视图
* 以前可以一次放一个坑对应一个路由和显示一个组件
- 一次行为 = 一个坑 + 一个路由 + 一个组件
- 一次行为 = 多个坑 + 一个路由 + 多个组件
* components 多视图 是一个对象 对象内多个key和value
- key对应视图的name属性
- value 就是要显示的组件对象
* 多个视图`` -> name就是default
* `` -> name就是xxx -
多视图案例
-
目录结构
-
app.vue
我是头部啊
我是底部啊 -
footer.vue
底部啊 -
header.vue
头部啊 -
index.html
Document -
main.js
//引入一堆 import Vue from 'vue'; import VueRouter from 'vue-router'; //主体 import App from './components/app.vue'; //路由切换页面 import header from './components/header.vue' import footer from './components/footer.vue' //注册全局头组件 // Vue.component('headerVue', header); // Vue.component('footerVue', footer); //注册全局底部组件 //安装插件 Vue.use(VueRouter); //挂载属性 //创建路由对象并配置路由规则 let router = new VueRouter({ //routes routes: [{ path: '/', components: { header: footer, default: header, footer: footer } } ] }); //new Vue 启动 new Vue({ el: '#app', //让vue知道我们的路由规则 router, //可以简写router render: c => c(App), }) -
package.json和webpack.config.js不变，进入到目录下，进入cmd，执行npm install 安装package.jaon里面的模块产生node_modules目录。然后执行 npm run dev ，页面效果如下：
-
嵌套路由
* 用单页去实现多页应用，复杂的嵌套路由
* 开发中一般会需要使用
* 视图包含视图
* 路由父子级关系路由期组件内包含着第一层router-view { name:'music' ,path:'/music', component:Music , children:[ 子路由的path /就是绝对路径 不/就是相对父级路径 {name:'music.oumei' ,path:'oumei', component:Oumei }, {name:'music.guochan' ,path:'guochan', component:Guochan } ] } -
vue-resource(了解)
* 可以安装插件，早期vue团队开发的插件
* 停止维护了，作者推荐使用axios
* options预检请求，是当浏览器发现跨域 + application/json的请求，就会自动发起
* 并且发起的时候携带了一个content-type的头 -
axios
* https://segmentfault.com/a/1190000008470355?utm_source=tuicool&utm_medium=referral
* post请求的时候，如果数据是字符串 默认头就是键值对，否则是对象就是application/json
* this.$axios.get(url,options)
* this.$axios.post(url,data,options)
* options:{ params:{id:1}//查询字符串, headers:{ 'content-type':'xxxxx' },baseURL:'' }
* 全局默认设置 ：Axios.defaults.baseURL = 'xxxxx';
* 针对当前这一次请求的相关设置 -
axios案例
-
目录结构
-
app.vue
{{data}} -
index.html
Document -
main.js
//引入一堆 import Vue from 'vue'; //主体 import App from './components/app.vue'; //引入 import Axios from 'axios'; Axios.defaults.baseURL = 'http://182.254.146.100:8899/api/'; //给Vue原型挂载一个属性 Vue.prototype.$axios = Axios; //new Vue 启动 new Vue({ el: '#app', render: c => c(App), }) -
package.json和webpack.config.js不变，进入到目录下，进入cmd，执行npm install 安装package.jaon里面的模块产生node_modules目录。然后执行 npm run dev ，页面效果如下：
由于服务器关了，所以没有请求到数据。再三强调，一定要安装main.js里的模块，所以要安装axios。
-
如何练习
* 1:路由核心
- 路由基本使用
- 任选一种路由参数的方式(查询字符串)
- 404(路由匹配规则)
- 嵌套路由
- 编程导航
* 2:http请求
- axios 发起get、post请求 （300）
- 获取 http://182.254.146.100:8899/api/getcomments/300?pageindex=1
- 发起 http://182.254.146.100:8899/api/postcomment/300
- axios挂载属性方式