vue+element+js

我就是我 2024-04-17 18:50 41阅读 0赞

## 根据一个信息匹配显示不同的图片。在vue项目中如果想在data里面定义图片就必须加上require(图片路径) ##

比如，我的课程有语文数学英语。对应的有三张图片。我要显示他相应的图片。

这个时候我们可以用对象的键值对来写，键代表科目。值就是图片的地址

定义  
src:\{  
“语文”:require("…/…/…/…/assets/H5/H5set.png"),  
“数学”:require("…/…/…/…/assets/H5/H5set.png"),  
“英语”:require("…/…/…/…/assets/H5/H5set.png")  
\}  
使用

## vue中如何定义全局函数 ##

//在mian.js中写入函数

Vue.prototype.changeData = function ()\{

alert(‘执行成功’);

//在所有组件里可调用函数

this.changeData();

## vue路由设置，登录失效后跳转到去登录页面。登录后打开的是你最后登录的页面 ##

在router/index.js的最后

router.beforeEach((to,from,next)=>{
        if(to.meta.requireAuth){
            if(store.state.token != null && store.state.token !=''){
                 next();
              }else{
                  next({
                    path:'/index',
                    query:{redirect:to.fullPath}
                  })
              }
        }else{
          next();
        }
    })

然后再login页面写

在登录的时候把user 也就是用户的信息存起来。sessionStorage.setItem(‘user’, JSON.stringify(data));

登陆成功跳转页面时不能写死写成首页，而是下面这个：  
let redirect = decodeURIComponent(this. r o u t e . q u e r y . r e d i r e c t ∣ ∣ ′ / m a i n ′ ) ; t h i s . route.query.redirect || &\#x27;/main&\#x27;); this. route.query.redirect∣∣′/main′);this.router.push(\{ path: redirect \})// 获取登录成功后要跳转的路由。decodeURIComponent函数编码的 URI 进行解码–xlz

## Object.assign是什么意思啊 ##

使用到的地方有  
1，编辑table的某一行的时候。获取哪一行的数据给编辑的表格。

handleEdit: function (index, row) {
             this.editFormVisible = true;
             this.editForm = Object.assign({}, row);
     },

2，提交的时候。把data里面定义的一个对象赋值给一个变量，然后把这个变量传给后台。

let para = Object.assign({}, this.editForm);
     editAffairtype(para).then((res) => {})

3.合并两个变量为一个

let para={name:'1'};
    let para2={name2:'1'};
    let a=Object.assign(para,para2);   //a就是{name:'1';name2:'1'}

## element-ui报错Cannot read property ‘resetFields’ of undefined ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70]  
这个错误是因为你的dom元素还没有加载完，你就想使用resetFields置空。也就是你写的this. r e f s \[ ′ a d d F o r m ′ \] . r e s e t F i e l d s ( ) ; 这 个 里 面 的 a d d F o r m 还 没 有 加 载 出 来 呢 。 解 决 ： t h i s refs\[&\#x27;addForm&\#x27;\].resetFields();这个里面的addForm还没有加载出来呢。 解决： this refs\[′addForm′\].resetFields();这个里面的addForm还没有加载出来呢。解决：thisnextTick(()=>\{  
this.$refs\[‘addForm’\].resetFields();  
\})

## Vue.js中this.$nextTick()的使用 ##

this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上  
比如

<template>
      <section>
        <h1 ref="hello">{
       { value }}</h1>
        <el-button type="danger" @click="get">点击</el-button>
      </section>
    </template>
    <script>
      export default {
        data() {
          return {
            value: 'Hello World ~'
          };
        },
        methods: {
          get() {
            this.value = '你好啊';
            console.log(this.$refs['hello'].innerText);
            this.$nextTick(() => {
              console.log(this.$refs['hello'].innerText);
            });
          }
        },
        mounted() {
        },
        created() {
        }
      }
    </script>

打印的结果就是先打印 helloworld 再打印 你好啊  
根据上面的例子可以看出，在方法里直接打印的话， 由于dom元素还没有更新， 因此打印出来的还是未改变之前的值，而通过this.$nextTick()获取到的值为dom更新之后的值  
更详细的内容可以参考  
https://www.cnblogs.com/jin-zhe/p/9985436.html

## this.$ref的用法 ##

一般来讲，获取DOM元素，需document.querySelector（".input1"）获取这个dom节点，然后在获取input1的值。  
但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定input1，然后$refs里面调用就行

## 解决this.$router.push无法在新窗口打开 ##

