<meta charset="utf-8">
一.语言讲解问题
1.代码有些写的不知道什么意思,看了好几遍才知道,写的时间长了都有些忘了。
2.下次讲解一定要有技术含量,不要这个那个,要有操作什么进行什么样的步骤,应该怎样来。
3.步骤要清晰,代码要有条理,知识点儿要稳固。
二.所需要解决的一些问题
1.三元表达式的应用
条件(三元)运算符是 JavaScript 仅有的使用三个操作数的运算符。一个条件后面会跟一个问号(?),如果条件为 truthy ,则问号后面的表达式A将会执行;表达式A后面跟着一个冒号(:),如果条件为 falsy ,则冒号后面的表达式B将会执行。本运算符经常作为 if 语句的简捷形式来使用
var result = flag ? falg : "other"
2.组件化思想的好处 可复用
- 响应式的数据绑定
- 组件化的开发
- 虚拟dom
- mvvm模式 双向绑定
3.组件之间的通信方式 父子组件通信要经常用
- 通过props传递数据
父子通讯中最常见的数据传递方式就是通过props传递数据,就好像方法的传参一样,父组件调用子组件并传入数据,子组件接受到父组件传递的数据进行验证使用。
props可以接受function,所以function也可以以这种方式传递到子组件使用。
- 通过$on传递父组件方法
通过$on传递父组件方法是组件通信中常用的方法传递方式。它可以与通过props传递方法达到相同的效果。相比于props传递function,它更加的直观和显示的表现出了调用关系。
4.生命周期函数 理解脑子里面有图
生命周期的四个状态
creating 状态 ----vue 实例被创建的过程
mounting 状态 ----挂到到真实的 DOM 节点,渲染出html页面
updating 状态 ----如果 data 中的数据改变就会触发对应组件的重新渲染
destroying 状态 ----实例销毁
对应的八个方法
beforeCreate ----el选项 和 data 并未初始化,el、data都还是 undefined
created ----实例创建成功,完成了 data 数据的初始化,el选项还是是undefined,data已经定义,这里可以调用接口请求数据,为挂载到el选项对应的dom做准备
beforeMount ----完成了 el 初始化,date数据还未挂载到el选项对应的dom
mounted ----date数据挂载到el选项对应的dom,模版中的 data 数据直接显示出来了,完成挂载
beforeUpdate ----当 data 数据发生变化调用,发生在对应组件的重新渲染之前
updated ----触发对应组件的重新渲染
beforeDestroy ----在 vue 实例销毁之前调用,此时实例仍然可用
destroyed ----在 vue 实例销毁之后调用,vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁
5.如何用脚手架创建vue项目 项目的各个文件夹的用处各是什么
利用脚手架创建项目的前提条件是已经安装node并且可以正常使用npm命令,
如果没有安装node那么就需要先安装node
npm(node package manager)是nodejs的包管理器,用于node插件管理(包括安装、卸载、管理依赖等)。所以安装完node.js后,自带npm。
安装vue-cli
npm install vue-cli -g -g是全局安装 可以在控制台输入 vue 看是否安装成功
创建项目
cd到相应目录,命令行:vue init webpack my-project
1、显示Project nanme 项目名 回车(项目名不允许使用大写)
2、project description 后面可以写上描述,或者直接回车
3、Author 后面可以写作者也可以回车 (如果配置过git会自动获取git的name)
4、Install vue-router? 选择Y(官方推荐的路由插件,几乎每个项目都用得到)
5、User ESLint to lint your code? 选Y(是否启用eslint检测规则,如果不是公司的大型项目或者多人共同开发博主感觉没有必要安装)
6、Set up unit tests? 问的是否要测试 选N
7、Setup e2e tests with Nightwatch? 选N( 用Nightwatch设置E2E测试?)
8、Should we run npm install for you after the project has been created? (recommended) (Use arrow keys) 选择使用npm、还是yarn安装,一般都是直接回车就好
运行
cd到目录下面 ,npm run (dev 或者 serce 二选一 看版本型号)
<meta charset="utf-8">
[图片上传失败...(image-f1972-1630152245096)]
[图片上传失败...(image-1ba539-1630152199288)]
6.vuex状态管理机制
7.路由跳转以及动态传参
- <router-link :to="()"> to指向链接地址
- this.$router.push() push方法可以在history栈中添加一条新的记录,所以用户在点击后退按钮时可以返回
- this.$router.replace() 替换链接 不可返回
- this.router.go(n) n 为正整数或者负整数 向前或向后跳转n个页面
- 路由重定向 每次进入时渲染的页面 {path‘’, redirect:‘、home’ }
8.路由的几种模式
前端路由的核心是:改变视图的同时不会向后端发出请求。
- history 改变当前的 URL ,但浏览器不会立即向后端发送请求。更加美观,刷新的时候,如果后端没有准备会报404
- hash hash 虽然出现在 URL 中,但不会被包含在 http 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面。 即使路由没有全覆盖也不会报404
9.计算属性与方法的具体区别
- 主要是一个是依赖缓存一个不依赖缓存