Vue
Vue的相关笔记、思考、知识
java阳旭
一名热爱编程的95后,梦想用代码改变世界!
展开
-
Vue.js入门实战项目(五)--编写Vue.js代码实现前端功能
前端页面通常由前端开发人员编写好,作为后端开发,只要能定位到自己需要写代码的地方,实现相应的需求即可。完整项目我已经上传到了码云上,供大家学习参考。vuejsdemo定位 HTML1、找到 Vue.js 需要接管的区域<div class="wrapper" id="app"> <!-- 省略的代码 --></div>2、通过 findAll 方法查询出所有用户后,需要展示到页面中,找到页面中展示所有用户地方。通常情况下应该使用 for 循环遍历,原创 2020-05-25 19:36:32 · 5077 阅读 · 1 评论 -
Vue.js入门实战项目(四)--配置SpringMVC并编写控制器代码
配置文件web.xml<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/we原创 2020-05-25 19:34:30 · 671 阅读 · 0 评论 -
Vue.js入门实战项目(三)--配置Spring并编写测试类
Spring 配置applicationContext.xml<?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:aop="http://www.springframework.org/schema原创 2020-05-25 19:32:56 · 220 阅读 · 0 评论 -
Vue.js入门实战项目(二)--编写实体类、持久层和业务层代码
实体类User 类public class User { private Integer id; private Integer age; private String username; private String PASSWORD; private String email; private String sex; //为节省篇幅,这里省略 getter/setter}持久层UserDao 接口public interface原创 2020-05-25 19:32:00 · 1506 阅读 · 0 评论 -
Vue.js入门实战项目(一)--创建数据库和工程
项目介绍一个实现了查询用户列表、根据id查询、更新用户这三个功能的后台管理系统。后端:SSM 框架(Spring + SpringMVC + MyBatis)前端:Vue.js数据库设计建表语句DROP TABLE IF EXISTS `user`;CREATE TABLE `user` ( `id` int(11) NOT NULL AUTO_INCREMENT, `age` int(11) DEFAULT NULL, `username` varchar(20) DEFAULT原创 2020-05-25 19:31:03 · 1066 阅读 · 0 评论 -
Vue.js入门笔记(十三)--AJAX
当Vue.js 更新到 2.0 之后,作者就宣告不再对 vue-resource 进行更新,而是推荐 axios原创 2020-05-25 11:14:05 · 1423 阅读 · 0 评论 -
Vue.js入门笔记(十二)--Vue生命周期
生命周期每个 Vue 实例在被创建之前都要经过一系列的初始化过程。Vue 在生命周期中有这些状态,beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed。先是 new Vue(),然后接下来 beforeCreate, beforeCreate 就是在创建之前的意思,在创建之前其实就是啥事都没有,然后接下来它就开始观察数据,然后开始初始化事件,然后接下来就是 created,这时就在创原创 2020-05-25 10:43:41 · 277 阅读 · 0 评论 -
Vue.js入门笔记(十一)--v-if与v-show
条件渲染v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用原创 2020-05-24 12:44:23 · 287 阅读 · 0 评论 -
Vue.js入门笔记(十)--v-for的使用
用法基于源数据多次渲染元素或模板块。此指令之值,必须使用特定语法 alias in expression,为当前遍历的元素提供别名:<div v-for="item in items"> {{ item.text }}</div>另外也可以为数组索引指定别名 (或者用于对象的键):<div v-for="(item, index) in items"></div><div v-for="(val, key) in object">原创 2020-05-24 12:43:03 · 807 阅读 · 2 评论 -
Vue.js入门笔记(九)--v-model的使用
表单输入绑定基础用法你可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。注意:v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。v-mod原创 2020-05-24 12:41:16 · 679 阅读 · 0 评论 -
Vue.js入门笔记(八)--v-text、v-html以及v-bind的使用
模板语法Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,Vue 能够智能地计算出最少需要重新渲染多少组件,并把 DOM 操作次数减到最少。如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量,你也可以不用模板,直接写渲染 (render) 函数,使用可选的原创 2020-05-24 12:40:05 · 628 阅读 · 0 评论 -
Vue.js入门笔记(七)--按键修饰符
按键修饰符在监听键盘事件时,我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` --><input v-on:keyup.enter="submit">你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。<input v-on:keyup.page-down="onPageDown"&g原创 2020-05-24 08:07:06 · 527 阅读 · 0 评论 -
Vue.js入门笔记(六)--事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符。.stop – 阻止单击事件继续传播.prevent– 提交事件不再重载页面.capture – 添加事件监听器时使用事件捕获模式,即内部元素触发的事件先在此处理,然后才交由内部元素进行处理.原创 2020-05-23 20:47:37 · 559 阅读 · 0 评论 -
Vue.js入门笔记(五)--v-on鼠标移动事件和阻止事件传播
案例:div 内部有一个 textarea,当鼠标移动到 div 作用域上,提示“鼠标移动到了 div 上了”,当鼠标移动到 textarea 作用域上时,提示“鼠标移动到了 textarea 上了”。1、原生 JavaScript 的 onmouseover 事件<div onmouseover="divmouseover()" id="div"> <textarea onmouseover="textareamouseover()">这是一个文件域</textarea原创 2020-05-23 20:16:37 · 3809 阅读 · 2 评论 -
Vue.js入门笔记(四)--v-on键盘事件和阻止事件默认行为
案例:实现在输入框内只允许输入数字,输入其他字符无效的功能。1、原生 JavaScript 的 onkeydown 事件<input type="text" onkeydown="preventKeyCode()" />function preventKeyCode() { //event对象、document对象以及window对象可以不用定义直接使用 var keyCode = event.keyCode; if(event.keyCode < 48 || e原创 2020-05-23 15:33:18 · 1117 阅读 · 1 评论 -
Vue.js入门笔记(三)--v-on绑定点击事件
可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。v-on:click<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>v-on:click</title> <script src="js/vue.js"></script> </head> <body>原创 2020-05-23 14:34:29 · 488 阅读 · 0 评论 -
Vue.js入门笔记(二)--MVVM理解
MVVM 概念MVVM 是 Model-View-ViewModel 的简写。它本质上就是 MVC 的改进版。MVVM 就是将其中的 View 的状态和行为抽象化,让我们将视图 UI 和业务逻辑分开。MVVM 模式和 MVC 模式一样,主要目的是分离视图(View)和模型(Model)。Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于 View 层。它的核心是 MVVM 中的 VM,也就是 ViewModel。 ViewModel 负责连接 View 和 M原创 2020-05-23 08:17:45 · 1713 阅读 · 0 评论 -
Vue.js入门笔记(一)--概述与快速入门
Vue.js 是一个构建数据驱动的 Web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件原创 2020-05-22 21:10:47 · 461 阅读 · 0 评论