let routeData = this.$router.resolve({ path: '/reportpreview', query: { id: id } });
    window.open(routeData.href, '_blank');

## 存取数据localstorage ##

存

localStorage.setItem('PaperMsg',JSON.stringify(this.resourceLists));
    localStorage.setItem('chosedResourceids',JSON.stringify(this.chosedids))

取

var msg=localStorage.getItem('PaperMsg')
    var ids=localStorage.getItem('chosedResourceids')
    if()msg{
       this.resourceLists=JSON.parse(msg);
       this.chosedids=JSON.parse(ids);
    }

## Vue对象的选项 ##

data: "声明需要响应式绑定的数据对象", 
    props: "接收来自父组件的数据",  
    propsData: "创建实例时手动传递props，方便测试props",
    computed: "计算属性",  
    methods: "定义可以通过vm对象访问的方法",  
    watch: "Vue实例化时会调用$watch()方法遍历watch对象的每个属性",
    el: "将页面上已存在的DOM元素作为Vue实例的挂载目标",  
    template: "可以替换挂载元素的字符串模板",  
    render: "渲染函数，字符串模板的替代方案",  
    renderError: "仅用于开发环境，在render()出现错误时，提供另外的渲染输出",
    beforeCreate: "发生在Vue实例初始化之后，data observer和event/watcher事件被配置之前",  
    created: "发生在Vue实例初始化以及data observer和event/watcher事件被配置之后",  
    beforeMount: "挂载开始之前被调用，此时render()首次被调用",  
    mounted: "el被新建的vm.$el替换，并挂载到实例上之后调用",  
    beforeUpdate: "数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前",  
    updated: "数据更改导致虚拟DOM重新渲染和打补丁之后被调用", 
    activated: "keep-alive组件激活时调用",  
    deactivated: "keep-alive组件停用时调用",  
    beforeDestroy: "实例销毁之前调用，Vue实例依然可用",  
    destroyed: "Vue实例销毁后调用，事件监听和子实例全部被移除，释放系统资源",
    directives: "包含Vue实例可用指令的哈希表",  
    filters: "包含Vue实例可用过滤器的哈希表",  
    components: "包含Vue实例可用组件的哈希表",
    parent: "指定当前实例的父实例，子实例用this.$parent访问父实例，父实例通过$children数组访问子实例",  
    mixins: "将属性混入Vue实例对象，并在Vue自身实例对象的属性被调用之前得到执行",  
    extends: "用于声明继承另一个组件，从而无需使用Vue.extend，便于扩展单文件组件",  
    provide&inject: "2个属性需要一起使用，用来向所有子组件注入依赖，类似于React的Context",
    name: "允许组件递归调用自身，便于调试时显示更加友好的警告信息",  
    delimiters: "改变模板字符串的风格，默认为{
       {}}",  
    functional: "让组件无状态(没有data)和无实例(没有this上下文)",  
    model: "允许自定义组件使用v-model时定制prop和event",  
    inheritAttrs: "默认情况下，父作用域的非props属性绑定会应用在子组件的根元素上。当编写嵌套有其它组件或元素的组件时，可以将该属性设置为false关闭这些默认行为",  
    comments: "设为true时会保留并且渲染模板中的HTML注释"

## vue里面引入引入fastclick ##

引入fastclick库：解决移动端300毫秒点击延迟  
把fastclick这个包安装到项目的依赖之中，–save表示开发与上线都需要  
npm install fastclick --save 如果写这个报错了，你再试试cnpm install fastclick --save  
然后在main.js里面添加上

import  FastClick  from  'fastclick'
    FastClick.attach(document.body);

## Vue.prototype.$itf=its 这是什么意思？使用一个函数里面的变量怎么引入 ##

一般在main.js里面我们会见到这样的代码。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 1]  
import its from ‘@/assets/common/interface’ 代表的是引入这个路径（@/assets/common/interface）下面的interface.js 的文件，因为设置了配置.js直接省略了。用its 作为别名  
Vue.prototype. i t f = i t s 代 表 在 其 他 所 有 的 v u e 页 面 中 都 可 以 使 用 t h i s . itf=its 代表在其他所有的vue页面中都可以使用this. itf=its代表在其他所有的vue页面中都可以使用this.itf 来代指这个文件its。如果你想访问its所指代的也就是interface.js 里面定义的某个值，就可以直接this.$itf.值的名字 就可以啦  
main里定义其他页面都可以通过this使用

## vue中的懒加载和按需加载，包括路由懒加载，子组件懒加载 ##

