vue以及常用的框架

最新推荐文章于 2024-06-18 17:21:06 发布

王德发快来扶我

最新推荐文章于 2024-06-18 17:21:06 发布

阅读量855

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45059879/article/details/121678763

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、vue

1.关于vue

1.1 vue基础

1）特点
在这里插入图片描述

1.2 常用函数

1）computed：动态计算属性，在data中不需要事先声明变量
一般只有用于读取，只写get就可以了

computed:{
    total:{
      get(){
         //计算逻辑并且返回计算的值，当有人读取total时，就会调用total的get计算方法并且返回结果作为total的值
         return price*num;
      },
      set(value){
      //1.当初次读取total时调用，2.当所依赖的数据发生变化
           this.price=;//引起依赖数据变化，进而使用total地方变化
           this.num=;//引起依赖数据变化，进而使用total地方变化
           
      }
    }
}

//简写
computed:{
    total(){
         //计算逻辑并且返回计算的值，当有人读取total时，就会调用total的get计算方法并且返回结果作为total的值
         return price*num;
    }
}

2）watch:监事属性，属性需要在data中声明,也可以监听computed中得属性

watch:{
   监视的变量:{
       immediate:true;//在初始化时调用handler函数，默认为false，
       deep:true;//支持对象里多层级的属性监测，默认是false,也就是一层	
       handler(oldValue,newValue){
        //当监听的变量发生变化时，回去执行操作
       }
   }
}

//也可以使用$watch('属性',function(oldValue,newValue){})


//简写形式，只写handler事件
watch:{
   属性名(oldValue,newValue){}
}

3）关于watch和computed使用的比较
①如果监测的变量是用来计算另一个变量的，那么建议使用computed
②如果监测的变量就是用改变自身的，那么建议使用watch,而且watch中可以使用延时setTimeOut函数，这个使用函数要使用箭头的方式声明，因为这个延时函数是属于Window的，使用箭头的this指向的就是当前的vue对象。

1.3常用事件

1）@dblclick=“双击事件”

1.4生命周期

1）Model和View的加载
beforeCreated()：初始化事件和生命周期，但是data代理还没未开始，这个时候还不能访问data数据和methods中得方法
created()：初始化数据代理，这个时候可以访问data中得数据和methods中得方法
beforeMounted()：挂载之前，未经Vue编译的DOM，加载真实DOM之前，这个时候操作DOM最终不会生效（在这里可以操作DOM，但是最终会被刷掉，真实DOM会替换掉你设置的效果，运行速度很快）
mounted()：在vue将template中得虚拟dom转换成真实的dom并且渲染到页面之后的回调函数

2）数据更新
beforeUpdate()：数据更新了，但是DOM还未更新
根据新的数据，生成新的虚拟DOM，完成试图更新渲染，Model->View
updated()：数据和试图都更新了，都是新的

3）销毁
beforeDestroy：在这里面修改数据不会引起更新（数据实际上更新了，但是视图没有更新），清除定时器,取消订阅等等destroyed不会清空定时器
destoryed：销毁，子组件，监听器，函数，数据不可用。销毁后原生的DOM事件还在，@click

在这里插入图片描述

2.常用API和JS操作

1）JSON.parse()，转JSON对象
2）JSON.stringify()，转字符串
3）字符串.replace(/需要替换的内容/g,“替换之后的内容”)，可以替换掉JSON中得字段
4）遍历数组，(var index in 数组对象)
5）${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}，date转换
6）字符串拼接，str=str.concat(‘a’,‘a’,‘ba’,‘c’);返回是拼接好的字符串
7）let声明局部变量，只在当前let代码块中生效
8）声明全局变量Vue.prototype.变量名 = {} , this.变量名
9）声明全局函数 Vue.prorttype.函数名 = function (){}, this.函数名();
10）时间字符串转date，并且比较大小,

var date1 = new Date(year,month-1,day,hour,minute,second);
var date1 = new Date(year,month-1,day,hour,minute,second);
date1>date2,//true or false

11）数组比较大小

var arr = [];
arr.sort(function(o1,o2){return o1>o2;})//从小到大

3.常用功能实现

2.1 代码控制路由跳转

 this.$router.push({path:'/testDemo',query:{setid:123456}}); //看得见URL参数
 this.$router.push({name:'testDemo',params:{setid:111222}}); //看不见URL参数,一定要注意路由中必要要有name属性，并且还要求使用“”或者是''包裹，但是实测传入JSON数据还是会显示参数信息

 this.$route.query/params.info; //取出参数

