vue
关注
分享
扫一扫
文章平均质量分 52
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为
自由与束缚JavaJavaScript
这个作者很懒，什么都没留下…
展开
-
031_vue编程式导航
1. 页面导航的两种方式 1.1. 声明式导航: 通过点击链接实现导航的方式, 叫做声明式导航。例如: 普通网页中的<a></a>链接或vue中的<router-link></router-link>。1.2. 编程式导航: 通过调用JavaScript形式的API实现导航的方式, 叫做编程式导航。例如: 普通网页中的location.href。1.3.vue中的编程式导航1.3.1.this.$router.push('hash地址');..原创 2022-02-13 09:31:41 · 260 阅读 · 0 评论 -
030_vue命名路由
1. 命名路由 1.1. 命名路由, 通过name属性给当前路由指定一个别名user_alias。1.2. :to绑定属性, 也是使用name指定路由别名, params指定参数。1.3.代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>命名路由</title> </head> <body>...原创 2022-02-13 09:31:33 · 293 阅读 · 0 评论 -
029_vue动态路由匹配
1. 下面3个路由链接<router-link to="/user/1">User1</router-link><router-link to="/user/2">User2</router-link><router-link to="/user/3">User3</router-link>2. 动态匹配路由的基本用法2.1. 通过动态路由参数的模式进行路由匹配。2.2. 代码<!DOCTYPE h原创 2022-02-12 18:57:55 · 349 阅读 · 0 评论 -
028_vue路由嵌套
1. 嵌套路由功能分析 1.1. 点击父级路由链接显示模板内容。1.2. 模板内容中又有子级路由链接。1.3. 点击子级路由链接显示子级模板内容。2. 嵌套路由用法2.1. 父路由组件模板。2.2. 子路由组件模板。2.3. 嵌套路由匹配, 父路由通过children属性配置子路由。3. 嵌套路由例子3.1. 代码<!DOCTYPE html><html> <head> <meta charset=...原创 2022-02-12 18:52:49 · 173 阅读 · 0 评论 -
027_vue路由
1. 后端路由 1.1. 概念: 根据不同的用户URL请求, 返回不同的内容。1.2. 本质: URL请求地址与服务器资源之间的对应关系。2. SPA(Single Page Application) 2.1. 后端渲染, 存在性能问题。2.2. Ajax前端渲染, 提高前端渲染性能, 但是不支持浏览器的前进和后退操作。2.3. SPA(Single Page Application)单页面应用程序: 整个网站只有一个页面, 内容的变化通过Ajax局部更新实现、同时支持浏览器地址原创 2022-02-12 18:49:24 · 158 阅读 · 0 评论 -
026_图书管理案例
1. 新建一个名为Books的动态Web工程1.1. 添加gson-2.8.5.jar1.2. 编写Book.javapackage com.bjbs.action;import java.io.Serializable;import java.util.Date;public class Book implements Serializable { private static final long serialVersionUID = 1L; private int.原创 2022-02-12 18:45:13 · 450 阅读 · 0 评论 -
025_Axios
1. axios是一个基于Promise用于浏览器和node.js的http客户端。2. axios具有以下特征 2.1. 支持浏览器和node.js。2.2. 支持Promise。2.3. 能拦截请求和响应。2.4. 自动转换JSON数据。3. axios get请求传递参数3.1. 通过url传递参数axios.get('aa.action?id=123').then(function(ret){ });3.2. 通过params选项传递参数原创 2022-02-12 18:42:54 · 168 阅读 · 0 评论 -
001_Vue入门
1. Vue是一个国产的前端框架, 作者尤雨溪。2. Vue官方网址: https://vuejs.org/。3. Vue(读音/vjuː/, 类似于view)是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是, Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层, 不仅易于上手, 还便于与第三方库或既有项目整合。另一方面, 当与现代化的工具链以及各种支持类库结合使用时, Vue也完全能够为复杂的单页应用提供驱动。4. 渐进式框架: 声明式渲染——>组件化应用.原创 2022-02-10 12:51:53 · 444 阅读 · 1 评论 -
002_Vue指令
1. Vue指令1.1. Vue指令时间就是一些自定义属性。1.2. Vue指令的格式: 以v-开始(比如: v-cloak)。2. v-cloak指令2.1. 插值表达式存在"闪动"问题。2.2. 使用v-cloak指令, 可以解决"闪动"问题。解决问题的原理: 先通过样式隐藏内容, 然后进行值的替换, 替换好之后再显示出来。2.3. 代码<!DOCTYPE html><html> <head> <meta charset="原创 2022-02-10 12:56:12 · 90 阅读 · 0 评论 -
003_Vue事件
1. Vue如何处理事件?1.1. v-on指令用法<input type='button' v-on:click='num++' />1.2. v-on简写形式<input type='button' @click='num++' />2. 事件函数的调用方式2.1. 直接绑定函数名称<input type='button' @:click='handle1' />2.2. 调用函数<input type='button原创 2022-02-10 13:00:30 · 216 阅读 · 0 评论 -
004_Vue按键修饰符
1. 按键修饰符keyup1.1. .enter回车键<input v-on:keyup.enter="handleSubmit" />1.2. 代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>enter键的keyup事件</title> </head> <body> <div原创 2022-02-10 13:03:14 · 181 阅读 · 0 评论 -
005_Vue属性绑定
1. 如何动态处理属性?1.1. v-bind指令用法<a v-bind:href='url'>跳转</a>1.2. v-bind简写形式<a :href='url'>跳转</a>1.3. 代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>属性绑定</title> <原创 2022-02-10 13:05:36 · 238 阅读 · 0 评论 -
006_Vue class样式绑定
1. class样式绑定处理1.1. 对象语法<div v-bind:class="{active: isActive}"></div>1.2. 数组语法<div v-bind:class="[active1Class, active2Class]"></div>2. class样式绑定-对象形式2.1. 代码<!DOCTYPE html><html> <head> <meta原创 2022-02-10 00:04:47 · 284 阅读 · 0 评论 -
007_Vue style样式绑定
1. style样式绑定处理1.1. 对象语法<div v-bind:style="{width: '400px', height: '50px'}"></div>1.2. 数组语法<div v-bind:style="[{width: 400px'}, {height: '50px'}]"></div>2. 对象绑定style2.1. 代码<!DOCTYPE html><html> <hea原创 2022-02-09 23:59:08 · 558 阅读 · 0 评论 -
008_Vue分支结构
1. 分支结构1.1. v-if1.2. v-else1.3. v-else-if1.4. v-show2. 分支结构例子2.1. 代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>分支结构</title> </head> <body> <div id="app"> &l原创 2022-02-09 23:52:41 · 469 阅读 · 0 评论 -
009_Vue循环结构
1. 循环结构1.1. v-for遍历数组, key的作用, 帮助Vue区分不同的元素, 从而提高性能。<ul v-for="item in books"> <li>{{item}}</li></ul><ul v-for="(item, index) in books"> <li>[{{index}}] {{item}}</li></ul><ul :key="item.id" v-原创 2022-02-09 23:54:46 · 256 阅读 · 0 评论 -
010_Vue表单
1. 表单例子1.1. 代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>表单</title> <style type="text/css"> form div { height: 40px; line-height: 40px; } form div:nth-child(4) {原创 2022-02-09 23:56:36 · 217 阅读 · 0 评论 -
011_Vue自定义指令
1. 自定义指令1.1. 代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>自定义指令</title> </head> <body> <div id="app"> <div>用户名: <input type="text" v-model="userName" />&l原创 2022-02-11 14:43:41 · 106 阅读 · 0 评论 -
012_Vue计算属性
1. 为何需要计算属性?1.1. 表达式的计算逻辑可能会比较复杂, 使用计算属性可以使模板内容更加简洁。1.2. 计算属性用法computed: { reverseString: function(){ return this.msg.split('').reverse().join(''); }}1.3. 计算属性有缓存。2. 计算属性例子2.1. 代码<!DOCTYPE html><html> <head> <.原创 2022-02-11 14:45:19 · 65 阅读 · 0 评论 -
013_Vue监听器
1. 监听器的应用场景1.1. 数据变化时执行异步或开销比较大的操作。1.2. 监听器用法watch: { // 监听firstName的值的变化 firstName: function(val){ this.fullName = val + "" + this.lastName; }}2. 监听器例子2.1. 代码<!DOCTYPE html><html> <head> <meta charset="utf-..原创 2022-02-11 14:46:49 · 76 阅读 · 0 评论 -
014_Vue过滤器
1. 过滤器的作用是什么?1.1. 格式化数据, 比如: 将字符串格式化为首字母大写、将日期格式化为指定的格式等等。1.2. 自定义全局过滤器Vue.filter("过滤器名称", function(val) { // 过滤器业务逻辑});1.3. 自定义局部过滤器filters: { format: function(date, format){ }}1.4. 过滤器的使用<div>首字母大写: {{msg | upper}}</div&原创 2022-02-11 14:48:47 · 118 阅读 · 0 评论 -
015_Vue生命周期
1. 生命周期主要阶段1.1. 挂载(初始化相关属性)beforeCreate created beforeMount mounted1.2. 更新(元素或组件的变更操作)beforeUpdate updated1.3. 销毁(销毁相关属性)beforeDestroy destroyed1.4. 生命周期图示2. 生命周期例子2.1. 代码<!DOCTYPE html><html> <head> <meta.原创 2022-02-11 14:51:11 · 69 阅读 · 0 评论 -
016_Vue数组数据的响应式处理
1. 数组数据的响应式处理1.1. 第一个参数表示要处理的数组名称;第二个参数表示要处理的数组索引;第三个参数表示要处理的数组的值。Vue.set(vm.list, index, newValue);vm.$set(vm.list, index, newValue);1.2. 代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>数组数据...原创 2022-02-11 14:52:35 · 178 阅读 · 0 评论 -
017_Vue组件
1. 全局组件1.1. 全局组件注册语法Vue.component(组件名称, { data: 组件数据, template: 组件模板内容, methods: {}})1.2. 组件使用, 组件可以重用<div id="app"> <组件名称></组件名称> <组件名称></组件名称> <组件名称></组件名称></div>1.3. 代码<!DOC原创 2022-02-11 14:56:33 · 308 阅读 · 0 评论 -
018_Vue父组件向子组件传值
1. 父组件向子组件传值1.1. 组件内部通过props接收传递过来的值Vue.component('menu-item', { props: ['title'], template: '<div>{{title}}</div>'});1.2. 父组件通过属性将值传递给子组件<menu-item title='来自父组件的title'></menu-item><menu-item :title='ptitle'>原创 2022-02-11 14:58:59 · 292 阅读 · 0 评论 -
019_Vue子组件向父组件传值
1. 父组件向子组件传递信息1.1. props传递数据原则: 单向数据流。1.2. 子组件通过自定义事件向父组件传递信息<button @click='$emit("enlarge-text")'>扩大父组件中字体大小</button>1.3. 父组件监听子组件的事件<menu-item :arr='parr' @enlarge-text='handle'></menu-item>methods: { handle: func.原创 2022-02-11 15:02:29 · 375 阅读 · 0 评论 -
020_Vue非父子组件之间数据交互
1. 非父子组件之间数据交互1.1. 单独的事件中心管理组件间的通信var eventHub = new Vue();1.2. 监听事件eventHub.$on('event-name', fun);1.3. 销毁事件eventHub.$off('event-name');1.4. 触发事件eventHub.$emit('event-name', param);1.5. 图解1.6. 代码<!DOCTYPE html><html.原创 2022-02-12 17:26:24 · 433 阅读 · 0 评论 -
021_Vue插槽
1. 插槽1.1. 父组件向子组件传递内容1.2. 插槽位置Vue.component('alert-box', { template: ` <div> <strong>ERROR:</strong> <slot>默认内容</slot> </div> `});1.3. 插槽内容<div id="app"> <alert-box>有bug发生</a...原创 2022-02-12 17:33:26 · 260 阅读 · 0 评论 -
022_Vue购物车
1. 项目目录2. img目录3. 代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>购物车</title> <style type="text/css"> .container { } .container .cart { width: 300px;原创 2022-02-12 18:29:53 · 171 阅读 · 0 评论 -
023_Promise
1. URL地址格式: schema://host:port/path?query#fragment1.1. schema: 协议。例如: http、https、ftp等。1.2. host: 域名或者IP地址。1.3. port: 端口, http默认端口80, 可以省略。1.4. path: 路径, 例如: /project/login。1.5. query: 查询参数, 例如: uname=lisi&pwd=123。1.6. fragment: 锚点(哈希Hash),原创 2022-02-12 18:33:46 · 201 阅读 · 0 评论 -
024_Fetch
1. fetch更加简单的数据获取方式, 功能更加强大、更加灵活, 是基于Promise实现的。2. fetch语法结构fetch(url).then(fun1) .then(fun2) ...... .catch(fun)3. 新建一个名为Promise的动态Web工程3.1. 编写FetchAjax.javapackage com.bjbs.fa;import java.io.IOException;import javax.servlet.ServletExcept原创 2022-02-12 18:36:36 · 305 阅读 · 0 评论 -
032_前端模块化
1. 传统开发模式的主要问题1.1. 命名冲突1.2. 文件依赖2. 模块化(工程化)2.1. 模块化就是把单独的一个功能封装到一个模块(文件)中, 模块直接相互隔离, 但是可以通过特定的接口公开内部成员, 也可以依赖别的模块。2.2. 模块化开发的好处就是方便代码重用, 从而提高开发效率, 并且方便后期维护。3. ES6模块化3.1. 在ES6模块化规范诞生之前, JavaScript社区已经尝试并提出了AMD、CMD、CommonJS等模块化规范。3.2. 但是, 这些社原创 2022-02-10 13:12:10 · 1002 阅读 · 0 评论 -
033_webpack打包ES6模块化工程
1. 新建项目1.1. 新建一个ES6Model文件夹1.2.打开VSCode1.3. 使用VSCode打开文件夹1.4. 选择要打开的文件夹1.5. 资源管理器中显示打开的文件夹1.6. 在终端中运行: npm init -y命令, 初始化包管理器文件package.json1.7. 在ES6Model下新建一个src目录, 在src目录下新建一个index.html1.8. 在终端中运行: npm install jquery -...原创 2022-02-10 13:18:13 · 1252 阅读 · 0 评论 -
034_webpack中的加载器
1. 通过loader打包非js模块1.1. 在实际开发中, webpack默认只能打包处理以.js后缀名结尾的模块, 其它非.js后缀名结尾的模块, webpack默认处理不了, 需要调用loader加载器才可以正常打包, 否则会报错。1.2. loader加载器可以协助webpack打包处理特定的文件模块, 比如:less-loader可以打包处理.less相关的文件 sass-loader可以打包处理.scss相关的文件 url-loader可以打包处理css中与url路径相关的文件原创 2022-02-10 13:29:18 · 508 阅读 · 0 评论 -
035_vue脚手架
1. vue脚手架介绍1.1. vue脚手架用于快速创建Vue项目的基础架构。2. 安装Vue脚手架2.1. 使用命令: npm install -g @vue/cli, 安装Vue脚手架。2.2. 安装完成, 查看C:\Users\用户名\AppData\Roaming\npm目录2.3. 使用命令: vue -V, 查看脚手架版本, 报错: \npm\vue.ps1, 因为在此系统上禁止运行脚本。2.4. 以管理员身份运行PowerShell2.5. 执...原创 2022-02-10 13:37:48 · 1681 阅读 · 0 评论 -
036_vue使用element-ui框架
1. 使用命令安装element-ui1.1. 安装依赖包npm install element-ui -S1.2. 在main.js中, 导入element-ui并配置成Vue的插件1.3. 在App.vue根组件中, 使用element-ui的按钮1.4. 在终端中使用npm run serve运行项目1.5. 访问项目2. 基于图形化界面安装element-ui2.1. 点击插件——>添加插件2.2. 搜索vue-cli-plugi...原创 2022-02-11 14:40:33 · 304 阅读 · 0 评论