渐进式框架。其设计为自底向上逐层应用。Vue只关心视图层。
输出：Hello Vue!
- 什么是DOM系统
除了顶级元素html外，其他所有元素都被包含在另一个元素中。
DOM结构树就是一颗倒长的树
js控制台中，修改对应值，浏览器中你会看到对应的修改
v-if：元素是否显示；
v-for：渲染一个项目列表
v-bind: 简：数据绑定
v-on：简@ 添加一个事件监听器
v-model：实现表单输入和应用状态之间的双向绑定
1、router-link
<router-link :to="{name:'home'}">
<router-link :to="{path:'/home'}"> //name,path都行, 建议用name
2、this.$router.push() (函数里面调用)
1. 不带参数
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
2. query传参
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
// html 取参 $route.query.id
// script 取参 this.$route.query.id
3. params传参
this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name，若是用path，则params会被忽略，不生效
4. query和params区
query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在
params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失
3、this.$router.replace() (用法同上,push)
4、this.$router.go(n) 跳转到指定页面
拓展：区别this.$router和this.$route
1、this.$router：表示一个全局路由对象，vue-router的实例，提供addRoutes、back等方法，相当于一个路由的管理者角色；
2、this.$route:表示当前路由对象，包含具体的路由名称，path、query、params等属性，其实就是routes(new Router时声明routes)里面的一条具体路由。
1、全局的路由钩子函数：beforeEach、beforeResolve、afterEach（一般在index.js中的router对象）
2、单个的路由钩子函数：beforeEnter（路由守卫只有一个）
3、组件内的路由钩子函数：beforeRouteEnter、beforeRouteLeave（定时器的清除，东西保存等）、beforeRouteUpdate
是webpack的loader，是vue文件的加载器，主要用来处理vue组件文件，配合webpack和及相关loader，来进行编译模板，scoped CSS和热加载
是vue的模板语法，是一种描述的视图的标记语言，在通过vue-template-compiler解析成render函数，通过vnode和diff算法，统一替换dom形成真实视图
template的作用就是模板占位符，可帮助我们包裹元素，但在循环的过程中，不会template被渲染到页面上
- vue-cli脚手架搭建项目；
- 配置路由，用axios封装网络请求
- vuex管理全局路由
- 路由拦截（设置全局的路由钩子来做权限控制）
- 单个通用组件的封装
- 父子之间props数据交互
- vue生命周期
this指的是指当前对象，所以this不是固定不变的。比如在this.query中，此时this指的是app这个实例本身。而在具体的函数中this指的就是axios的回调函数本身。所以在回调函数中使用this.函数，会出现undefined，因为找不到其中函数的属性。所以，我们要在使用回调函数之前将app实例中的属性存储给一个其他值，也就是用that指向this。此时，that即代表app这个实例，this代表axios的回调函数。所以这个时候我们的that.musicList即可以找到相应的属性。同理，当我们的methods在定义函数中自定义了其他函数或者使用其他函数代替了axios回调函数的位置，同样回出现this.musicList找不到属性。
hash和history模式都属于浏览器自身的特性。
hash模式：地址栏中有#， 改变hash不会重新加载页面。因为路由的哈希模式其实是利用Window可以监听onhaschange事件，也就是说你的url中的哈希值（#后面的值）如果有变化，前端是可以做到监听并做一些响应的。
实现原理：
1、url中的hash值知识客户端的一种状态，也就是说向服务器端发出请求时，hash部分不会被发送；
2、hash值的改变，都会在浏览器历史访问中增加一条记录，因此我们能通过浏览器的前进、回退按钮控制hash的切换；
3、通过a标签的点击跳转，url中的hash的值会发生改变；
4、我们可以通过onhaschange事件来监听hash值的改变，从而对页面进行跳转（渲染）
备注：如果该地址需要分享到其他应用中的页面，建议不使用hash。因为其他应用可能不支持url中出现#。
history模式：前端的url必须和实际向后端发送的请求的url一致，比如：htttp://localhost/book/id，如果后端缺少对/book/id的路由处理，将返回404错误。所有一般需要后端配合将所有的访问都指向index.html，否则用户刷新页面，会导致出现404错误。
在html4中，已经支持window.history对象控制页面历史记录跳转，常用方法包括：
history.forward()：在历史记录中前进一步；
history.back()：在历史记录中后退一步；
history.go(n)：在历史记录中跳转n步骤，n=0位刷新本页面，n=-1为后退一页
在html5中，window.history对象得到了扩展，新增的api包括有：
- ：向历史记录中追加一条记录
- ：替换当前页在历史记录中的信息。
- ：是一个属性，可以得到当前页的state信息。
- ：是一个事件，在点击浏览器后退按钮或js调用、、时触发。监听函数中可传入一个event对象，即为通过或方法传入的data参数
实例：分别通过hash和history两种模式去获取url中的参数：
hash模式：
history模式：
1、首先安装:npm install qs 或者yarn add qs；
2、然后可以按需引入：import qs from "qs";
3、主要有两个方法：qs.parse()和qs.stringify()
方法一：qs.stringify()将对象 序列化成URL的形式，以&进行拼接
方法二：qs.parse()将序列化的内容拆分成一个个单一的对象
备注：区别qs.stringify() 和JSON.stringify()
component: resolve => require(['@/view/My/Index.vue'], resolve) 与component: index区别
懒加载：component: resolve => require(['@/view/My/Index.vue'], resolve)
用require这种方式引入的时候，会将你的component分别打包成不同的js，加载的时候也是按需加载，只用访问这个路由网址时才会加载这个js
非懒加载：component: index
如果用import引入的话，当项目打包时路由里的所有component都会打包在一个js中，造成进入首页时，需要加载的内容过多，时间相对比较长
vue的路由配置文件(routers.js)，一般使用import引入的写法，当项目打包时路由里的所有component都会打包在一个js中，在项目刚进入首页的时候，就会加载所有的组件，所以导致首页加载较慢，
而用require会将component分别打包成不同的js，按需加载，访问此路由时才会加载这个js，所以就避免进入首页时加载内容过多
keep-alive是vue内置的一个组件，而这个组件的作用就是能够缓存不活动的组件。一般情况下，组件进行切换的时候，默认会进行销毁，如果有需求，某个组件切换后不进行销毁，而是保存之前的状态，那么就可以利用keep-alive来实现
keep-alive中组件不进行销毁，其中组件的值也被缓存下来了，所以当我们只想缓存组件时，我们就需要用到如下属性：
- include 值为字符串或者正则表达式匹配的组件name会被缓存。
- exclude 值为字符串或正则表达式匹配的组件name不会被缓存
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。
备注：引出问题：为什么使用$nextTick
可以用 setTimeout 替换 $nextTick，形如用 setTimeout(fn, 0) 代替 $nextTick(fn)，既然可以使用 setTimeout 替换 $nextTick 那么为什么不用 setTimeout 呢？
原因就在于 setTimeout 并不是最优的选择，$nextTick 的意义就是它会选择一条最优的解决方案，即优先选择微任务。
表示一个变量，在es6中${XXX}来在字符串中插入变量
问题：v-model属性是双向数据绑定，而prop是单向绑定，不能更改数据，只能由父组件传输过来 ，所以，当子组件想要改变父组件传过来的值的属性时，就会报错，典型的就是父组件传值给子组件修改v-model的值时会报错或者不生效.
解决：
1、父组件使用：msg.sync="aa" 子组件使用$emit('update:msg', 'msg改变后的值xxx')
2、父组件传值直接传对象，子组件收到对象后可随意改变对象的属性，但不能改变对象本身。
3、父组件使用： v-model
例子：利用element中el-drawer，设置起显示隐藏
子组件：Drawer.vue
父组件
- props
- event bus
- $emit
- vuex
- storage
- provide/inject(优点是不用层层传递了)
理解：scoped，相当于样式私有化，即样式只用于与当前组件，避免组件间样式不互相污染
，可以强制修改默认样式。这种方式可以直接用到有 属性的 style 标签中。
在使用 vue-cli 脚手架构建项目时，会遇到一个构建选项 Vue build，有两个选择， 和 ，如图所示
Runtime + Compiler: recommended for most users
运行程序+编译器：推荐给大多数用户
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere
仅运行程序: 比上面那种模式轻大约 6KB，但是 template (或任何特定于vue的html)只允许在.vue文件中使用——其他地方用需要 render 函数
1）runtime-only 比 runtime-compiler 轻 6kb，代码量更少
2）runtime-only 运行更快，性能更好
3）runtime-only 其实只能识别render函数，不能识别template，.vue 文件中的template也是被 vue-template-compiler 翻译成了render函数，所以只能在.vue里写 template
有关vue中的render函数可以看这篇博客：vue中的render函数
两种模式生成的 脚手架 即（代码模板）主要区别在 main.js 中，其它基本上是一样的：
再看一张图：
runtime + compiler 中 Vue 的运行过程
对于 runtime-compiler 来说，它的代码运行过程是：template -> ast -> render -> virtual dom -> UI
runtime-only 中 Vue 的运行过程
对于 runtime-only来说，它是从 render -> virtual dom -> UI
如果在之后的开发中，你依然使用template，就需要选择
如果你之后的开发中，使用的是.vue文件夹开发，那么可以选择
1.引入js文件
在用的那一页，引入文件
Import tools from ‘https://blog.51cto.com/u_14125/tools.js’
相应的js文件，必须暴露出来
2.引入组件
Import Hello from ‘https://blog.51cto.com/u_14125/components/hello’
3.引入外部组件
npm install --save axios
npm install mint-ui -S
//引入全部组件
import Vue from ‘vue’
import Mint from ‘mint-ui’
Vue.use(Mint)
//按需引入部分组件
Import {Cell,Checklist} from ‘minu-ui’
Vue.component(Cell.name,Cell)
Vue.component(Checklist.name,Checklist)
4.引入外部js插件
Import cookies from ‘js-cookie
require的使用非常简单，它相当于module.exports的传送门，module.exports后面的内容是什么，require的结果就是什么，对象、数字、字符串、函数……
再把require的结果赋值给某个变量，相当于把require和module.exports进行平行空间的位置重叠
优点：
1）实现js文件的异步加载，避免网页失去响应；
2）管理模块之间的依赖性，便于代码的编写和维护。
引入：
在vue的js引入图片，就需要使用require（“路径”）进来
- require 是赋值过程并且是运行时才执行，也就是异步加载。
- require可以理解为一个全局方法，因为它是一个方法所以意味着可以在任何地方执行。
- import 是解构过程并且是编译时执行。
- import必须写在文件的顶部。
require的性能相对于import稍低，因为require是在运行时才引入模块并且还赋值给某个变量，而import只需要依据import中的接口在编译时引入指定模块所以性能稍高
1.this.$router.push()
描述：跳转到不同的url，但这个方法会向history栈添加一个记录，点击后退会返回到上一个页面。
2.this.$router.replace()
描述：同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。
3.this.$router.go(n)
相对于当前页面向前或向后跳转多少个页面,类似 。n可为正数可为负数。正数返回上一个页面
@import '@/assets/css/style.css'会出现如下错误
CSS loader 会把把非根路径的url解释为相对路径， 加~前缀才会解释成模块路径。
所以引入改成 ：@import '~@/assets/css/style.css'
问题：
vue axios跨域请求，在加传递时，发现统一请求触发了两次，第一次是请求
原因：
跨域请求时，浏览器会首先使用方法发起一个预请求，判断接口是否能够正常通讯。如果通讯异常，则不会发送真正的请求，如果测试通讯正常，则开始真正的请求。
嵌套路由就是父路由里面嵌套其他的自路由，父路由有自己的路由导航和路由容器，通过配置children可实现多层嵌套。
父页面：/Home
子页面：/Welcome/Index
按照此代码运行，则访问地址就是http://localhost:8080/Welcome/Index
注意：
若自路由的path的最前面无"/"，则需要添加父路由的路径即可以访问此子路由，则访问路径为：
http://localhost:8080/Home/Welcome/Index
理解：require.context是webpack中，用来创建自己的（模块）上下文，当webpack在构建的时候解析代码中的require.context()
require.context函数接收三个参数：
1. 要搜索的文件夹目录
2. 是否还应该搜索它的子目录
3. 以及一个匹配文件的正则表达式语法：require.context(directory, useSubdirectories = false, regExp = /^https://blog.51cto.com/u_14125//);
示例：
1、针对文件夹/api下所有js文件
2、获取api下所有js文件
打印结果：
主要涉及：
push、pop、unshift、shift、slice、filter过滤函数、map高阶函数、reduce高阶函数
- path.resolve() 理解
path.resolve方法用于将相对路径转为绝对路径
2. __dirname和__filename理解
Node.js中的文件路径大概有 __dirname, __filename, process.cwd(), https://blog.51cto.com/u_14125/ 或者 https://blog.51cto.com/
到此这篇vue.js钩子函数（vue钩子函数作用）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/52959.html