vue单文件开发

vue学习生命周期2021.7.26

组件异步加载

ref

1、如果给标签添加ref就是获取的真是dom节点。
2、如果给子组件添加ref就是获取子组件对象

异步更新队列

为了方便在加载页面数据变化时获取更新后的Dom

Vue.$nextTick(()=>{
});//回调函数

对象变更检测

Vue不能检测对象的更新和删除

//添加**响应式**数据或者属性
Vue.set(Object,key,value);//添加响应式数据
Object =Object.assign(beforeObject,targetObject,{data});//添加多个数据属性

偷懒技术mixin混入

分发vue组件都有的东西

mixins:[toShow],

Vue-cli3开发单文件组件–脚手架

Vue.component();
vu =new Vue({});

缺点

1. 全局定义组件名字不能重复
2. 字符串模板 es6提供了模板字符串 \
3. 不支持css全局就都用不正对啥class
4. 没有构建步骤

• 在vue中把.vue的文件称为单文件组件解决以上文件，但是浏览器不支持.vue文件，webpack可以解决

解释

帮助使用者构建了一个架子让你更快的构架

• 首先安装node.js
• 然后通过控制端写npm install -g cnpm --registry=https://registry.npm.taobao.org下载淘宝镜像源
• 然后再写cnpm install -g @vue/cli下载脚手架

快速原型开发

首先安装一个全局的扩展

命令框 npm install -g @vue/cli -service-global

点击你创建的文件再终端打开

输入npm init初始化

vue-cli3快速生成项目

终端写vue create 项目名字 生成新的项目
然后cd 项目名，然后npm run serve就可以运行项目

对象.forEach(c=>{

);
//c就是对象里面的东西，遍历对象
对象.reduce((sum,c)={

},0);//sum开始等于0即第二个参数为你第一传入的参数,c是对象里面的东西

对象.splice(i,1);
从当前位置删除一个数组

购物车demo坑点

1、Mock数据模拟

首先Mock模拟数据

在main文件下面直接加一个vue.config.js文件，在里面配置，

module.exports = {
   devServer:{
       //mock模拟数据(app,server)
       before(app,server) {
           app.get("/api/cartList",(requset,response) => {
               result=[
                {id:1,price:188,name:"Vue实战开发",count:1,active:true},
                {id:2,price:288,name:"React实战开发",count:1,active:true},
               ]
               response.send(JSON.stringify(result));
           });
       },
   }
  }

！注意这里的主机地址为：http://localhost:8080/！不要搞错了

在main文件里面把axios加入原型里面

import Vue from 'vue'
import App from './App.vue'
import axios from "axios"
Vue.config.productionTip = false;
Vue.prototype.$http=axios;//主文件里面用this.$http就可以直接使用
Vue.prototype.$bus=new Vue();
new Vue({
  render: h => h(App),
}).$mount('#app')

3、在文件创建时就请求数据

  async created () {
    try {
     const res= await this.$http.get("/api/cartList");
     console.log(res.data);
     this.shopList=res.data;
    } catch (error) {
      console.log("error!");
    }
  },

！使用try{}catch（error）{}可以很好的解决调用地域问题！

2、数据持久化

注意公交车对象的使用

Vue.prototype.$bus=new Vue();

这样就可以使用

this.$bus.$emit("传送名称",数据);
this.$bus.$on("传送名称必须一致",数据=>{});

！数据接受的时候注意this的指向特别要用箭头函数！

        created() {
            this.$bus.$on('addGood', good => {
                const re = this.shopList.find(v => v.id === good.id);
                if (!re) {
                    this.shopList.push(good);
                } else {
                    re.count+=1;
                }
                console.log(this.shopList);
            });
        },

监视格式必须和下面一样只能用handler

        watch: {
            shopList:{
                handler(n,o){
                    this.setLocalStorage(n);
                    console.log(n,o);
                },
                deep:true//数组深度监视
            }
        },

！数据储存的时候注意存的时候要用字符，获取的时候记得转化，函数是localStorage！

localStorage.setItem("cart", JSON.stringify(n));
JSON.parse(localStorage.getItem("cart"))