一、 什么是懒加载  
懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。  
二、为什么需要懒加载  
在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时  
1.路由懒加载

component: resolve => require(['../page/my/my.vue'], resolve),

2.组件懒加载

components: {
        historyTab:resolve => {
          require(['../../component/historyTab/historyTab.vue'],resolve)
       },
    },

3 全局懒加载  
Vue.component(‘mideaHeader’, () => \{  
System.import(’./component/header/header.vue’)  
\})

## vue-cli如何新增自定义指令 ##

1.创建局部指令

2.全局指令

Vue.directive('dir2', {
        inserted(el) {
            console.log(el);
        }
    })

3.指令的使用

## vue如何自定义一个过滤器 ##

html代码：

<div id="app">
         <input type="text" v-model="msg" />
         {
       {msg| capitalize }}
    </div>

JS代码

var vm=new Vue({
        el:"#app",
        data:{
            msg:''
        },
        filters: {
          capitalize: function (value) {
            if (!value) return ''
            value = value.toString()
            return value.charAt(0).toUpperCase() + value.slice(1)
          }
        }
    })

全局定义过滤器

Vue.filter('capitalize', function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    })

过滤器接收表达式的值 (msg) 作为第一个参数。capitalize 过滤器将会收到 msg的值作为第一个参数

## 对keep-alive 的了解 ##

keep-alive是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。  
在vue 2.1.0 版本之后，keep-alive新加入了两个属性: include(包含的组件缓存) 与 exclude(排除的组件不缓存，优先级大于include)  
使用方法

<keep-alive include='include_components' exclude='exclude_components'>
      <component>
        
      </component>
    </keep-alive>

参数解释  
include - 字符串或正则表达式，只有名称匹配的组件会被缓存  
exclude - 字符串或正则表达式，任何名称匹配的组件都不会被缓存  
include 和 exclude 的属性允许组件有条件地缓存。二者都可以用“，”分隔字符串、正则表达式、数组。当使用正则或者是数组时，要记得使用v-bind 。  
使用示例

<keep-alive include="a,b">
      <component></component>
    </keep-alive>
    
    
    <keep-alive :include="/a|b/">
      <component></component>
    </keep-alive>
    
    
    <keep-alive :include="['a', 'b']">
      <component></component>
    </keep-alive>

## 子组件父组件传值的三种方式 ##

https://blog.csdn.net/qq\_33769914/article/details/100093661

## vue得click事件得两种写法@click=batchRemove和@click=batchRemove()得区别 ##

@click=batchRemove没有括号时  
batchRemove:function(可能有隐含的默认得参数可以获取)\{\}  
而一旦写了括号就不能有隐含得参数，你可以传一定的已知的参数

## vue 项目引入i18n国际化 ##

步骤一：安装vue-i18n

npm install vue-i18n --save

步骤二：main.js文件的配置，在main.js中添加以下跟vue-i18n的使用有关的配置项

// 引入i18n国际化插件
    
    import VueI18n from 'vue-i18n'
    
    Vue.use(VueI18n)
    // 注册i18n实例并引入语言文件，文件格式等下解析
    const i18n = new VueI18n({
      locale: 'zh',
      messages: {
        'zh': require('@/assets/languages/zh.json'),  //两个json文件，一个zh是中文。en是英文
        'en': require('@/assets/languages/en.json')
      }
    })
    //将i18n注入到vue实例中
    new Vue({
      el: '#app',
      router,
      i18n,///从新定义的一个变量，这个变量是全局的可以在整个项目里使用
      render: h => h(App)
    })

en.json：

{
        "common": {
            "welcome": "Welcome, ",
            "userinfo": "Userinfo"
        },
        "message": {
            "hint1": "Please Input Nickname"
        }
    }

zh.json

{
        "common": {
            "welcome": "欢迎你, ",
            "userinfo": "用户信息"   //注意最后一个没有，
        },
        "message": {
            "hint1": "请输入昵称"
        }
    }

我们再具体的页面引用这个变量的方式是:  
\{ \{$t(“common.welcome”)\}\}  
简单的页面运用

{
       {$t("common.welcome")}}
    
    {
       {$t("common.userinfo")}}
    
    {
       {$t("message.hint1")}}
    
    <div @click="changeLang">切换语言</div>

切换语言  
changeLang()\{  
let lang=this. i 18 n . l o c a l e = = = ′ z h ′ ? ′ e n ′ : ′ z h ′ ; t h i s . i18n.locale===&\#x27;zh&\#x27;?&\#x27;en&\#x27;:&\#x27;zh&\#x27;; this. i18n.locale===′zh′?′en′:′zh′;this.i18n.locale=lang;  
\},

