精华内容
下载资源
问答
  • Vue框架

    千次阅读 2020-02-12 17:52:55
  • 导语:vue是近年来越来越火的前端开发框架,实习期间导师要求开发软件的过程中使用vue框架。由于刚刚接触前端开发,每次使用到vue框架中不理解的东西或是不会的知识,就会百度各种各样的问题,其中许多问题都能在...

      导语:vue是近年来越来越火的前端开发框架,实习期间导师要求开发软件的过程中使用vue框架。由于刚刚接触前端开发,每次使用到vue框架中不理解的东西或是不会的知识,就会百度各种各样的问题,其中许多问题都能在CSDN上得到启发。使用vue框架的过程中遇到了许许多多的问题,一个又一个坑,,,有时候一个问题的出现会花费我半天的时间去解决和思考,毕竟是自学,所以每一步都很小心,每次增加一个小功能就会认真调试,看看有没有错误出现。今天我就来总结一下我在解决在vue前端框架页面里添加时间选择器的问题。

      由于业务需要,有必要在页面上添加两个时间选择器来确定查询时间区间。我首先想到了百度一个有源代码的日期选择器来参考,果然百度上格式化样的时间选择器令我眼花缭乱,在GitHub上下载了完整源代码然后开始往自己项目上转,然后。。。。各种问题各种报错。我发现我参考的代码是运行在jquer框架上的,可是,我强大的好奇心和求知驱使我进一步解决如何在vue框架上使用jquer内容的问题。

    如下所示,我参考了csdn上许多博客

    https://blog.csdn.net/qq_16399991/article/details/65630566

    https://blog.csdn.net/qq_32496215/article/details/81292051

    以及许多其他文章

    https://segmentfault.com/a/1190000007020623

    http://618cj.com/2016/08/24/vue-cli%E6%80%8E%E4%B9%88%E5%BC%95%E5%85%A5jquery/

    其中许多是这样说的:

    vue引入jquer以及jquery插件步骤

    第一步:安装jque

    npm install jquery 

    cnpm install jquery(淘宝镜像)

    第二步:在package.json中添加

    dependencies:{
    "jquery" : "2.2.3"
    }

    第三步:使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要修改的是build/webpack.base.conf.js,修改两处的代码

    // 在开头引入webpack,后面的plugins那里需要
    var webpack = require('webpack')
    // resolve
    
    module.exports = {
       // 其他代码...
       resolve: {
          extensions: ['', '.js', '.vue'],
          fallback: [path.join(__dirname, '../node_modules')],
          alias: {
              'src': path.resolve(__dirname, '../src'),
              'assets': path.resolve(__dirname, '../src/assets'),
              'components': path.resolve(__dirname, '../src/components'),
    
              // webpack 使用 jQuery,如果是自行下载的
              // 'jquery': path.resolve(__dirname, '../src/assets/libs/jquery/jquery.min'),
              // 如果使用NPM安装的jQuery
              'jquery': 'jquery' 
          }
       },
    
       // 增加一个plugins
       plugins: [
          new webpack.ProvidePlugin({
              $: "jquery",
              jQuery: "jquery"
          })
       ],
    
       // 其他代码...
    }

    第四步:重新dev项目文件

    第五步:在main.js文件中引入jquery

    import $ from "jquery";

    最后就能在文件内使用了。

    以上是我步入的第一个大坑。。。。。。。。。。。。

    按照上诉描述完成后,webstorm一直报错,其他的错误太长看不懂,但有一条是很明确的:$ is not defined!

    意思是$没有定义,没办法,接着百度。以下答案来自百度,个人不建议参考:

    1.首先,"$"这个符号是在jquery中定义的。所以你要看一下,你有没有引入jquery的js文件。

    2.大部分插件都是依赖于jquery而存在的,我说大部分并不夸张。哪怕说所有都不为过。所以在引入js文件的时候,你要注意引入的顺序。将jquery.js的文件放在最前面

    3.网上百度这个错误,基本上都是上面这两个结果。大家也可以看出来。从我的图片上来看,我并没有犯这两个错误。那我的错误是什么呢?

    我抱着试一试的心态。换了一个jquery.js文件,居然就成功了。自己想想也是,好多jquery的文件都是错误的,特别是从菜鸟教材上下载的

    我突然觉得这个坑太深了,于是决定换一个方法。

    把前面的代码全部清除了之后,我开始寻找新的方法。

    一直在找一个在vue框架中创建的日期选择器代码,最后找到了这个:vue写的一个时间选择器组件

    https://www.vue-js.com/topic/59415422fbaee51e2432c393

    从大神的github上下载了完整的代码Date-Pickers

    接下来我就进入了另外一个坑,应该说是我自己的原因。。。。

    我试图把他的整个项目导入我的项目文件,将所有文件包括js,style,.vue,index.html全部加到我现有项目中,但是这是两个完整的项目,如何整合呢???  通过百度我发现是我想太多了,这是不可能的,毕竟刚刚接触这个东西,对他的理解还不是很深。中间的小坑我就不再赘述了,直接说正确的做法。

    将他的.vue文件分解为三部分:html,js,cs

    分别对应添加到自己原来.vue文件的相应三个位置(一 一对应),进行到这个程度,问题已经解决了一大部分,还剩下什么问题呢?

    我们运行来看看,,,,

    ??????,这个  是来搞笑的吗?

    我以为我又要放弃了,但好奇心驱使我把这段错误提示复制下来放在百度搜索框里面,

    哈哈哈,没想到 还真的有这个问题

    vue-cli的项目 style lang="scss" 写 scss样式报错

    答主同样来自我们CSDN,看来这个地方真是人才济济。

    解决方案:

    安装以下依赖就可以了,vue-cli默认没有scss-loader,scss-loader又需要node-sass,只安装scss-loader是不行的。另外webpack就不需要配置了,因为vue-cli会帮你配置安装的loader

    "node-sass": "^4.5.1",
        "sass-loader": "^6.0.3",
        "scss": "^0.2.4",
        "scss-loader": "^0.0.1",
    

    1.npm install node-sass --save

    2.npm install sass-loader --save

    3.npm install scss --save

    4.npm install scss-loader --save

    最后重新dev一下,OK

    终于没有报错了     欢喜

    来看一下我们的成果:

       感谢各位大神的博客。

     

    展开全文
  • vue框架简介

    万次阅读 多人点赞 2019-06-15 04:50:36
    是一套构建用户界面的渐进式(用到哪一块就用哪一块,不需要全部用上)前端框架Vue的核心库只关注视图层 vue的兼容性 Vue.js不支持IE8及其以下版本,因为Vue.js使用了IE8不能模拟的ECMAScript 5特性。Vue....

    MVVM框架概述

     

     

    什么是vue

    是一套构建用户界面的渐进式(用到哪一块就用哪一块,不需要全部用上)前端框架,Vue 的核心库只关注视图层

     

     

    vue的兼容性

    Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。 Vue.js 支持所有兼容 ECMAScript 5 的浏览器

     

     

    vue学习资源

    vue.js中文官网:http://cn.vuejs.org/

    vue.js源码:https://github.com/vuejs/vue

    vue.js官方工具:https://github.com/vuejs

    vue.js官方论坛:forum.vuejs.org

     

     

    对比其他框架-React

    React 和 Vue 有许多相似之处,它们都有使用 Virtual DOM;提供了响应式(Reactive)和组件化(Composable)的视图组件。将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库。React 比 Vue 有更丰富的生态系统

    都有支持native的方案,React的RN,vue的Wee下

    都支持SSR服务端渲染

    都支持props进行父子组件间的通信

    性能方面:React 和 Vue 在大部分常见场景下都能提供近似的性能。通常 Vue 会有少量优势,因为 Vue 的 Virtual DOM 实现相对更为轻量一些。

    不同之处就是:

    • 数据绑定方面,vue实现了数据的双向数据绑定,react数据流动是单向的
    • virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制
    • state对象在react应用中不可变的,需要使用setState方法更新状态;在vue中,state对象不是必须的,数据由data属性在vue对象中管理(如果要操作直接this.xxx)
    • 组件写法不一样, React推荐的做法是 JSX , 也就是把HTML和CSS全都写进JavaScript了,即'all in js'; Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,js写在同一个文件

     

     

    对比其他框架-angular

    在性能方面,这两个框架都非常的快,我们也没有足够的实际应用数据来下一个结论。如果你一定想看些数据的话,你可以参考这个第三方跑分。单就这个跑分来看,Vue 似乎比 Angular 要更快一些。

    在大小方面,最近的 Angular 版本中在使用了 AOT 和 tree-shaking 技术后使得最终的代码体积减小了许多。但即使如此,一个包含了 vuex + vue-router 的 Vue 项目 (30kb gzipped) 相比使用了这些优化的 Angular CLI 生成的默认项目尺寸 (~130kb) 还是要小的多。

    灵活性:Vue 相比于 Angular 更加灵活,Vue 官方提供了构建工具来协助你构建项目,但它并不限制你去如何组织你的应用代码。有人可能喜欢有严格的代码组织规范,但也有开发者喜欢更灵活自由的方式。

     

     

    vue.js的核心特点—响应的数据绑定

    传统的js操作页面:在以前使用js操作页面的时候是这样的,需要操作某个html元素的数据,就的使用js代码获取元素然后在处理业务逻辑

    响应式数据绑定的方式操作页面,可以直接使用像下面代码那样的写法就可以将数据填充到页面中

    <template>
      <div id="app">
        {{ message }}
      </div>
    </template>
    
    <script>
    export default {
      name: 'app',
      data () {
        return {
          message: 'Welcome to Your Vue.js App'
        }
      }
    }
    </script>
    
    <style>
    </style>

     

     

    vue.js的核心特点—可组合的视图组件

    一个页面映射为组件树。划分组件可维护、可重用、可测试,也就是一个页面由多个组件组合而成

    vue中实现组件引入示例

    第一步:import导入需要引入的组件文件;

    第二步:注册组件;

    第三步:在需要引入组件的文件中加上组件标签(这个标签的标签名就是注册的组件名字,多个单词的和这里有xx-xx的形式)

    需要注意的是:组件可以嵌套引入,也就是说组件可以引入其他组件

    首先创建一个组件,用于被引入的组件,组件名字叫Hello.vue

    <template>
      <div class="hello">
        <h2>Essential Links</h2>
      </div>
    </template>
    
    <script>
    export default {
      name: 'hello'
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    
    </style>

    然后在需要引入的组件中,先使用import导入组件

    import Hello from './components/Hello'

    然后使用components注册这个组件

    components: {
        Hello
    }

     在需要引入组件的文件中加上组件标签(这个标签的标签名就是注册的组件名字,多个单词的和这里有xx-xx的形式)

    <hello></hello>
    <template>
      <div id="app">
        {{ message }}
        <hello></hello>
      </div>
    </template>
    
    <script>
      import Hello from './components/Hello'
      export default {
        name: 'app',
        data () {
          return {
            message: 'Welcome to Your Vue.js App'
          }
        },
        components: {
          Hello
        }
      }
    </script>
    
    <style>
    </style>

    单文件组件:Js,css,html 存在一个文件中,是一个单文件组件,下面vue模板文件里的Hello.vue就是一个单文件组件

    <template>
      <div class="hello">
        <h2>{{ msg }}</h2>
      </div>
    </template>
    
    <script>
    export default {
      name: 'hello',
      data () {
        return {
          msg: 'Hello Vue'
        }
      }
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    h1, h2 {
      font-weight: normal;
    }
    </style>

     

     

    vue.js的核心特点—虚拟DOM

    虚拟DOM的概述

    运行的js速度是很快的,大量的操作DOM就会很慢,时常在更新数据后会重新渲染页面,这样造成在没有改变数据的地方也重新渲染了DOM节点,这样就造成了很大程度上的资源浪费。

    利用在内存中生成与真实DOM与之对应的数据结构,这个在内存中生成的结构称之为虚拟DOM

    当数据发生变化时,能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上

    // The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      template: '<App/>',
      components: { App }
    })
    
    console.dir(document)

     

     

    vue.js的核心特点—MVVM模式

    MVVM概述:M:Model数据模型 , V:view 视图模板  , vm:view-Model:视图模型

    vue的MVVM实例(双向数据绑定):当输入框输入数据的时候,相应的message也会改变

    <template>
      <div id="app">
        <input type="text" v-model="message"/>
        {{ message }}
      </div>
    </template>
    
    <script>
      export default {
        name: 'app',
        data () {
          return {
            message: 'Welcome'
          }
        }
      }
    </script>
    
    <style>
    </style>

    vue是如何实现双向数据绑定的:当数据发生改变—自动更新视图。利用Object.definedProperty中的setter/getter代理数据,监控对数据的操作

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
      <input type="text" id="username"><br />
      <span id="uName"></span>
    <script>
      var obj = {
        pwd: '123'
      }
      Object.defineProperty(obj, 'username', {
        set: function (val) {
          document.getElementById('uName').innerText = val
          document.getElementById('uNmae').value = val
          console.log('set')
        },
        get: function () {
        }
      })
      document.getElementById('username').addEventListener('keyup' ,function () {
        obj.username = event.target.value
      })
    </script>
    </body>
    </html>

     

     

    vue.js的核心特点—声明式渲染

    Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM,初始化根实例,vue自动将数据绑定在DOM模板上

    声明式渲染与命令式渲染区别

    声明式渲染:所谓声明式渲染只需要声明在哪里,做什么,而无需关心如何实现

    命令式渲染:需要具体代码表达在哪里,做什么,如何实践

    需求:求数组中每一项的倍数,放在另一个数组中实例

    命令式渲染

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script>
      var arr = [1, 2, 3, 4, 5]
      var newArr = []
      for (var i = 0; i < arr.length; i++) {
        newArr.push(arr[i] * 2)
      }
      console.log(newArr)
    </script>
    </body>
    </html>

    声明式渲染

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script>
      var arr = [1, 2, 3, 4, 5]
      var newArr = arr.map(function (item) {
        return item * 2
      })
      console.log(newArr)
    </script>
    </body>
    </html>

     

    展开全文
  • Vue框架Element UI教程

    千次阅读 2019-09-12 16:25:01
  • 搭建vue前端框架或微信小程序vue框架步骤 1.下载node.js 下载地址:https://nodejs.org/en/download/ 查看node、npm版本,确保环境正确 node --version npm --version 2.安装vue脚手架工具vue-cli 若开发工具为...
  • Vue框架vue-admin-template登陆问题解决

    千次阅读 热门讨论 2020-04-21 09:07:01
    Vue框架vue-admin-template登陆问题解决
  • Vue框架快速入门

    万次阅读 多人点赞 2017-10-17 02:51:07
    当然Vue框架算是比较高级的框架,所以在使用过程中还需要JavaScript、JavaScript 2015、WebPack、NodeJS、npm、ESLint、JavaScript单元测试框架等其他知识和框架的使用方法。在学习Vue之前,最好先学习一下这些知识...
  • Vue 框架-12-Vue 项目的详细开发流程

    千次阅读 2018-11-16 17:51:14
    Vue 框架-12-Vue 项目的详细开发流程 首先,如果你还不了解 Vue 脚手架怎么搭建? 默认的环境中有哪些文件? 文件大概是什么作用? 那么,您要先查看之前的文章才有助于你理解本篇文章: Vue 框架-10-搭建脚手架 CLI...
  • vue框架是ui框架么An amazing conference regarding the Vue framework was held in the US in the first week of March 2020 for two fantastic days. Some spectacular presentations were given during that time...
  • 前端三大框架Vue框架详解

    千次阅读 2018-04-03 15:15:28
    Vue框架诞生于2014年,其作者为中国人——尤雨溪,也是新人最容易入手的框架之一,不同于React和Angular,其中文文档也便于大家阅读和学习。Vue用于构建交互式的Web界面的库,是一个构建数据驱动的Web界面渐进式框架...
  • html和vue框架

    2019-01-03 21:31:00
    HTML写的页面,每次跳转的时候都要向服务器请求 vue框架:单页面运用,路由的跳转,方便 转载于:https://www.cnblogs.com/yangwan/p/10217081.html
  • 最近这两天有点闲,通过自研学习了如何使用express框架搭建后台以及vue框架开发前端。express框架是用来搭建web服务,是nodejs的二次封装。vue就是前端框架。那么可以通过搭建express框架用来写接口,vue框架写页面...
  • 如何快速有效的学习vue框架 相信从事前端开发或者有想法学习前端开发的同学来说,vue在你耳边一定不陌生,不管你朋友推荐还是百度搜索,vue框架已经迅速崛起,担当起了领导者的重任,在react出事之后,vue已经基本成...
  • 声明:本教程不收取任何费用,欢迎转载,尊重作者劳动成果,不得用于商业用途,侵权必究!!!! 系列文章 Vue框架项目实战整理:1、Vue开发工具介绍、快速启动、常见错误 ...上一篇文章讲了Vue框架项目实战整理:...
  • Vue框架项目实战整理:1、Vue开发工具介绍、快速启动、常见错误 Vue框架项目实战整理:2、Vue环境搭建(有图有真相) Vue框架项目实战整理:3、Vue项目执行流程分析(一) Vue框架项目实战整理:4、Vue项目执行...
  • vue框架前后端联调

    千次阅读 2018-03-26 20:44:45
    最近进了这个项目组是前端是使用vue框架的,这和我之前使用的jsp页面有些差别,对我而言,并不必关心页面如何控制,只需知道我在调试代码的时候如何使用即可。 一、vue介绍 vue是一套用于构建用户界面的渐进式框架...
  • HTML之Vue框架实现Hello World

    千次阅读 2020-02-17 18:53:08
    HTML之Vue框架实现Hello World什么是Vue代码结果图 什么是Vue Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。 Vue 只关注视图层, 采用自底向上增量开发的设计。 Vue 的目标是通过尽可能...
  • vue框架实现走马灯

    千次阅读 2019-08-07 20:40:18
    vue框架实现走马灯 走马灯的思想很简单: 利用定时器 利用substring()不断截取字符串来实现字符位置的转换(比如:abc–>bca,bca->cab,cab->abc)即不断的截取第一个字符(start)和1~.length-1(end)的...
  • Vue 框架-05-动态绑定 css 样式

    千次阅读 2018-11-13 23:45:13
    Vue 框架-05-动态绑定 css 样式 今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分 首先说一下 动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 class=“”就可以了,使用 Vue 呢...
  • vue框架实现简单的遮罩层

    千次阅读 2019-11-11 19:29:17
    vue框架实现简单的遮罩层 vue框架有一些模板语法,用起来很方便。在做遮罩层时,可以使用v-show语法实现。v-if当然也可以实现,不过没有必要,使用v-show就可以了。 效果如下: 代码如下: 未截出代码部分为样式,...
  • vue框架中props的typescript用法

    千次阅读 2020-02-17 11:35:55
    vue框架中props的typescript用法 在vue中使用typescript时,需要引入vue-property-decorator库来兼容格式。 javascript写法 Vue.component('blog-post', { // 在 JavaScript 中是 camelCase 的 props: ['postTitle...
  • Vue框架设置响应式布局

    万次阅读 多人点赞 2018-09-03 09:51:20
    可能有人会问,用css的@media就可以完成了,为啥用js,我这里想说的是,我并没有否认@media,这里只是写出更多一种方式,同时结合一下现在很火的前端框架。多一种方法,就多一种解决思路,不至于再回到以前"只能这样...
  • Vue框架 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。 Vue 只关注视图层, 采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 ...
  • Vue 框架-01- 入门篇 图文教程

    千次阅读 2018-11-07 12:25:18
    Vue 框架-01- 入门篇 图文教程 Vue 官网:https://cn.vuejs.org/ 关于 Vue 的基础大家可以在官网的【起步】去学习,本系列文章主要针对实例项目应用 一、Vue 的安装与使用 1.在线引用: &lt;!-- 直接引用 --&...
  • 通过脚手架创建Vue框架项目以及模块的划分 搭建python语言的Django框架的项目为前端传递所需要的数据 创建好首页,商品模块,购物车模块,订单模块,个人中心模块 创建各个模块的路由,让各个...
  • babel-polyfill解决vue框架项目IE无法打开问题vue框架webpack打包原因解决方法 vue框架webpack打包 vue-cli搭建了一套vue的开发框架,webpack打包发布后,Chrome可以正常打开,但是IE无法打开。 原因 ie9和一些低...
  • vue框架下浏览器打印部分页面功能业务情景方案 业务情景 需要在vue框架下spa应用中,使用浏览器打印下面这种格式的外卖小票 方案 使用 jq 的 jq-print 的框架:npm 库中没有,需要手动引用,且版本更新不方便,...
  • Vue框架简介

    千次阅读 2018-11-14 22:35:22
    Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于Weex) Vue.js 是前端的主流框架之一,和Angular.js、...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 42,741
精华内容 17,096
关键字:

vue框架

vue 订阅