vue个人笔记10bet

时间: 2019-10-09阅读: 94标签: 刷新html login.vue 这是登录需要储存的

数组转字符串
var a, b,c;
a = new Array(a,b,c,d,e);
b = a.join('-'); //a-b-c-d-e 使用-拼接数组元素
c = a.join(''); //abcde
字符串转数组
var str = 'ab+c+de';
var a = str.split('+'); // [ab, c, de]
var b = str.split(''); //[a, b, +, c, +, d, e]

vuex 存的是内存 localStorage是浏览器提供的接口，让你存的是接口，以文件的形式存储到本地这是它们本质的区别

路由懒加载

全局注册需要在app.vue里面

在接收组件的created中监听事件

created(){
bus.$on(ISLOGIN,(logined)=>{
this.isLogin = logined
})
},

import Vue from 'vue'import App from './App'import router from './router'import { ,  } from "./network/axios";Vue.prototype.$ = ;Vue.prototype.$ = ;import store from './store/store' //这是引入的import vueTitle from 'vue-wechat-title' // 设置titleVue.use(vueTitle)import Mint from 'mint-ui';Vue.use(Mint);import 'mint-ui/lib/style.css';import './assets/less/common.less'Vue.config.productionTip = false;/* eslint-disable no-new */new Vue({el: '#app',router,store,components: {App},template: 'App/'})

登陆验证