2.2 局部刷新（删除之后，重载数据）

1）使用弹窗确定按钮删除，但是then方法里面不是同步的，当前弹窗封装第一个
2）解决的源头就是要两个字：同步
2）解决方案：axios嵌套同步，async/await同步，当前页面剔除掉当前删除的数据，直接刷新页面，使用原生JS同步httprequest。


        async delInfo(del){
           
            //this.select("delDelivery?eId="+this.id+"&iId="+this.rectinfo[del].iId,this.rectinfo,"findDelivery?eId="+this.id+"&status=-1")
            // this.select2("delDelivery?eId="+this.id+"&iId="+this.rectinfo[del].iId)
            // this.getSubInfo(-1); 
            await this.select("delDelivery?eId="+this.id+"&iId="+this.rectinfo[del].iId);
            this.getSubInfo(-1);
        },
Vue.prototype.select = async function(uri){
  await Dialog.confirm({
    message: "是否要删除"
  })
    .then(async () => {
      await this.axios.get(uri).then((response)=>{
        //location.reload();
        this.show("true","删除成功");
      })
    }) 
    .catch(() => {
      // on cancel
    });
}

4.父子组件

4.1、定义和传值

1、父组件
①父组件使用的组件名字如果是驼峰命名，那么可以使用-作为分隔符,eg:doSome===do-some
②父组件中必须导入和声明才能使用

//父组件
<script>
import showPeople from '../public/showPeople.vue'
export default {
    components:{showPeople},
    data(){return{}},
    created(){},
    methods:{},
    }
</script>

//子组件
<script>
export default {
    props: {
        data: {
            type: Object,
            default () {
                return {}
            }
        }
    },
    //也可以简单一点,props:['参数名','参数名']
    data(){
        return{
        }
    },
    craeted(){
    },
    methods:{
    },
    }
</script>

2、子组件

4.2 、互相调用

1）这种关系存在于组件嵌套中
2）子组件调用this. $e m i t (^{'} 事件名^{'},^{'} 参数^{'}), 可以调用父组件中得事件方法 3 ）父组件调用字符键，可以使用 r e f 属性标注在使用的子组件上，使用 t h i s .$ refs[ref名字][0].方法()调用(这个[0]有时又是不需要的？)；如果子组件是数组形式遍历的可以使用数组下标作为ref的名字。


<li v-for="file in fileList" :key="file.id" style="margin-top:10px">
	<uploader-file :file="file" :list="true" :ref="file.id"></uploader-file>
</li>

for(var index in this.fileList){
    if(this.fileList[index].paused) {
       this.$refs[this.fileList[index].id][0].resume();
     }
 }

5、使用原生document或者this.$refs操作标签或者子组件

如果能够直接使用获取准确的dom，没问题
如果能获取到[]，但是获取具体的某一个dom报错，那么需要使用this.$nextTick();

      let that = this;
      console.log(this.$refs);
      this.$nextTick(()=>{
        that.$refs[that.newname][0].focus();
      });

6、插槽

个人理解：使用其他标签去替换原有属性所在的标签的样式，也可以使用template #属性名，很好用

    <van-card class="goods-card" @click="doSome">
        {{data.username}}
        <template #title>
        </template>
        <template #desc>
        </template>
        <template #price>
            price
        </template>
        <template #thumb>
            图片
        </template>
    </van-card>
    
              <van-swipe-cell>
                   <show-people :data="item"></show-people>
                   <template #left>
                       <div style="height:100%;margin-right:20px;">
                           <van-button v-if="!authority" square text="授权" type="primary" class="delete-button" style="height:100%;" @click="updateAuthority(index)"/>
                           <van-button v-if="authority" square text="冻结" type="info" class="delete-button" style="height:100%;" @click="updateAuthority(index)"/>
                       </div>
                   </template>
               </van-swipe-cell>

7、vue中全局设置

7.1 vuex中store全局变量

1）需要提前安装vuex
2）在项目新建store文件夹和store.js文件

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 定义各种全局变量，刷新页面进行初始化
    currentUser:{
        type:JSON.parse(localStorage.getItem("admin"))?JSON.parse(localStorage.getItem("admin")).type:-1,
        name:""
    }
  },
  mutations: {
    //定义各种方法，设置变量的值,异步修改
    setType(state,val){state.currentUser.type=val;},
    setName(state,val){state.currentUser.name=val;}
  }
})

