vue常用属性汇总
1.vue实例常用属性
（1），数据
data：vue实例的数据对象
components：vue实例配置局部注册组件
（2）类方法
computed：计算属性
watch：侦听属性
filters：过滤器
render：渲染函数，创建虚拟DOM
（3）生命周期
created：在实例创建完成后被立即调用，完成初始化操作
mounted：el挂载到vue实例上了，开始业务逻辑操作
beforeDestory：实例销毁之前调用
2.vue组件
props：用于接收来自父组件的数据
template：组件模板
面试小题
1.active-class是哪个组件的属性？嵌套路由怎么定义？
答：vue-router模块的router-link组件
嵌套路由：
import Vue from ‘vue’
import VueRouter from ‘vue-router’
import login from ‘@/html/login’
import taAutonym from ‘@/html/taAutonym’
Vue.use(VueRouter)
var routes = [
{path: ‘/’, name: ‘login’, meta: {title: ‘登录’}, component: login},
{path: ‘/taAutonym’, meta: {title: ‘实名认证’}, taAutonym: ”, component: taAutonym}
]
var router = new VueRouter({ mode: ‘history’, routes: routes })
router.beforeEach((to, from, next) => {
if (to.meta.title) { document.title = to.meta.title } next() })
export default router
2.怎么定义vue-router的动态路由？怎么获取传过来的动态参数？
答：在router目录下的index.js文件中，对path属性加上/:id，使用router对象的param.id
如：
html为：
_this.$router.push({path: ‘/taAutonym/1‘}) 动态添加
<dt><a class=”tlBtn” v-if=”ok” href=”/taAutonym/1″ @click=”popoutHint”>立即登陆</a></dt> 标签直接添加
路由内：
{path: ‘/taAutonym/:num‘, meta: {title: ‘实名认证’}, taAutonym: ”, component: taAutonym}
3、vue-router有哪几种导航钩子
答：三种
第一种是全局导航钩子：
router.beroreEach(to,from,next),作用：跳转前进行判断拦截。
to:route即将要进入的目标路由对象
from:route当前导航正要离开的路由
next:function一定要调用该方法来resolve这个钩子，执行效果依赖next方法的调用参数
第二种：组件内的钩子
你可以在路由组件内直接定义以下路由导航钩子
beforeRouteEnter
beforeRouteUpdate(2.2新增)
beforeRouteLeave
如：const Foo = { template: `…`, beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this` ，
beforeRouteEnter钩子不能访问this,因为钩子在导航确认前被调用，
因此即将登场的新组件还没被创建，不过你可以通过传一个毁掉给next来访问组件实例 在导航被确认的时候执行回调，
并且把组件实例作为回调方法的参数
如：beforeRouteEnter (to, from, next) { next(vm => { // 通过 `vm` 访问组件实例 }) }
你可以 在 beforeRouteLeave 中直接访问 this。
这个 leave 钩子通常用来禁止用户在还未保存修改前突然离开。
可以通过 next(false) 来取消导航
// 因为当钩子执行前，组件实例还没被创建 },
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this` },
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this` } }
第三种：单独路由独享组件
你可以在路由配置上直接定义beforeEnter钩子：
如 const router = new VueRouter({ routes:
[ { path: ‘/foo’, component: Foo, beforeEnter: (to, from, next) => { // … }, beforeEnter: (route) => { // … } } ] });
这些钩子与全局before钩子的方法参数是一样的
4.超链接a与router-link 的区别
<dt><router-link class=”tlBtn” v-if=”ok” to=”/myHome”>我的家</router-link></dt>
<dt><a class=”tlBtn” v-if=”ok” href=”/myHome”>我的家</a></dt>
表面实现的效果都能跳转到myHome页面，
但是之间的区别是 <router-link>组件支持用户在具有路由功能的应用中（点击）导航。通过to属性指定目标地址，
默认渲染成带有正确链接的<a>标签，可以通过配置tag属性生成别的标签。
另外，当目标路由成功激活时，链接元素自动设置一个表示激活的css类名 <router-link> 比起写死的 <a href="..."> 会好一些，
理由如下： 无论是 HTML5 history 模式还是 hash 模式，它的表现行为一致，
所以，当你要切换路由模式， 或者在 IE9 降级使用 hash 模式，无须作任何变动。
在 HTML5 history 模式下，router-link 会守卫点击事件，让浏览器不再重新加载页面。 当你在 HTML5 history 模式下使用 base 选项之后，所有的 to 属性都不需要写（基路径）了。
五、webpack基本配置（本段整理总结自:https://www.cnblogs.com/yangmin01/p/6285742.html）
1.设置webpack-dev-server
在开发时，每次更改文件后要运行npm run build 来重新编译、打包文件，无聊又麻烦。我们可以设置 webpack-dev-server来让他自动运行。webpack-dev-server 主要是启动了一个使用 express 的 Http服务器 ，它的作用主要是用来伺服资源文件 。此外这个 Http服务器 和 client 使用了 websocket 通讯协议，原始文件作出改动后， webpack-dev-server 会实时的编译，但是最后的编译的文件并没有输出到目标文件夹。在webpack.config.js配置文件中增加入口命令可以使文件变化时浏览器自动刷新。
首先要安装它 npm install webpack-dev-server --save-dev。然后在package.json文件的scripts部分增加快捷指令：
1 "scripts": {
2 "dev": "webpack-dev-server --devtool eval --port 7070 --progress --colors --compress --hot --inline --content-base ./build"
3 },
当你在命令行里运行 npm run dev 的时候他会执行 dev 属性里的值，即可启动webpack服务器监听。这些指令的意思：
webpack-dev-server：在 localhost:7070 建立一个 Web 服务器。
–devtool eval: 为你的代码创建原地址。当有任何报错的时候可以让你更精确的定位到文件和行号。
–progress： 显示编译的输出内容进度。
–compress: 启用gzip压缩。
–hot:热替换，开发过程中任何前端代码的更改都会实时的在浏览器中表现出来，不需要手动刷新。
–colors：显示编译的输出内容颜色。
–inline：webpack提供两种自动刷新模式 iframe/inline。默认iframe。
–content-base ./build:指向设置的输出目录，即build文件夹。
详细请参考webpack-dev-server配置文档。
如果你还要进行后端开发，就要采用双服务器模式：一个后端服务器和一个资源服务器（即Webpack-dev-server)。配置双服务器热替换模式首先需要修改wepack.config.js的entry属性值：
entry:[
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:7070',
path.resolve(__dirname,'src/js/entry.js')
],
运行npm run dev打开服务器，在浏览器中访问http://localhost:7070 即可看到效果。
2.loader
webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。Loader 可以理解为模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。这样，我们就可以通过 require 来加载任何类型的模块或文件，比如 CoffeeScript、 JSX、 LESS 或图片。Loader 本身也是运行在 node.js 环境中的 JavaScript 模块，它通常会返回一个函数。大多数情况下，我们通过 npm 来管理 loader，但是你也可以在项目中自己写 loader 模块。详细参考loaders。
一般loader 一般以xxx-loader的方式命名，xxx代表了这个 loader 要做的转换功能，比如css-loader。Loader 可以在require()引用模块的时候添加，也可以在 webpack 全局配置中进行绑定，还可以通过命令行的方式使用。例如页面中要引入样式文件main.css，我们可以将main.css看成一个模块，然后css-loader会遍历 CSS 文件，然后找到 url() 处理他们，style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。
- 通过require()添加loader，例如在入口文件entry.js中引入如下：
require("!style!css!../src/css/main.css") // 载入 main.css,多个loader之间用‘!’连接
- 在webpack.config.js中全局配置：添加config.module
1 var webpack = require("webpack"); 2 var path = require('path'); 3 4 var config = { 5 entry:[ 6 'webpack/hot/dev-server', 7 'webpack-dev-server/client?http://localhost:7070', //增加的入口点使文件改变时浏览器自动刷新当然你也可以直接在你 index.html 引入这部分代码:<script src="http://localhost:7070/webpack-dev-server.js"></script> 8 path.resolve(__dirname,'src/js/entry.js') 9 ], 10 output:{ 11 path: path.resolve(__dirname, 'build'), 12 publicPath:'../', 13 filename: 'js/bundle.[chunkhash:8].js', 14 chunkFilename:"js/[name].[chunkhash:8].js" 15 }, 16 module:{ 17 loaders:[ 18 {//js、jsx 19 test: /.jsx?$/, 20 exclude:/node_modules/,//排除node_modules中的库文件，加快编译速度 21 loader: 'babel', 22 query:{ 23 presets:['es2015', 'react'] 24 } 25 }, 26 {//css 27 test: /.css$/, 28 loader: ExtractTextPlugin.extract("style", "css")//多个加载器通过!链接,可忽略加载器后缀“-loader” 29 }, 30 {//sass,还需要安装node-sass 31 test: /.scss$/, 32 loader: 'style!css!sass' 33 }, 34 35 {//less,还需要安装less 36 test: /.less$/, 37 loader: 'style!css!less' 38 }, 39 {//url-loader:图片、字体图标加载器，是对file-loader的上层封装,支持base64编码。传入的size（也有的写limit) 参数是告诉它图片如果不大于 25KB 的话要自动在它从属的 css 文件中转成 BASE64 字符串. 40 test: /.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/, 41 loader: 'url?limit=25000&name=[name].[ext]' 42 } 43 ] 44 }, 45 }; 46 47 module.exports = config;
上面是常用的loader。点此查看更多loader。补充一点编译sass文件除了需要安装sass-loader，还要安装node-sass。但安装node-sass时由于网络原因可能会提示下载SASS_BINARY二进制文件失败，解决办法：
- 在https://github.com/sass/node-sass/releases/tag/v3.4.2，根据报错信息下载相应版本文件，假设放在E盘根目录下。
- 回到命令行安装界面。设置SASS_BINARY_PATH环境变量 set SASS_BINARY_PATH=E:/win32-ia32-46_binding.node 文件名根据自己下载的文件自行修改。
- 再次运行安装命令：npm install node-sass。
- 在项目的文件夹的node_modules/node-sass文件夹下新建文件夹vendorwin32-ia32-46。
- 将文件win32-ia32-46_binding.node改名为binding.node放在文件夹vendorwin32-ia32-46下
3.插件plugins
插件可以完成更多loader不能完成的任务。在webpack.config.js中增加config.plugins：
1 var webpack = require("webpack");
2 var path = require('path');
3 var ExtractTextPlugin = require('extract-text-webpack-plugin');
4 var HtmlWebpackPlugin = require('html-webpack-plugin');
5
6 var config = {
7 //省略entry、output等
8 plugins:[//给打包输出的文件加banner
9 new webpack.BannerPlugin("The file is creted by yangmin.--" + new Date()),
10 new webpack.ProvidePlugin({
11 $: "webpack-zepto",
12 }),
13 /*插件：单独使用style标签加载css文件*/
14 new ExtractTextPlugin("css/[name].css"),//设置其路径(路径相对于path)
15 /*插件：动态生成html，在webpack完成前端资源打包以后，自动将打包后的资源路径和版本号写入HTML中，达到自动化的效果。*/
16 new HtmlWebpackPlugin({
17 filename:'view/index-build.html', //生成的html存放路径，相对于 path
18 template:'src/view/index.html', //html模板路径
19 inject:true, //允许插件修改哪些内容，包括head与body
20 hash:false, //为静态资源生成hash值
21 minify:{ //压缩HTML文件
22 removeComments:false, //移除HTML中的注释
23 collapseWhitespace:false //删除空白符与换行符
24 }
25 })
26 ]
27 };
28 module.export = config;
六：vue-router原理
单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面,
实现这一点主要是两种方式:
1.Hash: 通过改变hash值
2.History: 利用history对象新特性
而在vue-router中，它提供mode参数来决定采用哪一种方式，选择流程如下:
默认Hash–>如果浏览器支持History新特性改用History–>如果不在浏览器环境则使用abstract
选好mode后创建history对象(HashHistory或HTML5History或AbstractHistory)
可见最被青睐的是History模式，理由是: “#”太丑了。。。
基本方法分析:
Hash
1.push()
功能: 设置新的路由添加历史记录并更新视图,常用情况是直接点击切换视图
调用流程:
1 $router.push() //显式调用方法
2 HashHistory.push() //根据hash模式调用,设置hash并添加到浏览器历史记录（window.location.hash= XXX）
3 History.transitionTo() //开始更新
4 History.updateRoute() //更新路由
5 {app._route= route}
6 vm.render() //更新视图
2.replace
功能: 替换当前路由并更新视图，常用情况是地址栏直接输入新地址
流程与push基本一致
但流程2变为替换当前hash （window.location.replace= XXX）不懂此方法的可见: http://www.w3school.com.cn/jsref/met_loc_replace.asp
3.监听地址栏变化
在setupListeners中监听hash变化(window.onhashchange)并调用replace
History
1.push
与hash模式类似，只是将window.hash改为history.pushState
2.replace
与hash模式类似，只是将window.replace改为history.replaceState
3.监听地址变化
在HTML5History的构造函数中监听popState（window.onpopstate）
两种模式对比
History模式的优点:
1.History模式的地址栏更美观。。。
2.History模式的pushState、replaceState参数中的新URL可为同源的任意URL（可为不同的html文件），而hash只能是同一文档
3.History模式的pushState、replaceState参数中的state可为js对象，能携带更多数据
4.History模式的pushState、replaceState参数中的title能携带字符串数据（当然，部分浏览器，例如firefox不支持title，一般title设为null，不建议使用）
缺点:
对于单页面应用来说，理想的场景是仅仅在进入应用时加载页面（例如index.html）,后续的网络操作靠ajax完成，
而不会重新请求页面。
但当用户直接在用户栏输入地址时则会重新请求，当地址带有参数时两者情况不一样
Hash 例如: xxx.com/#/id=5 HTTP请求不会包含后面的hash值，所以请求的仍然是 xxx.com,没有问题
History 例如: xxx.com/id=5 这时请求的便是xxx.com/id=5，如后端没有配置对应id=XXX的路由处理，则会返回404错误。
官方推荐的解决办法是在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。同时这么做以后，服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件。为了避免这种情况，在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。或者，如果是用 Node.js 作后台，可以使用服务端的路由来匹配 URL，当没有匹配到路由的时候返回 404，从而实现 fallback。
原创文章，作者：余 倩倩，如若转载，请注明出处：https://www.pmtemple.com/flyingfish/1038/
微信扫一扫 
支付宝扫一扫 
