VUE - 技术教程文章

vuejs devtools 插件安装【图】

1.下载地址:https://chromecj.com/web-development/2019-09/2955/download.html 20200202174823chromecj.com.crx 后缀改为zip,解压到文件夹A 2.谷歌浏览器打开:chrome://extensions/ 添加扩展程序,选择文件夹A 原文:https://www.cnblogs.com/ligenyun/p/12253032.html

angular和vue双向数据绑定【代码】【图】

angular和vue双向数据绑定的原理(重点是vue的双向绑定)我在整理javascript高级程序设计的笔记的时候看到面向对象设计那章,讲到对象属性分为数据属性和访问器属性,我们平时用的js对象90%以上都只是用到数据属性;我们向来讲解下数据属性和访问器属性到底是什么? 数据属性:数据属性包含一个数据值的位置,在这个位置可以读取和写入值.访问器属性:访问器属性不包含数据值;他们包含一对getter和setter函数在读取访问器属性时,会调用gette...

强烈推荐,超详细,实操零失误:node.js安装 + npm安装教程 + Vue开发环境搭建 【非原创,但是用生命推荐的转载】

node.js安装 + npm安装教程 + Vue开发环境搭建强烈推荐,超详细,实操零失误【非原创,但是用生命推荐的转载】原博客园地址:https://www.cnblogs.com/lgx5/p/10732016.html 原文:https://www.cnblogs.com/jane-panyiyun/p/12113539.html

vue全面介绍--全家桶、项目实例【图】

简介“简单却不失优雅,小巧而不乏大匠”。 2016年最火的前端框架当属Vue.js了,很多使用过vue的程序员这样评价它,“vue.js兼具angular.js和react.js的优点,并剔除了它们的缺点”。授予了这么高的评价的vue.js,也是开源世界华人的骄傲,因为它的作者是位中国人–尤雨溪(Evan You)。 Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架。它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计。相比于...

vue-cli@3.x初体验之前篇-回顾vue-cli@2.x创建项目的流程【代码】

模拟实际工作中的操作,假如新开启了一个vue项目,可以先看看上篇博文中的git操作,新建空仓库vue-demo,并拉取到本地,创建本地dev分支后1. 全局安装vue-cliyarn global add vue-cli // 检查是否已安装成功 vue -V // 2.9.62. 使用vue init 创建项目,官方提供了6种模板,对于大多数人而言,工作中选择webpack模板// 使用vue init 创建项目(.指当前目录) vue init webpack .? Generate project in current directory? (Y/n) // 是否...

vue大文件上传组件选哪个好?

需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制。 第一步:前端修改由于项目使用的是BJUI前端框架,并没有使用框架本身的文件上传控件,而使用的基于jQuery的Uploadify文件上传组件,在项目使用的jslib项目中找到了BJUI框架集成jQuery Uploadify的部分,这部分代码封装在bjui-all.js文件中,在bjui-all.js文件中的全...

MongoVue 破解治标不治本

MongoVue 破解治标不治本---------解决燃眉之急注册表中查找B1159E65-821C3-21C5-CE21-34A484D54444中的子项4FF78130 ,删除其下的三个子项即可。 这样剩余时间又会回到15天前原文:http://www.cnblogs.com/zlp520/p/4075470.html

vue生命周期函数【代码】

