什么是Vue
是一个轻量级的mvvm框架
数据驱动+组件化的前端开发
guthubc超过25k+的star数,社区完善
mvvm框架
mvvm 框架主要包括三个部分:
- View:视图部分=> Dom
- Model:数据部分=>js对象逻辑
- ViewModel:链接视图和数据的中间件,视图和数据不能直接通讯,需要通过viewModel来进行通讯,viewModel要实现一个observer观察者,当数据发生变化,viewModel能够观察到这种变化,并通知对应的视图进行更新,而用户操作视图,也能通知数据进行改动,这就实现了数据双向绑定
mvvm 框架主要应用:
- 针对具有复杂交互逻辑的前端应用:外卖 音乐 打车
- 提供基础的架构抽象
- 通过ajax数据持久化,保证用户体验
- 通过局部刷新 大大改善体验 有提示app端 减少刷新页面,也就减少 js Dom 被重新解析的损耗
前端技术选型
- 社区活跃度 完善程度
- 对比框架优缺点
- vue更轻量
- vue更易上手 学习曲线平稳
- 吸取两家职场,借鉴了angular的指令和react的组件化
vue.js 的核心思想
数据驱动
- 在普通情况下model和view 交互通过ajax 获取数据然后手动改变Dom
- 使用vue 省去了手动操作dom的步骤 viewModel的
Directives指令对dom做了一层封装 数据发生变化 来发送指令 让view去修改对应的Dom 数据驱动Dom变化,Dom 是数据的一种自然映射 - vue还会对视图做一些监听,当修改视图时,vue会监听到这些变化,并把改变的数据传给Model来进行同步
数据响应原理
数据Model改变驱动视图View自动更新
在深入了解
组件化
拓展HTML元素 封装可重用的代码
组件的设计原则
- 页面上每个独立的可视/可交互区域视为一个组件
- 每个组件对应一个工程目录,组件所需要的各种资源在这个目录下
就近维护 - 页面不过是组件的容器,组件可以嵌套自由组合成任意界面
项目制作中小知识点笔记
路由切换高亮
- 在 router 中切换默认的路由高亮 样式名字就行了
var router = new VueRouter({
routes: [{
path: '/',
redirect: '/home'
}],
linkActiveClass: 'mui-active'
})
vue 跨域代理
在vue-cli 创建的工程目录中 cofing/index.js中
proxyTable: {
'/star': {
target: 'http://vue.studyit.io',//要被代理的域名
changeOrigin: true,//至关重要的属性 值为true 时 才可以被代理
pathRewrite: {
'^/star': ''
}
}
},
package.json 版本依赖知识
"vue": "^2.5.2" 中的^ 代表着最低版本为2.5.2 实际安装版本会更高
vue-cli 2.x版本如何mock 本地模拟数据
- node中的express
npm i express -D
npm i vue-resource -S
在 webpack.dev.conf.js 文件中配置路由规则
// 增加express */
const express = require('express')
const app = express()
var appData = require('../data.json') //加载本地数据文件
var seller = appData.seller;
var goods = appData.goods;
var ratings = appData.ratings;
var apiRoutes = express.Router()
app.use('/api', apiRoutes)
在 devServer中配置规则 使用 get
/* 增加express */
before(app) {
app.get('/api/goods', (req, res) => {
res.json({
code: 0,
data: goods
})
}),
app.get('/api/seller', (req, res) => {
res.json({
code: 0,
data: seller
})
}),
app.get('/api/ratings', (req, res) => {
res.json({
code: 0,
data: ratings
})
})
}
/* 增加路由规则 end */
webpack 配置SRC 路径
在 webpack.base.conf.js 中,在 alias属性中 配置 固定的键值 指向同一路径 减少路径错误
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'components': path.resolve(__dirname, '../src/components')
}
},
手机1像素实现
手机1像素问题出现的原因是 手机物理显示和屏幕显示的区别 在高分辨率的手机上比较明显
解决思路 是通过伪类来实现
定义一个全局的伪类
border-1px($color)
position: relative
&:after
display: block
position: absolute
left 0
width: 100%
bottom: 0
border-top: 1px solid $color
content: ' '
在护理不同分辨率所遇到的缩放情况
@media(-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5)
.border-1px
&::after
-webkit-transform: scaleY(0.7)
transform: scaleY(0.7)
@media(-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2)
.border-1px
&::after
-webkit-transform: scaleY(0.5)
transform: scaleY(0.5)
webpack-dev-server 使用localhost和本机IP地址都可以访问
在config - index.js 中修改 host 为: 0.0.0.0
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// Various Dev Server settings
// host: 'localhost', // can be overwritten by process.env.HOST
host: '0.0.0.0', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
HTML 元素之间的空白无意义间隙 去除方法
- 为父元素添加样式
font-size:0px - 标签和标签紧挨着没有空格 但是一般格式化代码会破坏掉
- 类似于
span class="bulletin-title"></span><span class="bulletin-text">{{seller.bulletin}}</span>
css 经典布局 sticky-footers
效果:如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。著作权归原作者所有。
图片 纯色 背景虚化
使用 filter: blur(10px);属性完成
配合背景图效果不错
背景色模糊 暂时只知道 IOS 的方法为: backdrop-filter: bulr(10px);
抽离样式小组件时
组件内只负责组件自身的展示
应用时还需要在添加样式来进行规范
css 垂直居中
在li 中多行文字垂直居中 使用 display: table;可以达到效果
css 文字垂直居中 vertical-align: middle;
css 图片设置大小 建议在标签中也写上宽度
<img width="57px" :src="food.icon">之后在css 中一样设置样式
better-scroll 不能滚动的原因之一是 父盒子高度和子盒子一样
父盒子被子盒子撑开 自然就滚动不了了
更改DOM 或者获取DOM的属性 一定要注意要在DOM已经完全刷新之后调用
使用this.$nextTick回调 可以确保这一事件
methods: {
/***
* 使用bcrcoll 传入
* */
_initScroll() {
console.log(this.$refs.menuwrapper);
this.menuScroll = new BScroll(this.$refs.menuwrapper);
this.foodScroll = new BScroll(this.$refs.foodwrapper);
}
},
created() {
this.$http.get("/api/goods").then(res => {
if (res.body.code === ERR_OK) {
console.log("goods=======", res.body);
this.goods = res.body.data;
/**
* 在created 钩子中 执行异步操作 获取不到dom 的真实高度所以直接运行得不到正确结果
* 需要在 this.$nextTick 中做异步
*/
this.$nextTick(() => {
this._initScroll();
});
}
});
},
编程习惯 给标签加雷明 如只是用来给js 进行选择 没有实际意义 可需要在雷鸣后加 hook 例如 food-list-hook
盖住同级元素
给自身元素相对定位 然后使用 margin-方向：负值 来遮盖
&.current {
position: relative; //这里!
font-weight: 700;
margin-top: -1px;
background: #fff;
z-index: 10;
.text {
border-none();
}
}
给观测属性 直接添加不存在的属性 直接赋值是不行的 检测不到新增和删除的变化
trantion3D 会开启硬件加速 更加顺畅
vue 的动画效果必须在 v-show 和v-if 中才能生效!
.rotate-enter, .rotate-leave-to {
opacity: 0;
transform: rotate(270deg);
}
.rotate-enter-active, .rotate-leave-active {
transition: all 0.4s linear;
}
Vue.set 像对象中增加不存在的属性 使之成为被监控的对象可以得到他的变化
搭配计算属性 当在子组件中操作父组件的计算属性时,父组件的数据会发生变化就会发生关联
<!-- 父组件 -->
computed: {
selectFoods() {
let foods = [];
this.goods.forEach(good => { //this.goods 被操作的父组件对象
good.foods.forEach(food => {
if (food.count) {
foods.push(food);
}
});
});
console.log("foods", foods);
return foods;
}
}
<!-- 子组件 -->
methods: {
addCrat() {
if (!this.food.count) {
return Vue.set(this.food, "count", 1);//Vue.set 设置属性
}
this.food.count += 1;
},
}
子组件之间互相通信
- 使用vuex
- 自己创建一个事件处理模块 来进行中转
- 使用已经封装好的vue-bus 来进行
eslink 意外的错误或者操作不符合规范但实际情况需要这么做的时候
使用 /* eslint-disable */ 来取消检查
css布局 当元素高度会发生变化不能确定时 定位或者其他操作
使用百分比 来进行操作
css 布局屏幕等宽图片 防止抖动布局
图片加载是异步过程,如果不设置高度 当图片加载完成会有一个撑开的过程
防止此现象可以使用 padding-top:100% 当padding为100%时 是根据元素宽度来计算的 所以可以得到一个正方形
<div class="img-header">
<img :src="food.image" alt>
</div>
.img-header {
position: relative;
width: 100%;
height: 0;
padding-top: 100%;
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
css 布局 多个行内元素并列
如span display-inline-block 的元素 多个并列 需在父元素上使用 font-size=0来解决 空隙
css布局 字体图标和文字对齐方式
字体图标和文字不能居中对齐时 给设置成 display:inline-block给父级设置 font-size:0
.father {
font-size: 0;
.icon {
display: inline-block;
vertical-align: top;
font-size: 24px;
margin-right: 4px;
}
.text {
display: inline-block;
vertical-align: top;
font-size: 12px;
line-height: 24px;
}
}
组件 父子组件传值
子组件不应该直接修改 props中的对象或数组因为是通过引用传入的直接修改会改变原数据 可以通过赋值的方式 在data中定义本地数据
data() {
return {
selfSelectType: this.selectType//props中的参数
};
},
vue 写法 v-show 绑定一个函数的返回值
v-show="needShow(rating.rateType,rating.text)"
可以更方便的去做一些判断
css 布局 不同机型的 宽高不同适配 需要使用@media
js 一段选择展示的代码 传入两个核心变量 然后根据比对结果返回值来控制是否显示
needShow(type, text) {
if (this.onlyContent && !text) {
return false;
}
if (this.selectType === ALL) {
return true;
} else {
return this.selectType === type;
}
}
css 布局 方式 手机端使用padding 布局
例如 页面上方是固定区域 不会改变 那么在总页面就使用padding 固定出这个高度 让活动区域高度固定
css 图片滚动
图片滚动需要在图片层包裹一个div 作为父层 因为没有父层的宽度是不能滚动的
white-space: nowrap; 不折行
vue 切换组件时保存上一个组件的状态 使用 keep-alive
keep-alive 组件使用keep-alive时 请求只会发送一次 组件信息会被缓存到内存当中
当再次打开时 会先去内存中寻找
<keep-alive>
<router-view :seller="seller"></router-view>
</keep-alive>