## es6笔记·····find()和findIndex() ##

数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined

[1, 4, -5, 10].find((n) => n < 0)
    // -5

上面代码找出数组中第一个小于0的成员

[1, 5, 10, 15].find(function(value, index, arr) {
      return value > 9;
    })
     // 10

上面代码中，find方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组  
数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1

[1, 5, 10, 15].findIndex(function(value, index, arr) {
      return value > 9;
    }) 
    // 2

这两个方法都可以接受第二个参数，用来绑定回调函数的this对象。

## Array.of()把一串数字转化为数组 ##

Array.of(3, 11, 8)  
Array.of(3)  
![在这里插入图片描述][20190830143714215.png]

## 扩展运算符三个点（…） ##

…array 代表将一个数组转为用逗号分隔的参数序列还可以将字符串转为真正的数组。。

[...'hello']
    // [ "h", "e", "l", "l", "o" ]

function add(x, y) {  
      return x + y;
    } 
    const numbers = [4, 38];
    add(...numbers) // 42

求出一个数组最大元素的写法

Math.max(...[14, 3, 77])

两个数组合并成一个。push

let arr1 = [0, 1, 2];
    let arr2 = [3, 4, 5];
    arr1.push(...arr2);

合并多个数组

/ ES5 的合并数组
    arr1.concat(arr2, arr3);
    // [ 'a', 'b', 'c', 'd', 'e' ] 
    // ES6 的合并数组
    [...arr1, ...arr2, ...arr3]

## 判断数据类型是数字Number.isFinite(),判断数据类型是非数字值isNaN() 函数 ##

判断是否为数字Number.isFinite(xx);

Number.isFinite(11/4); //true
    Number.isFinite('jie'); //false
    Number.isFinite(NaN);//false
    Number.isFinite(undefined);//false

判断数据类型是非数字值isNaN() 函数.非数字返回true。数字返回false

isNaN(123);//false
    isNaN(-1.23);//false
    isNaN(5-2);//false
    isNaN(0);//false
    isNaN("Hello");//true
    isNaN("2005/12/12");//true

## js取出数组中的最大值和最小值 ##

var a=[1,2,3,5];
    alert(Math.max.apply(null, a));//最大值
    alert(Math.min.apply(null, a));//最小值

## vue插槽 ##

一个父组件里面有个引用的子组件。但是子组件需要显示的内容并非来自本身。  
子组件是son.vue的内容

<template>
        <div>
            <slot name='header'></slot>
            <slot name='footer'></slot>
            我是子组件啊！
        </div>
    </template>

父组件是father.vue的内容是

<template>
        <div>
           我是父组件啊！
           以下是子组件
           <son>
                <p slot='header'>头部</p>
                <p slot='footer'>尾部</p>
           </son>
        </div>
    </template>

这个时候显示的就是  
我是父组件啊！！！  
下面是子组件：  
头部  
尾部  
我是子组件啊！！！

## element中el-switch怎么赋值数组中的数据 ##

①el-swich嵌套在表格中el-table

这里的el-switch嵌套在表格中，0为开，1为关，表格的tableData数据为一个数组，所以我们可以用一个插槽，即

把el-switch包起来，再用v-model给它赋值scope.row.state,同时还需要声明active-value即激活时字符串值为0，不激活时字符串值为1.

**请注意以面的写法**，active-value和inactive-value的值分别是字符串的1和2,如果你赋值为数字类型的 1 或 2是无法正常工作的，若赋值为数值类型，需这样写：

<el-switch v-model="state"
         :active-value="1"
         :inactive-value="2"
         @change=chang($event,state)>
    </el-switch>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 2]  
②el-switch嵌套在表单中，比如一个el-dialog弹出框的表单对象中  
这种情况，我们就不需要对el-switch进行多余的处理，只需要给它绑定数据就行，同时声明active-value即激活时字符串值为0，不激活时字符串值为1.  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/a476b10f54d3403181023ee62ae3167b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/74449171f18a4263bb1733e6a93fc402.png
[20190830143714215.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/b12e9cf31d1e431d9a49790acc4dcaeb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/9fe547768a28431abd960297e3ccdc15.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/a43436cf1853402193db8ec7bd3f8d07.jpg

vue+element+js

发表评论取消回复

还没有评论，来说两句吧...

相关阅读