Vue
一,基础
1,ES6–语法
关于 let 和 var
- 块级作用域
- ES5中的var是没有块级作用域的(if/for)
- ES6中的let是有块级作用的(if/for)
关于闭包
用let 就行了
关于const
对象字面量的增强写法
2,事件监听
1,v-on
- v-on修饰符
2,条件判断
- v-if ,v-else if,v-else
3,v-show
4,组件的key属性
<hr/>
<ul>
<!--官方推荐要添加 一个 :key 的属性-->
<li v-for="go in gogo" :key="go">{{go}}</li>
</ul>
5,检测数据更新–响应式
3,双向绑定 v-model
- 原理:
<input type="text" v-model="message">
相当于
<input type="text" :value="message" @input="message = $event.target.value">
1,v-model:radio
2,v-model:checkbox
3,v-model:select
4,值绑定
5,修饰符
4,组件化
步骤:
- 创建组件构造器
- 注册组件
- 使用组件
父子组件的通讯
- 父传子
props 里面定义属性
- 子传父
1.@click=“btclick(item)” 子模板调用子方法
<template id="cpn">
<div>
<button v-for="item in categories"
@click="btclick(item)">
{{item.name}}
</button>
</div>
</template>
2.btclick(item) 子方法调用v-on标签的方法
<script>
const cpn={
template:'#cpn',
data(){
return{
categories:[
{id: '1',name:'小米'},
{id: '2',name:'小高'},
{id: '3',name:'笑笑'},
{id: '4',name:'KIA'},
]
}
},
methods:{
btclick(item){
// console.log(item);
this.$emit('itemclick',item)
}
}
}
</script>
3.itemclick — v-on标签调用父类的方法
<cpn @itemclick="cpnclick"></cpn>
4.const app = new Vue
const app = new Vue({
el: '#app',
data: {
message: '你好呀!',
},
components:{
cpn
},
methods: {
cpnclick(item){
console.log(item.name);
}
}
})
5,模块化
6,webpack
1,配置文件
- 编写webpack.config.js
const path = require('path');
module.exports={
entry:'./src/main.js', //入口
output:{
path:path.resolve(__dirname,'dist'),
filename:'bundle.js',
}, //出口
}
-在控制台执行 npm init,会生成package.json文件
2,局部安装webpack
npm install webpack@3.6.0 --save-dev
3,依赖css文件
- 在main.js 中
const {add,mul} = require('./js/mathUtils.js');
console.log(add(12, 23));
console.log(mul(12, 2));
//依赖css文件
require('./css/normal.css');
//依赖less文件
require('./css/special.less')
在添加css样式,重新 npm run build时会包如下的错
ERROR in ./src/css/normal.css
Module parse failed: E:\WebVue\13-webpack的使用\02-webpack的配置\src\css\normal.css Unexpected token (1:4)
You may need an appropriate loader to handle this file type.
- 此时要在webpack.config.js中修改
const path = require('path');
module.exports={
entry:'./src/main.js', //入口
output:{
path:path.resolve(__dirname,'dist'),
filename:'bundle.js',
}, //出口
module: {
rules: [
{
test: /\.css$/,
//css-loader 只负责加载css文件 不解析
//style-loader 负责将样式添加到DOM中
//从右往左加载,位置换掉后会报错
use: ['style-loader','css-loader' ]
}
]
}
}
- 然后在终端执行以下的命令
npm install --save-dev css-loader
npm install style-loader --save-dev
4,依赖less文件
- 终端
npm install --save-dev less-loader less
- webpack.config.js
// webpack.config.js
module.exports = {
...
module: {
rules: [{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
}]
}
};
5,依赖图片
- 注意
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
//当加载的图片,小于limit时,会将图片编译成base64字符串形式
//当加载的图片,大于limit时,需要使用file-loader模块进行加载
limit: 8192,
//以这种方式命名
name: 'img/[name].[hash:9].[ext]',
}
}
]
},
6,ES6语法处理
babel-loader
7,导入Vue
-
npm install --save vue
-
在main.js声明(使用)
-
在webpack_config.js配置
- 使用 .vue 文件
添加 loader
npm install vue-loader vue-template-compiler --save-dev
修改配置
8,配置文件的分离
- 安装插件
npm install webpack-merge --save-dev
- 分离文件,dev.confog.js
const WebpackMerge = require('webpack-merge');
const baseConfig = require('./base.config.js');
module.exports = WebpackMerge(baseConfig,{
devServer:{
contentBase:'./dist',
inline:true,
}
})
- base.config.js是一个基础的配置文件
- package.json
7,vue-cli2->vue-cli3
1,vue-cli2初始化项目
2,vue-cli3初始化项目
3,动态路由
- 新建.vue文件
- 在index.js中映射关系
- 在APP.vue中使用路由
<router-link replace :to="'/user/'+userName" tag="button">用户</router-link>
- 在User.vue中获取传过去的值
4,路由懒加载
5,路由嵌套
- index.js
{
path: '/home',
component: Home,
children:[
{
path:'',
redirect:'new',
},
{
path:'new',
component:HomeNews,
},
{
path: 'message',
component: HomeMessage,
}
]
},
-
Home.vue
-
效果
6,参数传递
- App.vue
<router-link replace :to="{path:'/profile',query:{name:'Mr-Jies',age:18,height:1.8}}" tag="button">档案</router-link>
- Profile.vue
8,异步操作
1,Promise
<script>
//什么情况下会用到Promise?
//一般情况下是有异步操作时,使用Promise对这个异步操作进行封装
// new ->构造函数(1.保存了一些状态信息 2.执行传入的函数)
//在执行传入的回调函数时,会传入两个参数,resolve, reject.本身又是函数
new Promise((resolve, reject) => {
//耗时操作1
setTimeout(() => {
//成功时调用resolve
resolve('hello world')
//失败时调用
// reject()
}, 1000)
}).then((data) => {
console.log(data);
console.log(data);
return new Promise((resolve, reject) => {
//耗时操作2
setTimeout(() => {
resolve('你好呀!!')
}, 1000)
})
}).then((data)=>{
console.log(data);
console.log(data);
return new Promise((resolve, reject) => {
//耗时操作3
setTimeout(() => {
reject('错误!!')
}, 1000)
})
}).catch((err)=>{
console.log(err);
})
</script>
2,Promise三种状态
9,网络请求框架axios
- request.js
export function request(config) {
//1.创建axios实例
const instance = axios.create({
baseURL:'********',
timeout:5000,
})
//2.拦截器
//2.1,请求拦截器
instance.interceptors.request.use(config=>{
//1.比如拦截config中的一些信息不符合服务器的要求
//2.比如每次发送网络请求时,都希望在界面中显示一个请求的图标
//3.某些网络请求,必须携带一些特殊的信息
return config
},error => {
});
//2.2,响应拦截器
instance.interceptors.response.use(config=>{
return config.data
},error => {
})
//3.发送真正的网络请求
return instance(config)
}
- 使用上面的封装函数
import {request} from "./network/request";
//最后的版本---为什么可以使用.then .catch 因为他的底层是AxiosPromise
request({
url: '/api/h8/home/data',
//请求参数拼接
params: {
type: 'pop',
page: 1,
}
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})