vue项目总结
Vue总结
安装
安装node.js LTS版本 http://nodejs.org
Window .msi mac.npk
Node -v //输出版本号 安装成功
Npm -v //node 包管理工具
码云 网上云仓库
Private 创建私有仓库
开源：MIT license
码云git关联：
线上本地关联：
-
本地安装git //http://git-scm.com
-
Git --version //输出git版本号安装成功
安装git
配置git:
打开git bash Here
初始化用户名 git config --global user.name ‘******’
初始化邮箱： git config --global user.email ‘******’
配置公钥
Git clone ‘SSH地址’
git status(把文件添加到线上仓库)git
git add . (增加到本地缓冲区)
git commit -m 'product initialized'
git push
安装：npm install
新建分支：
Git pull
Git checkout home-index
Git status //查看在哪个分支上
Git add .
Git commit -m “change”
Git push
Git checkout master
Git merge origin/index-swiper //合并到master
Git push
安装vue-cli:
1、npm install --global vue-cli
2、vue init webpack Travel
Y
3、y,y,y,n,n
4、cd travel
5、npm run dev
引入fastclick
npm install fastclick --save
(import fastClick from 'fastclick')
fastClick.attach(document.body) //fastclick 解决移动端延迟300ms点击事件
Axios父组件向子组件传递数据：
父组件：
Data () {
Return {
Cities: {},
hotCities: []
}
}
Methods: {
getCityInfo () {
Axios.get(‘/api/city.json’)
.then(this.handleGetCityInfoSucc)
},
handleGetCityInfoSucc (res){
Res = res.data
If (res.ret && res.data) {
Const data = res.data
This.cities = data.cities //json中的名字
This.hotCities = data.hotCities
}
}
}
Mounted () {
This.getCityInfo();
}
子组件接收：
Props:{
City: Object,
Hot: Array
}
V-for = “item of hot”
Axios的用法 vue-ajax：
Ajax 第三方模块 axios
Npm install axios --save
ajax请求放在父组件发送
Import axios from ‘axios’
Methods: {
getHomeInfo () {
Axios.get(“ url”).then(this.getHomeInfoSucc)
},
getHomeInfoSucc () {
Res = res.data
If (res.ret && res.data) {
Const data = res.data
This.cities = data.cities //json中的名字
This.hotCities = data.hotCities
}
}
Mounted () {
THIS.getHomeInfo() //渲染挂在 声明周期函数
}
2.遇到的问题：
2.1使用vue-awesome-swiper 轮播图图片加载不到：
本地图片应放在static目录下，
安装时应加上@2.6.7版本号，否则不显示轮播点
data() {
return {
swiperOption: {
pagination: '.swiper-pagination',
Loop: true //可以循环滑动
},
}
2.2 公用图片画廊轮播
点击显示 图片滑动不流畅：
Swiper3 :
swiperOptions: {
//添加
observeParents: true,
Observer: true //自我刷新
PaginationType: ‘fraction’ //显示滚动页数
}
$emit()用法；
Npm run build //打包编译 多出dist目录是要上线的内容 放在后端根目录中
2.2父组件的值传给子组件：
父组件：
子组件：
编码中遇到问题总结：
-
列表 - 详情 动态路由
路径：
Path: ‘/detail/:id’
-
每次返回首页页面数据都会重新加载 冗余
3、动画显示隐藏
页面展示时执行activated
Activated () {
Window.addEventListener(‘scroll’, this.handleScroll)
},
Methods: {
handleScroll () {
Const top = document.documentgetElement.scrollTop;
If( top >60) {
This.showAbs = false;
Const opacity = top/140
Opacity = opacity>1 ?1:opacity;
This.opacityStyle = {
opacity
}
}else{
This.showAbs = false
}
}
}
4、fadeAnimation:
-
Localstorages数据存储
相当于cookie
State: {
City:defauleCity //localStorage.city || ‘上海’
}，
Mutations: {
changeCity (state, city){
State.city = city
// localStorage.city = city
Try{
localStorage.city = city
} catch (e){}
}
}
尽量包含一个try catch 防止浏览器抛出异常
Let defaultCity = ‘上海’
Try {
If( localStorage.city) {
defaultCity = localStorage.city
}
} catch(e) {}
Import { mapState } from vuex
Computed: {
...mapState([‘city’])
...maoState({
currentCity: ‘city’
})
}
-
返回上一页数据被重新加载问题
Keep-alive 优化网页性能
APP.vue
使用keep-alive 会多出一个activated() 状态
每次页面被加载时执行
Data () {
Return {
lastCity: ‘ ’
}
},
Mounted () {
This.lastCity = this.city //保存上一个城市
},
Activated () {
If(this.lastCity !=== this.city){
This.lastCity = this.city
This.getHomeInfo()
}
}
-
钩子函数顺序
在页面首次加载执行顺序有如下：
beforeCreate //在实例初始化之后、创建之前执行 created //实例创建后执行 beforeMounted //在挂载开始之前调用 filters //挂载前加载过滤器 computed //计算属性 directives-bind //只调用一次，在指令第一次绑定到元素时调用 directives-inserted //被绑定元素插入父节点时调用 activated //keek-alive组件被激活时调用，则在keep-alive包裹的嵌套的子组件中触发 mounted //挂载完成后调用
{{}} //mustache表达式渲染页面
修改页面input时，被自动调用的选项顺序如下： watch //首先先监听到了改变事件 filters //过滤器没有添加在该input元素上，但是也被调用了 beforeUpdate //数据更新时调用，发生在虚拟dom打补丁前 directived-update //指令所在的组件的vNode更新时调用，但可能发生在其子vNode更新前 directives-componentUpdated//指令所在的组件的vNode及其子组件的vNode全部更新后调用 updated //组件dom已经更新
组件销毁时，执行顺序如下 beforeDestroy //实例销毁之前调用 directives-unbind //指令与元素解绑时调用，只调用一次 deactivated //keep-alive组件停用时调用 destroyed //实例销毁之后调用
-
前后端联调跨域问题
Config——index.js
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: "http://localhost/bci",
changeOrigin:true, //允许跨域
pathRewrite: {
'^/api': ''
}
}
},
axios在vue中引用：
methods: {
getSwiperInfo () {
axios.get('/api/mainclassify/getRecommendProduct?userId=88bdd4cc311f48afb327ae9e2b0bc9e8&id=0&wh=1080*1794×tamp=1534217980886&imei=861533037115654&version=1.5.0.10&sign=D4778A54F2F49A1AC3FEDC410E9692F7')
.then(this.getSwiperInfoSucc)
},
getSwiperInfoSucc (res) {
res = res.data
if (res.errCode && res.result) {
const data = res.result
this.banners = data.gdlist
this.list = data.list
}
console.log(res.result.gdlist)
}
},
mounted () {
this.getSwiperInfo()
}
}
9、非父子间传值
1、vuex数据共享
2、bus/总线机制
兄弟之间传值，同一个父元素
Vue.propoty.bus = new Vue();
Methods: {
handleClick(){
This.bus.$emit(‘change’, 所传值)
}
}
//接受
Mounted（）{
This.bus.$on(‘change’, function(msg){
msg
})
}
10、父子间动态传值
父组件通过props向子组件传值；
A页面：
Props:{
List: Array
}
-
child页面：
Props:{
Alist: Array
}
子组件通过触发事件向父组件传值；
-
router传参
方法一：
-
在路由项目中添加：
{
Path: ‘/detail/:id’,
Name: ‘Detail’,
Component: Detail
}
A页面：
使用：this.$router.params.id
方法二：
{
Path: ‘/detail/:id’,
Name: ‘Detail’,
Component: Detail
}
A页面：
使用：this.$router.query.id
-
:class三元表达式
:class=” ifshow ? ‘aa’ : ‘bb’ ”
Data () {
Return{
Ifshow: true
}
}