vue
知晓y
边吃辣条边敲代码的佛系程序猿
展开
-
vue(13)axios部署及跨域使用
axios是vue2.x版本官方推荐使用的基于 promise 的 HTTP 库,其与ajax相比具有很多优点。部署:1、打开cmd,cd进入工程目录文件夹2、npm install axios使用:引用分为全局引用和局部引用,这里为了方便使用的是全局引用 1、在工程中的入口函数main.js引入,输入import axios from 'axios';//全局引入的方式,在main.js的代码下面输入Vue.prototype.$axios = axios;//修改原型链,这时候就可以在vue的原创 2020-09-14 08:42:41 · 448 阅读 · 0 评论 -
vue(12)过滤器的用法
vue中过滤器分为局部过滤器和全局过滤器,全局过滤器一般使用Vue.filter,局部过滤器则是在vue实例中使用filter,全局和局部语法基本一样,这里就以局部过滤器为例,先上代码,为了方便就在之前的代码中添加:<template> <div id="testa"> {{ name }} <br /> <button id="a">看下面</button> <ul> <li v-for="(v, k)原创 2020-09-03 13:52:04 · 167 阅读 · 0 评论 -
vue(11)v-bind基础用法,持续更新
1、针对class切换实现点击li,切换li的背景色和文字颜色代码:<template> <div id="testa"> {{name}} <br /> <button id="a">看下面</button> <ul> <li v-for="(v,k) in name" :key="k" :class="{a1:flag1,a2:flag2}" @click="change()">{{k}}原创 2020-08-31 14:22:19 · 157 阅读 · 0 评论 -
Vue(10)v-show和v-if控制显示隐藏
v-show/v-if用来显示或隐藏元素,v-show是通过display实现,v-if是每次删除后再重新创建,与angular中类似这里用v-show作为例子,点击按钮实现列表的显示隐藏,并且更改按钮上的文字代码:<template> <div id="testa"> {{name}} <br /> <button id="a" @click="change()">{{btnText}}</button> <ul&原创 2020-08-28 16:15:17 · 1777 阅读 · 0 评论 -
Vue(9)v-on 事件绑定+$set()页面数据动态更新
v-on可以绑定很多种类事件,例如click、dbclick、mouseover、change等,通常写为 v-on:click="a()" 也可以简写为 @click="a()"下面使用v-on事件绑定实现每次点击按钮都使得数组中的数值都加上1,并实时动态更新在html上<template> <div id="testa"> {{name}} <br /> <button id="a" @click="add()">数组值加1</原创 2020-08-28 15:42:55 · 431 阅读 · 0 评论 -
Vue(八)v-for常规用法
代码:<template> <div id="testa"> {{name}} <br /> <ul> <li v-for="(a,k) in name" :key="k">{{k}}={{a}}</li> //:key绑定唯一的索引值(key) a即value k即key </ul> </div></template><script> export d原创 2020-08-28 14:09:59 · 183 阅读 · 0 评论 -
Vue(七)v-model 双向数据绑定
这里以组件的形式新建了一个test.vue,通过import导入,test.vue代码如下:<template> <div id="testa"> 用户名:<input type="text" v-model="name" /> <br /> {{name}} </div></template><script> export default { name: 'test', data() {原创 2020-08-28 11:50:09 · 102 阅读 · 0 评论 -
Vue(六)添加版本管理工具git以及github和gitee的使用
1、下载安装git,具体百度2、下载安装完毕后,右键点击你的vue项目文件夹,点击 git bash here 进入MINGW643、浏览器进入github.com登录并新建仓库4、在MINGW64中输入:git init5、git add . 这里是添加所有的文件6、git commit -m "V1.0" (-m后面的引号内容可以自己任意取) 这里可能会报错,那是因为你上传至远程仓库时使用用户登录,在项目文件夹内的.git文件夹下的config文件,打开并添加user:就是上图中打马赛克原创 2020-08-13 10:42:00 · 636 阅读 · 0 评论 -
Vue(五)vue&chrome调试工具 devtools安装
为了方便vue项目代码的调试,安装vue.js devtools工具,步骤如下:1、在github上下载devtools包,https://github.com/vuejs/vue-devtools2、将下载下来的包随意放在c盘或d盘的一个位置,打开cmd,cd进入下载下来的包文件夹,3、输入 npm install -g yarn 全局安装yarn工具,4、输入 yarn install 运行5、输入 yarn run build 运行6、打开浏览器-右上角工具栏-更多工具-扩展程序:点击原创 2020-08-12 16:36:00 · 294 阅读 · 0 评论 -
Vue(四)基于vue/cli4.x搭建的vue项目引入arcgis api for js 4.x
使用vue create B创建项目工程之后,cd进去输入:npm install --save esri-loader即可那么在搭建完之后如何使用呢?在项目中的任意一个vue文件中输入如下代码:<script>import HelloWorld from './components/HelloWorld.vue';import { loadModules } from 'esri-loader';export default { name: 'App', components原创 2020-08-11 18:30:10 · 1424 阅读 · 0 评论 -
vue(三)单文件组件 非跳转
实现单文件组件的拼搭1、在component下新建test1.vue和Helloworld.vue2、在app.vue中import和export<template> <div id="app"> <img src="./assets/logo.png"> <HelloWorld></HelloWorld> <test1></test1> </div></templa原创 2020-08-11 11:14:26 · 141 阅读 · 0 评论 -
vue(二)vue-route
vue-route可实现单页面组件化跳转例如在components文件夹下有test1.vue和helloworld.vue如何将其组件化?1.在route文件夹下的index.js里引入组件(注册):import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'import aa from '@/components/test1' // import 模块原创 2020-08-11 09:49:03 · 130 阅读 · 0 评论 -
Vue(一)基于vue/cli4.x的vue搭建、配置及build后的tomcat迁移
**vue-cli构建vue项目需要已安装node.js和npm,具体安装方法自行百度1.进入cmd控制台2.安装全局的脚手架 cnpm install -g vue-cli3.进入你放工程项目的文件夹A:cd A4.创建vue工程:vue init webpack B(B为你要创建的工程名)5.进入工程中:cd B6.cnpm install 安装依赖7. npm run dev 运行 **...原创 2020-08-11 09:32:34 · 156 阅读 · 0 评论 -
vue+iview(三)指令之v-if
v-if详解v-if很简单,可以简单的认为它可控制标签是否显示,例:<div id="app" v-if="a"> {{ message }}</div>var app = new Vue({ el: '#app', data: { message: 'Hello Vue!', a:true//显示 }});app.message="你好vue";app.a=false;隐藏...原创 2020-06-24 17:59:11 · 1603 阅读 · 0 评论 -
vue+ivew(二)指令之v-bind
v-bind详解v-bind:简单的理解就是它将某属性与一个变量绑定,这个变量可以在js文件中修改赋值。缩写::预期:any (with argument) | Object (without argument)参数:attrOrProp (optional)修饰符:.prop - 作为一个 DOM property 绑定而不是作为 attribute 绑定。(差别在哪里?).camel - (2.1.0+) 将 kebab-case attribute 名转换为 camelCase。(从 2原创 2020-06-24 15:51:21 · 229 阅读 · 0 评论 -
vue+ivew(一)初见vue
创建简单的hello vue并更改html文本值)代码:html:注意本项目的js引入应放在body的最后代码:html:注意本项目的js引入应放在body的最后<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charse原创 2020-06-24 15:30:04 · 250 阅读 · 0 评论