Vue.js

  • vue-cli webpack 开发环境跨域详解

    edit dev.proxyTable option in config/index.js. The dev server is using http-proxy-middleware for proxying 为了解决跨域问题, 通常会使用Jsonp,但是jsonp只能是get请求。 或者使用CORS支持,设置Access-Control-Allow-Origin: * 0 前置技能 熟悉vue-loader 和 webpack 1 基本配置 编辑confix/index.js文件 dev server使用的是http-proxy-middleware来代理 // config/index….

    Vue.js 2020年12月28日
    0 10 0
  • Vue中img的src属性绑定与static文件夹实例

    不少人在vue的开发中遇到这样一个问题: img的src属性绑定url变量,然而图片加载失败。 大部分的情况中,是开发者使用了错误的写法,例如: <img src=”{{%20imgUrl%20}}”/> 这样写肯定是不对的,正确的写法应该使用v-bind: <img v-bind:src=”imgUrl”/> 不过,有时候即使使用了正确的语法,依旧无法显示图片,因为你的imgUrl使用了本地图片的路径。 例如,有下面一个文件结构: 现在,我们要在App.vue里使用位于src/assets/目录下的logo.png图片,于是,我们设: imgUrl = ‘./asse…

    Vue.js 2020年12月28日
    0 10 0
  • 详解Windows下安装Nodejs步骤

    最近打算把我们的微信端用Vue.js重构,为什么选择Vue.js,一是之前使用的是传统的asp.net mvc,多页面应用用户体验比单页面要差。二是使用过Angular.js,感觉对开发人员要求较高,上手难度较大,而Vue.js在这方面有优势 。这里记录下Vue.js开发环境 Nodejs在Windows下的安装和配置。 第一步:下载 https://nodejs.org/en/ 笔者目前使用V6.10版本(node的偶数版本是稳定版本(长期支持版),奇数版本可以是开发版本,主要用于集成新功能,进行一些修改。) 第二步:安装Node.js,注意选择安装位置,建议安装到C:nodejs,一路Ne…

    Vue.js 2020年12月28日
    0 9 0
  • 详解如何使用vue-cli脚手架搭建Vue.js项目

    1. 前言 vue-cli 一个简单的构建Vue.js项目的命令行界面 整体过程: $ npm install -g vue-cli $ vue init webpack vue-admin $ cd vue-admin $ npm install $ npm run dev 后面分步说明。 2. 安装 前提条件,Node.js >=4.x版本,建议使用6.x版本。npm版本 > 3.x 全局安装vue-cli $ npm install -g vue-cli 3. 使用 $ vue init <template-name> <project-name> v…

    Vue.js 2020年12月28日
    0 10 0
  • 详解Vue-cli 创建的项目如何跨域请求

    问题描述: 使用 Vue-cli 创建的项目,开发地址是 localhost:8023,需要访问 localhost:9000 上的接口 分析原因: 不同域名之间的访问,需要跨域才能正确请求。跨域的方法很多,通常都需要后台配置 不过 Vue-cli 创建的项目,可以直接利用 Node.js 代理服务器,实现跨域请求 解决方案: 接口地址原本为 /form/save,但是为了匹配代理地址,在前面加一个 /api 如果使用了 axios,可以全局配置一个 baseURL,这样就不用挨个儿修改 url 了 axios.defaults.baseURL = ‘/api’ 在 config>ind…

    Vue.js 2020年12月28日
    0 10 0
  • vue v-model表单控件绑定详解

    v-model 指令在表单控件元素上创建双向数据绑定,下面一一进行示例解释。 1、v-model 双向绑定文本 <!DOCTYPE html> <html> <head lang=”en”> <meta charset=”UTF-8″> <title></title> <script type=”text/javascript” src=”vue.js”></script> </head> <body> <div id=”app”> <input v-mod…

    Vue.js 2020年12月28日
    0 11 0
  • vue之nextTick全面解析

    简介 vue是非常流行的框架,他结合了angular和react的优点,从而形成了一个轻量级的易上手的具有双向数据绑定特性的mvvm框架。本人比较喜欢用之。在我们用vue时,我们经常用到一个方法是this.$nextTick,相信你也用过。我常用的场景是在进行获取数据后,需要对新视图进行下一步操作或者其他操作时,发现获取不到dom。因为赋值操作只完成了数据模型的改变并没有完成视图更新。在这个时候我们需要用到本章介绍的函数。 为什么要用nextTick 请看如下一段代码 new Vue({ el: ‘#app’, data: { list: [] }, mounted: function () …

    Vue.js 2020年12月28日
    0 10 0
  • Vue.js鼠标悬浮更换图片功能

    最近自己做的项目中设计师要求分类栏中鼠标悬停更换图片,大致实现出来的效果就是这样: 这个在jQuery中是个很简单的事,但是在vue中我还是第一次实现。 首先将所有的选中后图片都覆盖到没选中图片上 html代码如下 <ul> <li> <a href=””> <img src=”../../../img/goods/study.png” alt=”学习”> <img class=”hide_tab” src=”../../../img/goods/study_1.png” alt=”学习”> </a> </li&gt…

    Vue.js 2020年12月28日
    0 10 0
  • Vue.js鼠标悬浮更换图片功能

    最近自己做的项目中设计师要求分类栏中鼠标悬停更换图片,大致实现出来的效果就是这样: 这个在jQuery中是个很简单的事,但是在vue中我还是第一次实现。 首先将所有的选中后图片都覆盖到没选中图片上 html代码如下 <ul> <li> <a href=””> <img src=”../../../img/goods/study.png” alt=”学习”> <img class=”hide_tab” src=”../../../img/goods/study_1.png” alt=”学习”> </a> </li&gt…

    Vue.js 2020年12月28日
    0 12 0
  • vue学习笔记之vue1.0和vue2.0的区别介绍

    今天我们来说一说vue1.0和vue2.0的主要变化有哪些 一.在每个组件模板,不在支持片段代码 VUE1.0是:  <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </template> VUE2.0:必须有根元素,包裹住所有的代码 <template id=”aaa”> <div> <h3>我是组件</h3> <strong>我是加粗标签</strong> </div> </temp…

    Vue.js 2020年12月27日
    0 11 0
  • 基于vue+ bootstrap实现图片上传图片展示功能

    效果图如下所示: html ….. ……. <– key=idPicUrl –> <div class=”col-sm-7″ > <img :src=”queryFirmInfo[key]” alt=”” style=”max-height:200px;max-width:250px” class=”myimage” :name=”key” /> </div> <form id=”fileForm” enctype=”multipart/form-data” class=”form-horizontal ” > &lt…

    Vue.js 2020年12月27日
    0 9 0
  • vue v-on监听事件详解

    在html或jsp页面中我们总能碰到监听DOM事件来触发javaScript代码,下面我们就简单聊聊Vue.js中的监听事件是怎么处理的。 在vue.js中监听事件是通过v-on指令来实现的,先看一下简单的监听事件代码。 <!DOCTYPE html> <html> <head lang=”en”> <meta charset=”UTF-8″> <title></title> <script type=”text/javascript” src=”vue.js”></script> </hea…

    Vue.js 2020年12月27日
    0 11 0
  • vue2.0中goods选购栏滚动算法的实现代码

    不多说,直接代码,以便以后重复利用: <script type=”text/ecmascript-6″> import BScroll from ‘better-scroll’; const ERR_OK = 0; export default { props: { sell: { type: Object } }, data() { return { goods: [], listHeight: [], scrollY: 0 }; }, computed: { currentIndex() { for (let i = 0; i < this.listHeight.leng…

    Vue.js 2020年12月27日
    0 10 0
  • Vue声明式渲染详解

    Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM,也就是将模板中的文本数据写进DOM中,使用 {{data}} 的格式写入。此代码都是Vue.js官网上的实例。 1、首先导入Vue.js <script type=”text/javascript” src=”vue.js”></script> 2、html和js代码 <body> <div id=”id”> //id为实例中el的属性 {{message}} </div> </body> <script> var vm = new…

    Vue.js 2020年12月27日
    0 11 0
  • 详解使用nodeJs安装Vue-cli

    前提:nodeJs本地已安装。 1、执行npm install –global vue-cli ,全局安装vue-cli —-因为默认是从国外服务器下,可以使用阿里巴巴在国内的镜像服务器。 产生通过config命令设置默认下载路径: npm config set registry https://registry.npm.taobao.org 然后再执行: npm install –global vue-cli 2、安装后,检查是否安装成功 vue -V (在此注意V为大写) 3、使用vue建一个项目名叫“my-project”(vue init webpack my…

    Vue.js 2020年12月27日
    0 13 0