//使用
this.$store.state.属性名
this.$store.commit("修改的方法名",修改的值);

3）main.js中vue对象中添加store

import store from './store/store'
Vue.use(Vuex);
new Vue({
  el: '#app',
  router,
  store,//添加store
  components: { App },
  template: '<App/>'
})

7.2main.js添加在vue原型链上的变量

<font color="red’>直接添加在原型链上的全局变量，无法在组件中进行监听和双向绑定，只能在methods中的响应式函数中调用，很难实现在其他组件中修改然后全局刷新显示的功能，我通常使用来存储用户个人信息等一些全局使用而不会改变的变量，或者不用监听，用来函数调用暂存的一个缓存区域，如果要全局监视，建议使用store

Vue.prototype.userType = "dufault" //

7.3静态变量

通常存储一些常量，比如全国的省份信息，学历信息，后端接口信息等等

//第一种：直接以变量形式
<script>
const info = {};
const info2 = [];
export default {info,info2} //导出变量
<script>

//第二种：以函数返回值形式,这里我没有加script标签，
function urls(){
	return {
		delete:{"deleteOne":"/project/doDelete","deleteTwo":"/project/doDeleteTwo"},
		add:{},
		modify:{},
	}
}
export {urls}

//如果不设置全局，直接在需要使用的组件中引入即可
import {info,info2} from '@/components/路径/文件名'

//如果需要设置全局
import urls from '@/components/路径/文件名'
Vue.prototype.$urls(变量名，通常前面加一个$符号) = urls();

7.4全局变量的个性化命名和axios封装

1）其实自身定义的变量都是可以在main.js中重名名加入原型链中得
2）Vue.prototype.变量名/函数名 = 变量/function (){};
3）静态变量引入全局就是这个方法
4）封装axios

import axios from 'axios';
import VueAxios from 'vue-axios';

Vue.prototype.$axios = axios;//名字
// window.HTTP = axios;这种样式就是最高层的了，在函数中不需要使用this定位到vm对象就可以直接调用。
// HTTP.GET/POST(url,params).then(success=>{},error=>{})
axios.defaults.baseURL = 'http://localhost:8080/epin/';//默认路由
axios.defaults.withCredentials=true;//前后端分离默认不自动带上cookie

5）axios拦截器，如果你要获取this是vue对象，那么需要等待主界面的真实dom加载完毕，也就是main.js中得 new Vue().$mount("#app")，注意里面的vue对象不能扫描el:"#App"对象，不然报错

new Vue({
//不要添加el:""元素
  router,
  store,
  components: { App },
  template: '<App/>',
  created() {
    this._initialize();
  },
  methods: {
    _initialize()
    {
      console.log(this);
      //请求拦截器
      axios.interceptors.request.use(
        config => {
          console.log(this);
         
          return config;
        },
        error => {
          
          return Promise.reject(error);
        }
      );

      //响应拦截器
      axios.interceptors.response.use(
          response=>{
            
            return response;
          },
          error=>{
            
            return Promise.reject(error);
          }
      )
    }
  }
}).$mount('#app') //后面要带主界面，等待注解dom生效

二、vant学习

1）如果有些组件没有提供修改内部样式的API，可以自己在页面中使用调试工具找到对应的DOM和Class，然后自定义渲染组件，注意，可能会爆红，但是项目能正常启动，不会出错。需要将你的样式单独的style不含scoped中，这样可能会引起和其他页面中得组件中使用的样式混淆
/deep/ .van-checkbox__label–disabled{
color: #333333;
}

三、element-ui学习

1、常用功能实现

1.1、遮罩层

Vue.prototype.openLoading = function(text) {
  let msg = typeof(text)=="undefined"?"加载中...":text;
  const loading = this.$loading({           // 声明一个loading对象
    lock: true,                             // 是否锁屏
    text: text,                     // 加载动画的文字
    spinner: 'el-icon-loading',             // 引入的loading图标
    background: 'rgba(0, 0, 0, 0.3)',       // 背景颜色
    target: '.sub-main',                    // 需要遮罩的区域
    body: true,                              
    customClass: 'mask'                     // 遮罩层新增类名
  })
  return loading;
}
使用时，直接 var loading = this.openLoading("提示语句");完成时,loading.close();