this.$('/member/user/doLogin', {username: that.userName,password: that.userPassword,code: that.verCode}).then(res = {console.log(res);//JSON.stringify是把json对象转化成字符串localStorage.setItem("userInfo", JSON.stringify(res)) //只有用本地存储页面刷新的时候才不会被清掉this.$store.commit("setPrint", { // 这个使用的是mutations里面方法的调用userInfo: res})this.$router.push("index");}).catch(err = {console.log(err)})

在 .babelrc 中配置：

{
"plugins": ["syntax-dynamic-import"]
}
修改路由中引入文件的方式，把

//（原来）import Layout from '@/components/Layout'
const Layout = () => import('@/components/Layout')

localStorage 保存对象的时候，需要先将对象转换成json字符串，然后获取的时候在转换成对象形式

安装 babel-plugin-import：

main.js

.map文件只是帮助我们调试用的，正式上线时可以去掉这个文件
修改config/index.js里module.exports的productionSourceMap改为productionSourceMap: false

store.js

2发送post请求

store.js 建一个store文件夹把js放里面在main.js 里面引入并全局注册

返回上一页

结语

 watch: {
      // 监控路由变化
      $route: function (val) {
        // 刷新商品详情和评论数据
        this.getGoodsinfoData()
        this.getCommentData()
      }
    },

import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);const state = {userInfo: localStorage.getItem('userInfo') || {} //从缓存里面拿到的数据};const getters = {};const actions = {};const mutations = {setPrint(state, userInfo) {state.userInfo = userInfo;}};export default new Vuex.Store({state,getters,actions,mutations})

import {bus} from '@/common/common'

templatediv router-view//div/templatescriptexport default {name: 'App',data() {return {}},mounted() {//在页面加载时读取localStorage里的状态信息localStorage.getItem("userInfo")  this.$store.replaceState(Object.assign(this.$store.state, JSON.parse(localStorage.getItem("userInfo"))));//在页面刷新时将vuex里的信息保存到localStorage里window.addEventListener("beforeunload", () = {localStorage.setItem("userInfo", JSON.stringify(this.$store.state))})}}/script

BUG

导入vuex，并声明全局使用（main.js）

import Vuex from 'vuex'
Vue.use(Vuex)
创建store对象（main.js）

const store = new Vuex.Store({
state: {
count:1
},
getters:{
//获取state数据
getCount(state){
return state.count
}
}, //对仓库的增删改
mutations: {
addGoods(state,goodsObj){
state.count = addLocal(goodsObj)
}
}
})
注入根实例（main.js）
new Vue({
el: '#app',
router,
store, //<--见此处
components: { App },
template: '<App/>'
})
一般vuex会结合localStorage使用
4.1 新建一个common文件夹，一般与main.js同级，在里面创建一个localTool.js，专门用来写对本地存储的增删改查操作，并暴露出去
4.2 查找
const getLocal = () => {
return JSON.parse(localStorage.getItem('goods') || '{}')
}
1. 3 增加
  export const addLocal = (goodsObj) => {
  const localGoods = getLocal()
  if (localGoods[goodsObj.id]) {
  localGoods[goodsObj.id] += goodsObj.count
  } else {
  localGoods[goodsObj.id] = goodsObj.count
  }
  localStorage.setItem('goods', JSON.stringify(localGoods))
  return getTotal() //调用其他函数返回一个值
  }
在创建store对象前引入localTool.js
import {addLocal} from './common/localTool'
在store对象中添加mutations对象的方法，
示例方法是把值存入本地，调用localTool.js的addLocal方法，并同步state的count
mutations: {
addGoods(state,goodsObj){
state.count = addLocal(goodsObj)
}}
使用
- 使用mutations对象里的方法
  在调用mutation其中方法的组件中，使用：
  this.$store.commit('addGoods',goodsObj)
  10bet，【第一个参数是mutations的方法名，其他可选，是调用过程中会使用的参数】
- 使用getters获取state（数据）
  在使用vuex状态（即数据）的组件中，直接使用：
  this.$store.getters.getCount

安装 babel-plugin-component：

Vue:
    beforeCreate（组件创建之前） ---> created（组件已经创建出来了）
    ---> beforeMount（组件的dom元素被渲染出来之前） ---> mounted（dom元素已经渲染出来了） ---> 【模型数据发生了更改】beforeUpdate（视图重新渲染之前） ---> updated(视图已经重新渲染完毕) ---> beforeDestory(组件销毁之前) ---> destoryed（组件销毁了）

关于css样式与原来不一致

集成组件，设置他的最大和最小值

<template>
<el-input-number size="mini" :min="1" :max="10" v-model="num7"></el-input-number>
</template>
<script>
export default {
data() {
return {
num7: 1
}}};
</script>
把要传给计数器的值放在v-model中，即修改v-model的值
把计数器增减后的值传回来
- 设置change事件（标签），其中第一个参数是另外传给计数器的值，最后一个参数是计数器完成操作后返回的结果
  @change="changeCount(item.id, $event)"
- 设置change事件（methods）
  changeCount(value, event){
  const goodsObj = {
  goodsid:value,
  count:event
  };
  console.log(goodsObj);
  }

created(){
    this.getGoodsGroup()
}

建议：在刚开始时直接用这种方式引入路由文件

使用vue-cli打包

router-link会自动的把该元素变成a标签
添加了to属性后，不需要原来的href属性
to属性动态获取其他值时前面要加冒号（：）
to属性动态拼接时外面的双引号要写在里面所有字符串的外面，固定不变的值外面加上单引号以加号连接外部变量

vue中属性的值为number类型不能直接写label:1，要写:label:“1”

在设置路由守卫时没有调用next()

删掉.map

Vue组件的生命周期

多人开发时尽量保持每个组件 export default {} 内的方法顺序一致，方便查找对应的方法。

vue-cli搭建项目

如：[{id:1,age:2},{id:2,age:4},{id:3,age:5}]

foreach一般用来遍历数组：

myArry.forEach((value,index,arr)=>{
console.log(value);
});
for in一般用来遍历对象：

for(var value in myArry){
console.log(value)
}

axios(获取网络请求)

推荐： data（方法）、props（数组）、钩子（方法）、watch（对象）、computed（对象）、components（对象）

在路由中设置了site/login，但是当a标签的href设置为‘/site/login’时不会跳转到对应页面

关于vuex

在dom元素中定义ref属性，则可在vue示例中通过this.refs获取所有有ref属性的dom元素
ref获取不到其父组件所定义ref的dom元素，可用id获取

2、mounted

vue-router

数据模型发生了更改，会调用，它会重新渲染组件

beforeDestory 记录未提交的数据
created 将本地的数据，自动填充上
beforeDestory:记录上次滚动到那个地方了
created：自动滚动到你上次看得那个位置

vue中的无刷新跳转是通过设置url的哈希值（即#）实现的，默认的会在url的末尾添加#，即若href设置为‘#/site/login’，则可以正常跳转
不过vue还是建议我们用router-link来实现跳转，使用时不用担心#的问题
<router-link to="/site/login"></router-link>

1、created

过滤器

非父子组件传值

CDN引入

关于监听路由跳转

确保安装了node与npm
再目标文件夹下打开终端
执行cnpm i vue-cli -g全局安装

在发送组件的methods中触发事件

4、beforeDestory & destory

应用场景:

数据在后台
发起删除数据请求，获得数据后，重新渲染页面
数据在本地（利用vue的数据驱动，修改data中的值，页面也会相应的变化）
2.1 利用vuex删除本地数据
2.2 在之前获得的渲染页面的数组中，直接删除对应索引的数据

发送网络请求，获取数据

以上安装完成后下次搭建不需再写

在组件里的template里写上html（注意要有个根元素，一般为div）
在组件里的style里写上css样式（如果不是作用于全局的样式，一般在style后面跟上scoped，但是要是加了反而改变了原有的样式，就不要加）

将jquery、moment等大资源的文件通过cdn的方式引入
常见cdn：bootcdn
实现：
1. 引入资源
  <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
2. 公开供全局使用，修改bulid文件夹下的webpack.base.conf.js文件
  - 这里小写的vue和vue-router是我们引入资源时对应的名字，冒号后面大写的名字是库的主人所暴露出来的全局方法名，当然这两个名字可以一样
    module.exports = {
    entry: {
    app: './src/main.js'
    },
    externals:{
    'BMap': 'BMap',
    'vue': 'Vue',
    'vue-router': 'VueRouter'
    }
3. 将项目中引用对应资源的地方将原先的引入方式去掉
  // import Vue from 'vue'
  // import VueRouter from 'vue-router'

网站本来能正常显示，设置了路由守卫后连首页都打不开了

导入文件

使用axios(main.js)

Vue.prototype.$axios = axios

axios.defaults.baseURL = 'http://39.108.135.214:8899/'（方便起见可以设置根路由）

axios.defaults.withCredentials = true （在跨域的时候，允许访问服务器时带上cookies）
1发送get请求
3.1.1 在发起请求组件的methods里添加函数

getGoodsGroup(){
const url = 'site/goods/getgoodsgroup/123'
this.$axios.get(url).then((response)=>{
this.goodsGroup = response.data.message
})
}

element-ui和iview按需导入

在最外面的div内定义transition组件，里面放要动画的元素
给要动画的元素设置css过渡样式：
transition: all .5s
给要动画的元素设置显示隐藏：
v-show="isShowPic"
由另一个button设置触发事件，改变isShowPic
给transition组件添加动画钩子：
进入：@before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"
移出：@before-leave="beforeLeave" @leave="leave" @after-leave="afterLeave"
在methods中定义各个动画钩子
beforeEnter: function (el) {
el.style = 'transform:translateX(200px)'
},
enter: function (el, done) {
el.offsetWidth
el.style.transform = 'translateX(0px)'
done()
},
afterEnter: function (el) {
this.isShow = false
},
beforeLeave: function (el) {
el.style = 'transform:translateX(0px)'
},
leave: function (el, done) {
el.offsetWidth
el.style = 'transform:translateX(200px)'
el.addEventListener('transitionend', done)
},
afterLeave: function (el) {
this.isShow = false
}
注意：
- el指的是该动画元素
- 在before里写动画的起始状态或位置、enter或leave里写动画的结束状态或位置
- after里写动画的回调函数（如消失隐藏），在enter或leave里调用
- 关于done在进入时可直接调用，不过在离开时需要在过渡完成事件里调用
- 在enter或着leave中要添加el.offsetWidth刷新动画帧

运行vue init webpack vue_mall(项目名称)
进入项目文件夹下执行cnpm install安装package.json的依赖文件
运行项目执行npm run dev

设置css样式的style加了scoped导致，删掉就可还原

等视图渲染完成，然后拿着dom进行操作，有时候可能拿不到dom元素，或者有些效果出不来，可以尝试加200ms的延时
如：使用jQuery插件

本文由10bet发布于Web前端,转载请注明出处：vue个人笔记10bet

关键词：

10bet > Web前端 >

vue个人笔记10bet

频道精选

最火资讯