基础知识
计算属性computed
具有缓存的作用，当你的属性计算没有任何改变的时候，你多次调用这个计算属性将只执行一次
计算属性中有get、set方法，一般只使用get方法
**event`就表示event对象
v-model双向绑定
当在input中用v-model绑定一个变量时，当input的value改变时，这个变量也将改变
v-on的修饰符
-stop:阻止事件冒泡
用法:@click.stop = 'clickBtn'
-prevent:阻止默认事件：比如a的自动跳转
用法:@click.prevent= 'clickBtn'
-enter:当按下回车键时才执行
用法:@click.enter= 'clickBtn'
-once:只触发一次：比如一个按钮单击多次，只有第一次单击执行
用法:@click.once= 'clickBtn'
v-for使用
//当你只需要获取对象中的value时
{{item}}
//当你只需要获取对象中的value、key时
{{item,key}}
vue虚拟DOM复用问题
计算属性
1.1 计算属性的本质
计算属性由get()、set()两个方法组成
1.2 计算属性和methods属性的区别
计算属性执行多次，只会执行一次，存在缓存
事件监听
1.1 v-on：click和语法糖语法 @click
1.2 如果监听事件的方法需要传入event对象和其他参数，event对象在传入时，可以写成$event
修饰符
- .enter
- .tirm
- .stop
- .once 等修饰符
条件判断
- v-else
- v-if
- v.show
- v-for 等
v-model双向绑定
1.1 当一个input绑定一个变量时，input的value的值会跟随变量的值而改变，反之同理
1.2 修饰符
+ lazy
+ number
+ trim 等
组件化开发
1.1什么叫组件化
组件化开发即是对某些可以进行复用的功能进行封装的标准化工作
1.2数据的存放
- 子组件不能直接访问父组件
- 子组件中有自己的data，而且必须是个函数
- 因为组件是可以复用的，当你是函数时，每次创建的数据都是新的对象，这样组件之间就不会产 生影响
- 在标签内调用vue的方法或属性时，驼峰写法的名字将出现错误
- 解决方案：可以把大写字母换成小写字母 在前面加个
-
- 解决方案：可以把大写字母换成小写字母 在前面加个
- 在注册组件时，组件名不能包含大写字母
1.3父子组件之间的通信
- 父传子使用props属性设置
- 一般父传子props都是一个对象，这样在对象中可以规定传入的数据的类型、默认值等操作
*当你要操作props中的变量时，最好在data:{}属性中在获取一下props中的变量，操作data{}中赋值的变量，不要直接操作props中的变量。
props中的变量主要是获取父组件的数据，如果你在别的地方又操作props中的数据，那么就会变的非常的乱
- 一般父传子props都是一个对象，这样在对象中可以规定传入的数据的类型、默认值等操作
- props的常见参数规定
Vue.component('myComponent', { props: { // 基础类型检测 (`null` 意思是任何类型都可以) propA: Number, // 多种类型 propB: [String, Number], // 必传且是字符串 propC: { type: String, required: true }, // 数字，有默认值 propD: { type: Number, default: 100 }, // 数组/对象的默认值应当由一个工厂函数返回 propE: { type: Object, default: function () { return { message: 'hello' } } }, // 自定义验证函数 propF: { validator: function (value) { return value > 10 } } }
})
+ 子传父使用$emlt发出事件给父组件
####1.3组件的语法糖写法
```javascript
const app =new Vue({
el:'#app', //vue监听对象
components： { //注册一个组件
'cpn': {
template: //组件模板定义
}
}
})
//一个简单的组件就这样创建完成
父子组件之间直接通过对象访问方法
- $children 父访问子 不常用
- $refs 父访问子 常用
- $parent 子访问父 基本不用这方法 影响可复用性
- $root 直接访问根组件
插槽slot
当你想扩展你的组件的内容时，可以在组件模板中写入
在使用模板的地方写入你想扩展的内容，就会直接写入slot标签中
具名插槽
当一个组件模板中存在多个插槽时，可以给插槽一个name属性用来识别在使用模板时操作的标签
编译作用域
作用域插槽的使用
当父组件替换插槽的标签，但是内容还是由子组件提供时，就叫做作用域插槽
比如：当你在父模块中多次使用子组件时，由于内容表示的格式都一样，当你想按照子组件的数据进行不同的效果渲染时，就可以在子模块的slot插槽标签上写一个属性用v-bind绑定子组件的数据。
绑定好后，在父模板上使用时，在组件标签上写上属性slot-scope = 'slot',之后就可以在父模块中通过slot.data(在子模板中v-bind绑定的名)
webpack
简单的说，webpack就是一个javascript静态资源模块打包工具。它依赖于node环境
浏览器在解析javascrip代码时，有很多东西都是不支持的，比如ES6语法less``sass这些css预处理器，commonJS、CMD、AMD这些模块化方案，当你使用webpack，它就可以帮你把这些代码解析成浏览器可解析的代码。在模块化开发中，可能模块与模块之间会进行很多次的调用，依赖关系会变得非常的复杂，webpack就可以帮你把这些依赖关系给处理好，作用不止于此......
webpack打包各种文件配置信息
在项目根目录下创建一个webpack.config.js文件，其中配置内容如下
const path = require('path') //node中的核心模块，用于操作路径
//开始配置打包
module.exports = {
entry: '.......' //js入口模块路径
output: { //出口配置
path:path.resolve(__dirname,' 出口根文件 ') //出口文件的路径 ,需要绝对路径使用__dirname获取
filename: ' 出口文件名 ',
publicPath: './dist/' //当图片打包完存放的位置
}
//打包css文件，需要css-loader包，只用于加载css文件
//打包css文件，还需要一个style-loader包，用于实现效果
//安装这两个包命令：npm i -save-dev style-loader css-loader
//配置方式:
//在js入口文件中使用require加载css文件后:
module: {
rules: [ //rules规则，就是进行打包的一些配置规则
{
test: /\.css$/ //正则表达式查找css文件
use:[ 'style-loader','css-loader'] //使用css包
},
//配置图片打包信息
{
test:/\.(jpg|gif|png|)$/, //匹配图片正则
use:[
{
loader:'url-loader', //打包图片需要的包
options: {
limit:100000, //小于100000的图片可以打包
name:'img/[name].[hash:8].[ext]' //为了方便找到相应的图片，给每个打包好的图片一个命名格式保存在publicPath指定的文件中
//如果图片的大小超过了limit规定的大小那么需要在下载一个file-loader包
}
},
//ES6转ES5
//先使用npm下载包:npm i -save-dev babel-loader@7 babel-core babel-preset-es2015
{
test: /\.js$/,
exclude: /('node_modules'|'bower_components')/,
use:{
loader:'babel-loader',
options:{
presets:['es2015'] //转译成ES5
}
}
}
]
}
]
}
}
//最后在命令行输入webpack就可开始打包文件
Vue打包配置
现在项目中使用npm下载vue
在入口文件中写入：
import Vue from 'vue' //这里不需要写路径，webpack会直接进入node_modules查找
const app = new Vue({
el:'#app',
})
由于vue在发布一个版本时会有两个版本：runtime-only 和 runtime-compiler
- runtime-only //不能有任何的template所以运行vue时会报错
- runtime-compiler //这个可以支持template
所以我们需要在webpack.config.js中配置vue，代码如下
module.exports = {
entry: '入口js文件',
output: { '出口文件选项'
path: path.resolve(__dirname,'/dist/') //路径
filename: 'success.js' //js文件名
} ,
module: { //需要配置的包
},
//配置vue
resolve: {
alias: {
'vue$':'vue/dist/vue.esm.js' //这个路径就能找到runtime-compiler版本的vue文件,这样就配置成功
}
}
}
.vue文件的配置
当需要打包.vue文件时，需要vue-loader、vue-template-compiler两个包
配置代码:
module.exports = {
entry: '入口js文件',
output: { '出口文件选项'
path: path.resolve(__dirname,'/dist/') //路径
filename: 'success.js' //js文件名
} ,
module : {
test: /\.vue$/,
use:['vue-loader']
}
}
vue-loader：加载.vue文件
vue-template-compiler：解析.vue中的内容，渲染为render
小提示:由于vue13版本以上解析.vue文件时，还要下载别的插件才能运行，所以这里下载的是13.0.0版本
.Vue文件的作用
.vue文件中可以实现htmljavaScriptCss代码的分离编写,只需要在入口文件中加载即可，每个.vue文件相当于一个组件，组件与组件之间也可以实现相互加载，实现组件化开发，最后形成一个组件树，更好的维护、管理
webpack打包其他东西配置信息地址
插件plugin
插件就是对框架的一个功能扩展
webpack自带插件
1.BannerPlugin:给打包好的文件开头注册一个信息
配置代码
配置时，先使用require加载webpack
plugins:[
new webpack.BannerPlugin('信息')
]
扩展插件
1.html-webpack-plugin
把index.html文件也打包到发布文件中
配置代码
配置时，先使用require加载html-webpack-plugin
plugins:[
new HtmlWebpackPlugin({
template:'index.html' //打包的index.html文件模板
})
]
2.uglifyjs-webpack-plugin
js文件压缩插件
配置代码
配置时，注意webpack和uglifyjs-webpack-plugin的版本问题
我这里版本是：[email protected]、[email protected]
plugins:[
new uglifyjsPlugin() //引入插件的名
]
3.webpack-dev-server本地环境搭建
webpack-dev-server是基于node.js的开发时环境。
对代码进行编译储存在内存中，实时更新网页类容。
配置代码
配置时，注意webpack和uglifyjs-webpack-plugin的版本问题
我这里版本是：[email protected]、[email protected]
devServer: {
contentBase:'./dist', //为哪一个文件夹提供本地服务，默认是根文件夹，这里是dist文件夹
inline:true, //是否进行实时更新网页
port:'8080', //监听端口号
}
4.webpack配置文件webpack.config.js进行配置分离
目标:把开发时配置信息和发布时配置信息分离
使用:webpack-merge:把文件进行合并
module.exports = webpackMerge(baseConfig,{ //baseConfig：基础的配置信息
//开发时的配置信息
})
脚手架(vue CLI)
1.安装脚手架2（对应的webpack版本3）
`npm install -g @vue/cli`
注意：上面安装的是Vue CLI3的版本，如果需要想按照Vue CLI2的方式初始化项目时不可以的。
2.在命令行创建脚手架
vue init webpack my-project
创建选项解释：
创建的脚手架目录
vue 的 runtime-Complier 和 runtime-only的区别
1.runtime-only 比 runtime-Compiler更轻、更小，运行更快
2.1.runtime-Copmlier在解析template时:
template=>ast=>render=>vDom=>UI
把模板进入Vue先解析为ast,再通过render渲染为虚拟DOM树(vDOM)最后渲染为最终页面(UI)
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '2.2runtime-only不需要template模板
render=>vDom=>UI
跳过了解析为ast的步骤
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
render: h => return h(App) //h:是createElement的简写
})
虚拟DOM就是一个javascript对象，它模拟了DOM树，形成一个js对象树用来表示真实的DOM树，最后通过diff算法插入到真实的DOM树中
diff算法非常复杂，这个就简单记录下算法过程
1.通过js对象结构来表示真实的DOM树，然后通过这个树构建一个真实的DOM树，然后插入到文档中
2.当树的状态改变时，重新构建一个DOM数。新的树和旧的树进行比较，记录差异
3.最后把差异运用到DOM树中，视图就更新了
4.大大提高了渲染速度
注意我们在开发当中更多的用runtime-only版本
路由
普通路由（路由器）
当你路由连接到猫，就会分出多个网络接口或网络信号，当你手机或电脑连接路由的一个端口时，这时候路由就分配了一个内网IP给你，猫的是公网IP
在一个公网下的IP地址，一般为192.168.1.111
公网IP：就是我们常说的IP地址唯一标识。
路由映射表:当路由分配给你一个内网IP时，就会增加一个映射,用于当别人给你传递数据时，找到正确的你的电脑。
数据传递路径：先找到你的公网（猫的IP），在进入路由，通过路由的映射表，找到数据传递的目标IP地址。
[
内网IP ：电脑的唯一标识(mac)
]
后端路由和后端渲染
后端渲染：网站开发人员既要写后端代码也要写前端代码，最后把渲染好的页面直接返回给客户端（浏览器）
后端路由：url和页面之间处理的映射关系
前端渲染:也就是前后端分离，后端只需要把数据接口准备好，放到服务器，前端通富哦ajax或其他技术，获取到数据接口，然后直接在页面上实时渲染。前端和后端就可以更好的合作
SPA(单一面富应用阶段)
整个网页中只有一套html+css+js(全部的资源)，js里有很多个页面块（也就是组件）其他的页面需要路由请求然后通过js代码判断，来决定当前需要渲染什么，就不会再去请求服务器拿数据、资源，因为所有的数据、资源已经在js中
前端路由：由前端开发工程师决定路由的映射关系
vue-router(路由)插件
在src文件夹中创建一个router文件夹在里面创建一个js文件开始配置
配置代码：
import vueRouter from "vue-router" //引入包
import Vuefrom "vue"
Vue.use('vueRouter') //想要使用vue插件必须使用这个函数进行安装
const routers = [] //路由映射数组
const router = new vueRouter({
router:router
})
export defalut router //导出
//最后在Vue实例里面挂载
import Vue from 'vue'
import App from './App.vue'
import router from "./router/index"
Vue.config.productionTip = false
new Vue({
el: '#app',
router:router,
render: h => h(App),
})