<template><!-- 所有的内容要被根节点包含起来 --><div id="life">生命周期函数的演示 ---{{msg}}<br><button @click="setMsg()">执行方法改变msg</button></div></template><script>/*生命周期函数/生命周期钩子: 组件挂载、以及组件更新、组件销毁、的时候触发的一系列的方法 这些方法就叫做生命周期函数 */export default{data(){return{msg:‘msg‘}},methods:{setMsg(){this.msg="我是改变后的数据"}}, beforeCreat...

VUE小案例--简易计算器【代码】

这个小案例主要时练习v-model的使用,功能并不完善<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="./lib/vue-2.4.0.js"></script></head><body><div id="app"><input type="text" v-model="n1"><select v-model="opt"><option value="+">+</o...

Vue.2.0.5-Vue 实例【代码】【图】

构造器每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的:var vm = new Vue({// 选项 })虽然没有完全遵循 MVVM 模式, Vue 的设计无疑受到了它的启发。因此在文档中经常会使用 vm 这个变量名表示 Vue 实例。在实例化 Vue 时,需要传入一个选项对象,它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。全部的选项可以在 API 文档中查看。可以扩展 Vue 构造器,从而用预定义选项创建可复用的组件构造器...

springboot shiro和freemarker、vuejs/element-ui集成之控制按钮权限完全参考手册

本文主要考虑单点登录场景,登录由其他系统负责,业务子系统只使用shiro进行菜单和功能权限校验,登录信息通过token从redis取得,这样登录验证和授权就相互解耦了。用户、角色、权限进行集中式管理。参考:https://blog.csdn.net/qq_26321411/article/details/79557264https://blog.csdn.net/weixin_38132621/article/details/80216056https://blog.csdn.net/u013615903/article/details/78781166/http://shiro.apache.org/https:/...

Laravel Vuejs 实战:开发知乎 (2)用户注册【代码】

1.本节需要发送验证邮件2.教程使用SendCloud发送邮件 【我使用的是mailtrap】3. 1 composer require laravel/ui安装完成后 1 php artisan ui vue –auth4.RegisterController中create方法内实现用户创建的默认值配置 1 class RegisterController extends Controller2 {3 /*4 |--------------------------------------------------------------------------5 | Register Controller6 |------------------------...

Vue.2.0.5-计算属性【代码】

计算属性在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护。例如:<div id="example">{{ message.split(‘‘).reverse().join(‘‘) }} </div>在这种情况下,模板不再简单和清晰。在实现反向显示 message 之前,你应该确认它。这个问题在你不止一次反向显示 message 的时候变得更加糟糕。这就是为什么任何复杂逻辑,你都应当使用计算属性。基础例子<div id="exampl...

Vue.nextTick【代码】

官网地址:https://cn.vuejs.org/v2/api/#Vue-nextTick一、作用修改数据后使用此方法,可以获取到更新后的DOM二、API  Vue.nextTick([callback,context])三、使用// 全局function () {Vue.nextTick().then(function () {// DOM 更新了 ) } // 或者function() {Vue.nextTick(function() {// DOM 更新了 }) }// 局部function() {this.$nextTick(function() {// DOM 更新了 }) } 谦良恭卑,信诚实至;生活不易,共勉同求。原...

Vue动态修改class

#####对象方法-最简单的绑定(这里的active加不加单引号都可以,以下也一样都能渲染):class="{ ‘active‘: isActive }"1判断是否绑定一个active:class="{‘active‘:isActive==-1}" 或者:class="{‘active‘:isActive==index}"123绑定并判断多个第一种(用逗号隔开):class="{ ‘active‘: isActive, ‘sort‘: isSort }"第二种(放在data里面)//也可以把后面绑定的对象写在一个变量放在data里面,可以变成下面这样:class="cla...

nuxtjs中修改head及vuex的使用【代码】【图】

1.在之前vue项目中,我们如果需要改变每个页面的title,是需要在路由里配置meta然后通过路由守卫将每个页面的title替换掉,但是在nuxtjs中他提供了一个方法,直接在每个.vue的文件中使用这个head方法即可修改每个页面的titlehead(){return {title:‘form表单‘} },2.在nuxtjs中使用vuex,和在vue中使用它是一样的,先 npm install vuex 然后再store下简历index.jsimport Vuex from ‘vuex‘import mutations from ‘./mutations‘const c...

vue的roter使用【代码】

1在src下建立router文件夹,再建立router.jsimport Vue from ‘vue‘ import Router from ‘vue-router‘ import home from ‘../components/home‘ import page01 from ‘../components/page01‘ import page02 from ‘../components/page02‘ import page01A from ‘../components/page01/page01-A‘ import page01B from ‘../components/page01/page01-b‘ import pageEnd from ‘../components/page01/B/end‘Vue.use(Router)...

Vue使用vue-i18n实现国际化【代码】

1. 简单使用安装依赖$ npm install vue-i18n src下创建lang文件夹以及文件夹下zh.js,en.js和index.js文件zh.jsexport default {message: ‘好好学习 天天向上‘ }; en.jsexport default {message: ‘Good good study,Day day up‘ }; index.jsimport Vue from ‘vue‘; import VueI18n from ‘vue-i18n‘; import zh from ‘./zh‘; import en from ‘./en‘;Vue.use(VueI18n);const messages = {zh,en };const i18n = new VueI18n...

vue点击复制功能【图】

复制功能,选中复制或者点击复制(不使用插件的情况下)1、选中复制这个比点击复制简单点<template> <div> <el-button type="primary" plain @click="copy()">复制</el-button> </div></template><script>export default { data(){ return{ } }, methods:{ copy(){ document.execCommand("Copy"); // 执行浏览器复制命令 this.$message({ message: ‘复制成功‘, type: ‘...

React对比Vue(发现一个神奇的地方在对数组进行增加删除的时候)【图】

@1===》发现一个神奇的地方在对数组进行增加删除的时候 react中一个输入框点击enter键,然后数组push,然后渲染<input ref=‘valInput‘ onKeyUp={this.sureEnter}></input>还必须拆开来写这么写是不对的必须拆开一步一步来写,日了狗了,删除也是 *********************************************************************************************************************************************************@2===》封装公共方法...

索引 VUE

参考资料 https://www.bilibili.com/video/av24099073?from=search&seid=10362817679461041383https://github.com/sunny-sky/VueDemo/blob/master/src-todos2/components/TodoList.vue vue part5.2 vuex todolist 改写vue part5.1 vuex引入及案例 计数vue part4 vue-routervue part3.4 小案例 消息订阅pubsub与ajaxvue part3.3 小案例ajax (axios) 及页面异步显示vue part3.2 小案例 todo 列表展示删除vue part3.1 小案例 comments...

vue + vuex + koa2开发环境搭建及示例开发【代码】【图】

写在前面这篇文章的主要目的是学会使用koa框架搭建web服务,从而提供一些后端接口,供前端调用。搭建这个环境的目的是: 前端工程师在跟后台工程师商定了接口但还未联调之前,涉及到向后端请求数据的功能能够走前端工程师自己搭建的http路径,而不是直接在前端写几个死数据。即,模拟后端接口。当然在这整个过程(搭建环境 + 开发示例demo)中,涉及到以下几点知识点。包括:koa2的知识点node的知识点跨域问题fetch的使用axios的使...

webpack+vue自学(3)【图】

webpack会搜索当前目录中的webpack.config.js文件,webpack.config.js是一个node.js模块,返回一个json格式的配置信息对象。(简单说webpack.config.js是webpack的配置文件) asp.net mvc理论qq群 516356157原文:http://www.cnblogs.com/dagedan/p/5652302.html

vue.2.0-自定义全局组件【代码】

App.vue<template><div id="app"><h3>welcome vue-loading</h3><Loading></Loading> <!--<Loading></Loading>是自定义组件--> </div></template>main.jsimport Vue from ‘vue‘ import App from ‘./App.vue‘import Loading from ‘./components/loading‘ //定义Loading,components、loading是一个文件夹,loading里面必须要index.jsVue.use(Loading) //use Loadingnew Vue({el: ‘#app‘,render: h => h(App) })index....

vue cli4 拿到一个项目后

1,拿到一个项目,里面没有node_modules得先cmd 到这个目录下面,cnpm install 安装依赖安装后,npm run serve发现报错,少了eslint在page.json配置下,添加 "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "eslint:recommended" ], "rules": {}, "parserOptions": { "parser": "babel-eslint" } }再运行,发现有 eslint格式bug, ...

vue.js组件的个人总结【图】

vue.js的组件使用过程分为三个步骤:1、创建组件构造器; 2、注册组件; 3、使用组件组件同时也分为全局组件与局部组件 1、全局组件 2、局部组件 注意:由于 HTML 标签不区分大小写,所以在生成的标签名都会转换为小写。例如,当你的 template 为 <MyComponent></MyComponent> 时,插入 DOM 后会被转换为 <mycomponent></mycomponent>。原文:http://www.cnblogs.com/caojiayan/p/6866941.html

vue的跳转方式(打开新页面)及传参【代码】

1. router-link跳转 // 直接写上跳转的地址<router-link to="/detail/one"><span class="spanfour">link跳转</span></router-link>// 添加参数<router-link :to="{path:‘/detail/two‘, query:{id:1,name:‘vue‘}}"></router-link>// 参数获取id = this.$route.query.id// 新窗口打开<router-link :to="{path:‘/detail/three‘, query:{id:1,name:‘vue‘}}" target="_blank"></router-link>  2. this.$router.push跳转 t...

【vue】vue +element 搭建项目,组件之间通信【代码】

父子组件通信父 通过$ref属性给 子传递数据子 操作 父 this.$parent.XXX或者通过vue-busvue-bus既可以实现父子组件之间的通信,也可以实现兄弟组件之间的通信vue-bus安装(c)npm install vue-bus引入import Vue from ‘vue‘; import VueBus from ‘vue-bus‘;Vue.use(VueBus);应用:发送:this.$bus.$emit(‘closeMenu‘, {}); 接收: this.$bus.on("closeMenu", () => {this.isOpen = false; }); 参考链接:https://cn.vuejs.org...

Vue指令总结---小白同学必看【图】

今天主要复习一下我们最熟悉vue指令,想要代码撸得快,就要多看书,多看看官方的文档和学习指令,学习编程是一个非常享受的过程,尤其是你不断地去解决问题,获得一项技能,实现薪水的上涨。进行Vue的指令烹饪吧。v-text :string 用法:更新元素的textContent,更新部分的textContent,需要使用{{Mustache}}插值v-html: string 用法:更新元素的innerHTML;注意:网站动态渲染任意HTML,容易导致XXS攻击v-show:any 用法:根据表...

vue学习(一)【代码】

//html:<div id="app">  <p>{{msg}}<p></div>//script 需要引入jar包vue-2.4.0.js <script>  var vm = new Vue({    el:‘app‘    data:{msg:‘hello,vue‘    }  })</sctipt>说明:p标签中的两个大括号 叫做 插值表达式,顾名思义就是 插入值用的vue对象中的el 就是为了表示 new的这个vue对象是用来控制页面上的那个区域。data中存放的是el中要使用到的数据。另外说一点 页面中需要用到的数据都需要在data中声...