Vue.js
关注
分享
扫一扫
Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库(如: vue-router: 跳转，vue-resource: 通信，vuex
liudachu
当你的才华撑还不起你的野心时,那你就应该静下心来渎书
展开
-
vue中ref的用法
vue给我们提供一个操作dom的属性，ref。绑定在dom元素上时，用起来与id差不多，通过this.$refs来调用:<div ref="test">test</div>console.log(this.$refs.test)看到打印出来就是绑定的dom对象，可以用来执行一些dom操作，比如操作样式，获取属性等:let testDom = this.$refs.testtestDom.style.height = '200px'testDom.style.backg原创 2020-10-22 19:26:41 · 852 阅读 · 1 评论 -
VUEX官方入门-状态管理模式
十七、VUEX官方入门1.介绍Vuex 是什么？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。什么是“状态管理模式”？让我们从一个简单的 Vue 计数应用开始：让我们从一个简单的 Vue 计数应用开始：new Vue({ // state data () { return { count: 0 } }, // view template:原创 2020-09-29 18:41:45 · 584 阅读 · 0 评论 -
vue中的$router 和 $route的区别
vue2.0中的$router 和 $route的区别最近在学习vue的单页面应用开发，需要vue全家桶，其中用到了VueRouter，在路由的设置和跳转中遇到了两个对象$router 和$route ，有些傻傻分不清，后来自己结合网上的博客和自己本地的Vue devtools结构了解了他们的区别1.router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的转载 2020-09-29 15:17:22 · 570 阅读 · 0 评论 -
使用axios跨域访问Controller接口
一、什么是跨域1、跨域 指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。2、同源策略 是指协议，域名，端口都要相同，其中有一个不同都会产生跨域，在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。3、跨域问题怎么出现的 开发一些前后端分离的项目，比如使用 SpringBoot + Vue 开发时，后台代码在一台服务器上启动，前台代码在另外一台电脑上启动，此时就会出现问题。 比如： 后台 地址为 http://转载 2020-09-28 09:01:36 · 1693 阅读 · 0 评论 -
Vue实例 · new Vue()
十六、Vue实例1.创建一个 Vue 实例每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：var vm = new Vue({ // 选项 //当创建一个 Vue 实例时，你可以传入一个选项对象。})虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组转载 2020-09-26 13:38:59 · 14307 阅读 · 1 评论 -
vue组件中的路由钩子与axios异步请求
十五、路由钩子与异步请求1. 路由模式与 404路由模式有两种hash：路径带 # 符号，如 http://localhost/#/loginhistory：路径不带 # 符号，如 http://localhost/login修改路由配置，代码如下：export default new Router({ mode: 'history', routes: [ ]});404界面：创建一个NotFound.vue视图组件<template> &l转载 2020-09-26 13:36:30 · 778 阅读 · 0 评论 -
router路由中的参数传递
十四、参数传递1. Demo前端传递参数此时我们在Main.vue中的route-link位置处 to 改为了 :to，是为了将这一属性当成对象使用，注意 router-link 中的 name 属性名称 一定要和 路由中的 name 属性名称 匹配，因为这样 Vue 才能找到对应的路由路径；<!--name：传组件名 params：传递参数，需要绑定对象：v-bind--><router-link v-bind:to="{name: 'UserProfile', param转载 2020-09-26 13:20:16 · 1762 阅读 · 0 评论 -
forEach与map的区别与用法
一、相同点：都是循环遍历数组中的每一项每次执行匿名函数都支持三个参数，参数分别为item（当前每一项），index（索引值），arr（原数组）匿名函数中的this都是指向window只能遍历数组二、不同点map()会分配内存空间存储新数组并返回，forEach()不会返回数据。forEach()允许callback更改原始数组的元素。map()返回新的数组。1、forEach()forEach()针对每一个元素执行提供的函数，对数据的操作会改变原数组。va转载 2020-09-25 22:20:59 · 1292 阅读 · 0 评论 -
Vue的组件为什么要export default
Vue 的模块机制 Vue 是通过 webpack 实现的模块化，因此可以使用 import 来引入模块，例如： 此外，你还可以在 bulid/webpack.base.conf.js 文件中修改相关配置： 意思是，你的模块可以省略 “.js”，".vue"，“.json” 后缀，weebpack 会在之后自动添加上；可以用 “@” 符号代替 “src” 字符串等。 export 用来导出模块，Vue转载 2020-09-25 21:06:27 · 658 阅读 · 0 评论 -
使用vue ui创建vue项目
在命令行界面输入vue ui进入Vue项目管理界面点击创建，选择创建项目的地址输入项目名称，点击下一步选择手动配置项目，下一步选择第一个，和以下两个，(根据项目需要进行选择)选择使用历史mode选择不保存预设创建项目...原创 2020-09-25 17:47:18 · 960 阅读 · 0 评论 -
为什么vue中的data用return返回
为什么在项目中data需要使用return返回数据呢？不使用return包裹的数据会在项目的全局可见，会造成变量污染；使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。当一个组件被定义， data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。...转载 2020-09-25 16:36:30 · 1360 阅读 · 0 评论 -
vue + ElementUI·网站快速成型工具
十二、vue + ElementUI根据之前创建vue-cli项目一样再来创建一个新项目创建一个名为 hello-vue 的工程vue init webpack hello-vue安装依赖，我们需要安装 vue-router、element-ui、sass-loader 和node-sass 四个插件# 进入工程目录cd hello-vue# 安装 vue-routernpm install vue-router --save-dev# 安装 element-uinpm i转载 2020-09-25 13:57:45 · 845 阅读 · 0 评论 -
vue-router 路由&路由嵌套&跳转方法
十一、vue-router路由Vue Router是Vue.js官方的路由管理器（路径跳转）。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有:嵌套的路由/视图表模块化的、基于组件的路由配置路由参数、查询、通配符基于Vue.js过渡系统的视图过渡效果细粒度的导航控制带有自动激活的CSS class的链接HTML5历史模式或hash模式，在IE9中自动降级自定义的滚动条行为1. 安装基于第一个vue-cli进行测试学习;先查看node_modules中是否存转载 2020-09-25 13:46:21 · 5720 阅读 · 0 评论 -
Webpack的使用
十、WebpackWebPack 是一款模块加载器兼打包工具，它能把各种资源，如 JS、JSX、ES6、SASS、LESS、图片等都作为模块来处理和使用。npm install webpack -gnpm install webpack-cli -g测试安装成功: 输入以下命令有版本号输出即为安装成功webpack -vwebpack-cli -v1. 什么是Webpack本质上，webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。当we转载 2020-09-23 09:47:40 · 250 阅读 · 0 评论 -
vue-cli (Vue.js快速开发)
九、第一个vue-cli项目Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统1. 什么是vue-clivue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板;预先定义好的目录结构及基础代码，就好比咱们在创建 Maven 项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架,我们的开发更加的快速;主要功能：统一的目录结构本地调试热部署单元测试集成打包上线2. 需要的环境Node.js : http://nodejs.cn/download/转载 2020-09-23 09:34:19 · 364 阅读 · 0 评论 -
内容分发-slot插槽
八、内容分发 slot在Vue.js中我们使用 元素作为承载分发内容的出口，作者称其为插槽，可以应用在组合组件的场景中;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>插槽 slot</title></head><body><!--view层 模板--><div id="a转载 2020-09-23 08:40:10 · 161 阅读 · 0 评论 -
Vue计算属性- computed:{}
七、 Vue计算属性计算属性的重点突出在属性两个字上(属性是名词)，首先它是个属性其次这个属性有计算的能力(计算是动词)，这里的计算就是个函数;简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，仅此而已;可以想象为缓存！<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>&l转载 2020-09-22 11:33:25 · 3040 阅读 · 0 评论 -
Axios通信简单入门
六、Axios通信1. 什么是AxiosAxios是一个开源的可以用在浏览器端和NodeJS 的异步通信框架，她的主要作用就是实现AJAX异步通信，其功能特点如下:从浏览器中创建XMLHttpRequests从node.js创建http请求支持Promise API [JS中链式编程]拦截请求和响应转换请求数据和响应数据取消请求自动转换JSON数据客户端支持防御XSRF (跨站请求伪造)GitHub: https://github.com/ axios/转载 2020-09-22 11:25:36 · 351 阅读 · 0 评论 -
Vue组件官网入门
五、Vue组件组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。在 Vue 中注册组件很简单：// 定义名为 todo-item 的新组件Vue.component('todo-item', { template: '<li>这是个待办项</li>'})var app = new转载 2020-09-21 15:25:14 · 551 阅读 · 0 评论 -
Vue基本语法
三、Vue基本语法1. v-bind现在数据和DOM已经被建立了关联，所有的东西都是响应式的。我们在控制台操作对象的属性，界面可以实时更新。我们可以使用v-bind来绑定元素属性！<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v-bind 绑定元素属性</title></head><body>原创 2020-09-21 14:30:41 · 275 阅读 · 0 评论 -
Vue的MVVM设计模式（第一个Vue程序）
二、第一个Vue程序1. 什么是MVVMMVVM (Model-View-ViewModel) 是一种软件架构设计模式，由微软WPF (用于替代WinForm，以前就是用这个技术开发桌面应用程序的)和Silverlight (类似于Java Applet,简单点说就是在浏览器上运行的WPF)的架构师Ken Cooper和Ted Peters 开发，是一种简化用户界面的事件驱动编程方式。由John Gossman (同样也是WPF和Silverlight的架构师)于2005年在他的博客上发表。MVV转载 2020-09-21 14:06:28 · 827 阅读 · 0 评论 -
学习Vue前了解前端知识
Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据网络通信 ： axios页面跳转 ： vue-router状态管理：vuexVue-UI : ICE , Element UI一、前端核心分析1. VUE 概述Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，转载 2020-09-19 16:24:17 · 656 阅读 · 0 评论