精华内容
下载资源
问答
  • vue项目难点
    千次阅读
    2021-09-03 17:49:21

    1. input中type为number时 max-length 失效

      解决:input type="tel"

    2. vue组件中click事件失效

      解决:使用了bette-scroll插件做滚动。加.native也不好使,发现better-scroll的配置中没有设置 click:true,设置过之后click事件成功。

    3. 不同商品页,id变化,商品不变

      监听$route变化,然后获取id重新去取数据。

    4. 修改完数据点击提交后,数据变了 页面数据没有更新

      原因:因为vue的检查机制在进行视图更新时无法监测 数组中的某个对象的属性值的变化。(数据是引用数据类型,数据上没有get set方法)

      方案一:利用 this.set(this.obj,key,val)

      解析:第一个参数目标对象,第二个参数要修改数据下标,第三个参数修改后的新值。

      方案二:也可以使用$nextTick()这个方法

      解析:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM,

      Vue 在更新 DOM时是异步执行的。当数据发生变化,Vue将开启一个异步更新队列,视图需要等队列中所有数据变化完成之后,再统一进行更新!

      方案三:this.$forceUpdate(); //可以直接使用这个是强制更新 但不推荐使用

      调用强制更新方法this.$forceUpdate()会更新视图和数据,触发updated生命周期。

    更多相关内容
  • vue项目中遇到的难点面试.pdf
  • 在声动语商项目中,需求更改后,出现一个:教师发布课程的时候要求一个课程同时发送给多个班级。 现在的接口:每次只能发送一个班级的id,也就是:classesId字段只能传一个班级的id,因此为了满足这个新需求就想着:...
  • 今天忙里偷闲,简单总结一下最近vue项目重构的一些技术要点。 vue数据更新, 视图未更新 这个问题我们经常会遇到,一般是vue数据赋值的时候,vue数据变化了,但是视图没有更新。这个不算是项目重构的技术要点,也和...
  • 这里给大家分享一下vue中的一些技巧,希望对大家有用处。(话不多说上代码) 1,vue路由拦截浏览器后退实现表单保存类似需求(为了防止用户突然离开,没有保存已输入的信息。) //在路由组件中: mounted(){ }, ...
  • Vue项目遇到的一些难点

    千次阅读 2022-05-09 15:56:28
    1、使用axios.js处理异步加载时发现请求时传递参数会直接发送js对象到后端 而不是发送Form Data 而且post 请求 会发送两次请求 第一...Vue-router 提供一个mode参数 用来控制 URL 格式 默认使用的是 hash格式 而我在...

    1、使用axios.js 处理异步加载时发现请求时传递参数会直接发送js对象到后端 而不是发送Form Data 而且post 请求 会发送两次请求  第一次是 methodoptions 第二次才是post

    解决方法:配合qs插件使用 也就是将对象格式化成 Form Data  类似jquery中的serialiZeArray()方法

    2、使用vue-routerURL模式引发的问题?

    Vue-router 提供一个mode参数 用来控制 URL 格式 默认使用的是 hash格式 而我在项目中使用的是history格式

    对比:使用history 后发现手动切换页面一切正常 但刷新页面是会提示页面不存在(404) 原因就是后端把URL解析了,使用hash模式 URL中会有一个#号分割 后端默认不会解析#后面的参数

    3、Vue 项目中 用v-for循环本地图片 图片不显示

    解决方法:使用require动态引入图片  或者将图片放static文件夹里

    <img v-bind:src="require(item.imgurl)">

    4、elementui中 防止错误提示框多个弹出 可以直接调用(Message as  any).colseAll() ; 也可从新 Message()方法

    展开全文
  • vue重点难点

    2021-07-12 17:00:52
    vue重点难点 1.安装环境以及初始化单页项目 (1)安装node.js node中会自带npm (2)网络不好时可用cnpm代替npm ...(5)初始化vue项目 vue init webpack my-project (6)安装依赖包 cnpm install (7)运行项目 cnpm run dev (8

    vue重点难点
    1.安装环境以及初始化单页项目
    (1)安装node.js node中会自带npm
    (2)网络不好时可用cnpm代替npm cnpm install npm -g
    (3)安装vue cnpm install vue
    (4)安装vue-cli,用于快速搭建大型单页应用 cnpm install --global vue-cli
    (5)初始化vue项目 vue init webpack my-project
    (6)安装依赖包 cnpm install
    (7)运行项目 cnpm run dev
    (8)编译项目,编译项目后在dist文件夹下 cnpm run build
    2.MVVM
    MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心,它是连接view和model的桥梁。它有两个方向:一是将【模型】转化成【视图】,即将后端传递的数据转化成所看到的页面。实现的方式是:数据绑定。二是将【视图】转化成【模型】,即将所看到的页面转化成后端的数据。实现的方式是:DOM事件监听。这两个方向都实现的,我们称之为数据的双向绑定。
    3.vue数据绑定
    (1)插值绑定
    文本插值–{{value}} data中声明变量value
     

    html插值<div v-html="innerhtml"></div>  
    

    data中声明变量用于存储html数据 innerhtml=<h1>这是一个标题</h1>
    (2)属性绑定
    v-bind指令 dom节点属性基本都可以用v-bind进行绑定

    <div v-bind:class="className" v-bind:title="title"></div> 
    <button v-bind:disabled="10+10==20"></button>
     <input v-bind:tyep="'text'"></input>
    

    v-bind可以省略 例如

    <p :class="className" :title="title"></p>
    

    (3)事件绑定

    v-on <button v-on:click="handle()">click</button> 
    

    也可简写为

    <button @click="handle()">click</button>
    

    按键

     <input type="text" @keyup.enter="handle()"></input>
    

    (4)双向绑定

    <input type="text" v-model="inputText"></input>
    

    (5)条件及列表
    v-if v-show v-if无实际dom节点 v-show存在dom节点,只是display:none
    v-if

    <h1 v-if="true">This is tittle</h1>
    

    v-if v-else-if

    <div v-if="type === 'A'">A</div>
    <div v-else-if="type === 'B'">B</div>
    <div v-else>C</div>
    

    v-for

    <ul>
    		<li v-for="(value, key) in lists">
    		{{ key }} : {{ value }}
    		</li>
    	</ul>
    

    4.声明周期

    beforeCreate: function() {
    console.group(‘beforeCreate-------’);
    },
    created: function() {
    console.group(‘reated-----’);
    },
    beforeMount: function() {
    console.group(‘beforeMount-------’);
    },
    mounted: function() {
    console.group(‘mounted------’);
    },
    beforeUpdate: function () {
    console.group(‘beforeUpdate-----------’);
    },
    updated: function () {
    console.group(‘updated---------------’);
    },
    beforeDestroy: function () {
    console.group(‘beforeDestroy---------------------’);
    },
    destroyed: function () {
    console.group(‘destroyed -------------------’);
    }

    5.使用外部组件
    (1)js中引入子组件 import child from “child”
    (2)components中声明 components: {TreeGraph}
    (3)使用子组件
    6.组件间传值
    (1)js中引入子组件 import child from “child”
    (2)components中声明 components: {TreeGraph}
    (3)使用子组件
    (4)子组件通过props获取值 props: {data: Array}
    (5)使用data {{data}} this.data
    7.路由
    (1)通过npm安装vue-router
    (2)新建router.js import VueRouter from ‘vue-router’
    (3)
     

     Vue.use(VueRouter)
    	export default new VueRouter({
    		routes: [
    			{
    				path: '/parent',
    				name: 'parent',
    				component: parent
    			},
    			{
    				path: '/parent1',
    				name: 'parent1',
    				component: parent1,
    				children: [
    					{
    						path: '/child',
    						name: 'child',
    						component: child
    					} 
    				]
    			},
    		]
    	}) 
    

    (4)引入路由import router from ‘./router’
    (5)

     new Vue({
    	  el: '#app',
    	  router,
    	  components: { App },
    	  template: '<App/>',
    	  created() {
    	  }
    	})
    

    (6)页面使用路由

    <router-link to="/parent">路由测试</router-link>
      <div><router-view></router-view></div>
    

    8.获取接口资源

    npm install axios
    axios
          .get('url')
          .then(response => (this.info = response))
          .catch(function (error) { // 请求失败处理
            console.log(error);
          });
     axios
          .post("url", postJson)
          .then(response => {
            if (response.status == 200) {
                );
              });
            }
          })
    

    9.vuex

    展开全文
  • vue项目技术点总结,vue难点

    千次阅读 2020-09-24 15:20:12
    后台项目总结: 一.封装localStorage 我的规范—在src下创建一个utils文件夹,专门存放封装的js文件 封装localStorage创建saveLocal.js,代码如下 let storage = { set(key, value) { localStorage.setItem(key, ...

    后台项目总结:

    一.封装localStorage

    我的规范—在src下创建一个utils文件夹,专门存放封装的js文件

    封装localStorage创建saveLocal.js,代码如下

    let storage = {
      set(key, value) {
        localStorage.setItem(key, JSON.stringify(value));
      },
      get(key) {
        return JSON.parse(localStorage.getItem(key));
      },
      remove(key) {
        localStorage.removeItem(key);
      }
    };
    export default storage;
    

    如何使用?

    1.全局使用(vue文件中),mian.js文件引入

    import storage from "@/utils/saveLocal.js";//localstorage保存数据   ---后缀名.js可以=省略,下面也是
    Vue.prototype.$storage = storage;
    //这里用的@代表在src为根目录
    

    使用:

    this.$storage.set('uid','1')//创建
    this.$storage.get('uid')//获取
    this.$storage.remove('uid')//移除
    

    2.局部引入(vue文件中)

    import Storage from "@/utils/saveLocal.js";//localstorage保存数据
    

    使用:

    Storage.set('uid','1')//创建
    Storage.get('uid')//获取
    Storage.remove('uid')//移除
    

    3.局部引入(js文件中)和上面一致

    import Storage from "@/utils/saveLocal.js";
    

    使用:

    Storage.set('uid','1')//创建
    Storage.get('uid')//获取
    Storage.remove('uid')//移除
    

    二.封装接口 及请求拦截和响应拦截

    我的规范—在src下创建一个api文件夹,专门存放封装的js文件

    封装接口用data.js,封装请求和拦截用config.js,代码如下

    首先看config.js

    import axios from "axios";
    import saveLocal from "@/utils/saveLocal";
    import { Message } from 'element-ui';
    import router from '@/router'
    // 配置请求的根路径
    // axios.defaults.baseURL = "/api";
    axios.defaults.baseURL = "http://192.168.3.168:1210";
    axios.defaults.timeout = 10000;
    //用到cookie需要添加下面代码
    // axios.defaults.withCredentials = true;
    //请求拦截
    axios.interceptors.request.use(
      config => {
        if (saveLocal.get("session")) {
            //判断是否有token,这里session是后台返回的一段字符串,和token一个理
            //如果有,请求的时候就加上
          config.headers['session'] = saveLocal.get("session")
            //上面是我这边后台要求加的方式
            //其他项目都是加到Authorization上
            //config.headers.Authorization = saveLocal.get("session");
        }
        return config;
      },
      error => {
        console.log(error, "接口出错了99000");
        return Promise.reject(error);
      }
    );
    // 响应拦截
    axios.interceptors.response.use(
      config => {
        // console.log(config)
        if (config.data.code == 11004) {
          router.push('/login')
        }
        return config;
      },
      error => {
        Message.error('请重新登录')
        console.log(error, "接口出错了");
          //下面返回状态码需要看后台的状态码,来跳转,如token过期的之类的,让他去重新登录
        // const { status } = error.response
        // console.log(error.response)
        // if (status == 401) {
        //   // 页面跳转
        //   router.push('/login')
        // }
        return Promise.reject(error);
      }
    );
    //封装post方法
    const HttpPost = function (url, params) {
      return axios.post(url, params, {
        headers: {
            //这个看项目需求加,看后台需要添加下面请求头
         // 'Content-Type': "application/json;charset=utf-8"
        }
      })};
        //1.封装get方法,不需要在调用时加参数情况如
        //定义
        //getNew() {
        // return //HttpGetN("/terminal_center/v1/data/last_sensor?//type=5");
        // },
        //调用
          //async  fun1(){
          //  let res=await this.$api.getNew()
           //}
      const HttpGet = function (url, param,
      ) {
        return axios.get(url, { params: param }, {
          headers: {
            // 'Content-Type': "application/json;charset=utf-8"
          }
        })
      };
      //2.封装get方法,在调用时需要参数情况如
        //定义
          // device_info(params) {
         //   return HttpGet("terminal_center/v1/data/device_info", params);
         // },
        //调用:
           //async  fun2(){
           //let  params={
             //   name:1,
            //    uid:1    
            //  }
            //  let res=await this.$api.device_info(params)
           //}
      const HttpGetN = function (url) {
        return axios.get(url, {
          headers: {
            // 'Content-Type': "application/json;charset=utf-8"
          }
        });
      };
    
    export { HttpGet, HttpPost, HttpGetN };
    
    

    在data.js里面引入请求方法

    import { HttpGet, HttpPost, HttpGetN } from "./config";
    let Api = {
      // 登录
      Login(params) {
        return HttpPost("/edge_service/v1/user_center/login", params);
      },
      getNew() {
        return HttpGetN("/terminal_center/v1/data/last_sensor?type=5");
      },
      device_info(params) {
        return HttpGet("terminal_center/v1/data/device_info", params);
      },
    };
    export default Api;
    

    1.全局使用(vue文件中),mian.js文件引入,一般都是全局引入,局部引入(不建议,麻烦)

    import api from "@/api/data.js"// 接口
    Vue.prototype.$api = api;
    

    使用:

        async login() {
          let params = {
            account: this.username.trim(),
            password: this.$md5(this.password.trim()).toUpperCase(),
          };
          let res = await this.$api.Login(params);//res表示响应回来的参数
            //是不是很方便,很happy
        },
    

    三.过滤器的封装

    老样子在src utils文件下 加filter.js文件

    //格式
    //export function xx(val){
    //val 进行编辑,编辑成你需要的样子
    //然后return 出去,就达到过滤效果
    //return yy
    //}
    // 过滤时间格式为2020-08-31 12:03:50
    //第一个过滤器   ---我这里val是以秒为单位  所以获取当前时间秒数为:Date.parse(new Date()) / 1000
    export function timestampToTime(val) {
        var date = new Date(parseInt(val * 1000, 10));
        let Y = date.getFullYear();
        let M =
            date.getMonth() + 1 < 10
                ? "0" + (date.getMonth() + 1)
                : date.getMonth() + 1;
        let D = date.getDate();
        let h = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        let m =
            date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        let s =
            date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        return Y + "-" + M + "-" + D + " " + h + ":" + m + ":" + s;
    
    };
    

    全局引入—在main.js文件中

    import * as filters from "@/utils/filters.js"; //全局挂载过滤器
    Object.keys(filters).forEach(key => {
      Vue.filter(key, filters[key]);
    });
    

    调用

    <p class="time">{{ time | timestampToTime }}</p>
    //tmie是变量  timestampTotime是过滤器里面定义的方法
    //本例子是显示时间,而且函数在每隔一秒钟都能获取当前时间
    export default {
      data() {
        return {
          time: Date.parse(new Date()) / 1000,
        };
      },
      mounted() {
        this.update();
      },
      methods: {
        update() {
          setTimeout(() => {
            this.time = Date.parse(new Date()) / 1000;
            this.update();
          }, 1000);
        },
      },
    };
    

    局部引入

    import * as filters from "@/utils/filters.js";
    

    调用

    let tmie=filters.timestampToTime(item.timestamp).toString();
    //item.timestamp是以秒为单位的时间戳
    //如:1600910729  这里time结果2020-09-24 09:25:29
    
    展开全文
  • 详细总结流行前端框架Vue难点概念

    千次阅读 多人点赞 2021-10-20 09:44:18
    万字总结流行前端框架Vue难点概念1 什么是Vue?2 Vue基本属性3 Vue基本指令4 组件化4.1 创建组件4.1.1 注册全局组件4.1.2 注册局部组件4.2 组件通信5 Vue底层原理5.1 虚拟DOM5.2 Vue运行流程5.3 生命周期钩子6 Vue-...
  • 一、先总结出如下几点vue项目开发中常见的问题及解决办法。列表进入详情页的传参问题。本地开发环境请求服务器接口跨域的问题API接口的统一管理UI库的按需加载定时器问题rem文件的导入问题Vue-Awesome-Swiper基本能...
  • Vue2supermarket项目难点解读 GitHub地址:git@github.com:2019083310/supermall.git 一.首页 1.轮播图的封装如何实现 2.数据请求结构以及实现方式 Home中data的结构: goods:{ 'pop':{page:0,list:[]}, 'new':{...
  • vue商城项目难点,需要解决的bug 1 Bug swiper插件中,图片数据没有实时响应问题, 问题描述: vue是实时响应的 图片请求完成后 swiper 依旧在滑动,里面却没有图片 Ans:这是因为浏览器一开始标识pc,然后转换为...
  • vue项目中遇到的问题汇总

    千次阅读 2020-12-21 12:00:20
    前:项目用到的技术栈为webpack+vue2.x+pug+stylus+elementUI1、IE9中, 请求服务器数据并用v-for渲染option标签出现只显示第一个字的问题解决方法:/*** 强制重绘页面的select 输入框,解决IE9只显示单个字符串问题...
  • 近期一直在做一个xxx中心的项目,先来吐槽下内心的想法, 要开发的项目需求很不明确,需求两周两周的更改,感觉每天并没有特别多实际的产出,总是感觉有点儿浪费时间。 虽然这样,但是作为开发,我们只能服从上级...
  • 注意点:建议不要使用ESLint 后面选No 就ok 大神跳过此处,否则在项目中只要编码格式有问题就会一直拨错!二.编辑器选择1、推荐使用Visual Studio Code工具打开testproject文件夹即可进行开发。(1)(打开终端快捷键 ...
  • 在这个项目中你有遇到什么技术难点,你是怎么解决的? 其实这个问题旨在了解你在遇到问题的时候的解决方法,毕竟现在前端技术领域广,各种框架和组件库层出不穷,而业务需求上有时纷繁复杂,观察一个程序员在面对...
  • 主要介绍了Vue项目开发常见问题和解决方案总结,帮助大家更好的利用vue开发,感兴趣的朋友可以了解下
  • 主要介绍了详解vue 项目白屏解决方案,详细的介绍了白屏的解决方案,非常具有实用价值,需要的朋友可以参考下
  • 1.你知道vue的模板语法用的是哪个web模板引擎的吗?说说你对这模板引擎的理解. mustache,主要是使用{{}}进行数据渲染。 2.你知道v-model的原理吗?说说看 v-model是一个语法糖,真正实现双向绑定还是依靠v-...
  • vue电商的难点和性能优化

    千次阅读 2021-03-09 15:55:24
    vue项目难点难点权限管理显示菜单的显示和隐藏跨域重写路由器对象上的push和replace方法性能优化缓存组件keep-alivevm.nextTick()事件委托(事件委派)节流和防抖 难点 权限管理 解析:在电商项目,只有在注册登录...
  • Vue跟练项目时碰到的一些问题
  • Vue的几个常用难点

    千次阅读 2020-03-02 08:50:56
    '你好' } } } const vm=new Vue({ mixins:[mixin], el:'#app', data:{ mes:'VUE' }, methods:{ } }) </script> 2、在vue-cli项目里使用 s1、新建mixin.js...
  • 点击上方[全栈开发者社区]→右上角[...]→[设为星标⭐]作者:愣锤https://juejin.im/post/6844903632815521799最近要求使用vue进行前后端分离...
  • Vue项目遇到的问题解决方案汇总---kalrry 一、项目问题 1、vue项目用到 element 表格组件,当数据量过大(一般超过千条以上)时造成页面卡顿。 2、我们通常忽略watch监听的神奇作用 二、其他、 三、待验证 一、项目...
  • Vue项目开发中,遇到的各种痛点问题和解决方案

    万次阅读 多人点赞 2021-02-20 00:36:06
    Vue项目开发中,遇到的各种痛点问题和解决方案
  • webpack项目中自动引入全局scss变量文件  假设我们有一个公共的scss变量文件variables.scss /*存放所有全局变量*/ $card-title:#C7D200; //首页 卡片标题颜色 $bc-color:#182037; $hoverColor: #7abef9; //链接...
  • 在本篇文章里小编给大家分享的是关于vue开发中遇到的问题总结,有兴趣的朋友们可以学习参考下。
  • 项目技术难点 1.阅读器开发:分页算法、全文搜索算法、引入Web字体、主题切换 2.离线存储机制设计:LocalStorage+IndexDB 3.实现各种复杂手势+交互动画,如何兼容手势+鼠标操作 4.利用vuex+mixin实现组件解耦+复用,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,320
精华内容 2,528
关键字:

vue项目难点