VUE简介及简单应用案例
目录
1.VUE概述
1.1VUE简介
1.2MVVM思想
2.VUE快速入门
2.1新建 HTML 页面,引入 Vue.js文件
2.2在JS代码区域,创建Vue核心对象,进行数据绑定
2.3编写视图
2.4整体代码
3.VUE指令
3.1v-bind & v-model 指令
3.2v-on 指令
3.3条件判断指令
3.4v-for 指令
3.5生命周期
4.案例
4.1查询所有功能
4.11前端代码
4.12后端代码
4.2添加功能
4.21前端代码
4.22后端代码
1.VUE概述
1.1VUE简介
Vue 是一套前端框架,免除原生JavaScript中的DOM操作,简化书写。
后端的框架 Mybatis
,Mybatis
是用来简化 jdbc
代码编写的;而 VUE
是前端的框架,是用来简化 JavaScript
代码编写的。
1.2MVVM思想
①基于MVVM(Model-View-ViewModel)思想,实现数据的双向绑定,将编程的关注点放在数据上。之前我们是将关注点放在了 DOM 操作上;而要了解 MVVM
思想,必须先聊聊 MVC
思想,如下图就是 MVC
思想图解 :
C 就是咱们 js 代码,M 就是数据,而 V 是页面上展示的内容。
②MVC
思想是没法进行双向绑定的。双向绑定是指当数据模型数据发生变化时,页面展示的会随之发生变化,而如果表单数据发生变化,绑定的模型数据也随之发生变化。接下来我们聊聊 MVVM
思想,如下图是三个组件图解:
图中的 Model
就是我们的数据,View
是视图,也就是页面标签,用户可以通过浏览器看到的内容;Model
和 View
是通过 ViewModel
对象进行双向绑定的,而 ViewModel
对象是 Vue
提供的。接下来让大家看一下双向绑定的效果,下图是提前准备的代码,输入框绑定了 username
模型数据,而在页面上也使用 {{}}
绑定了 username
模型数据
通过浏览器打开该页面可以看到如下页面
当我们在输入框中输入内容,而输入框后面随之实时的展示我们输入的内容,这就是双向绑定的效果。
2.VUE快速入门
2.1新建 HTML 页面,引入 Vue.js文件
<script src="js/vue.js"></script>
VUE和AXios使用的JS文件及Element组件库-Javascript文档类资源-CSDN文库https://download.csdn.net/download/weixin_59798969/86397505
2.2在JS代码区域,创建Vue核心对象,进行数据绑定
new Vue({el: "#app",data() {return {username: ""}}
});
创建 Vue 对象时,需要传递一个 js 对象,而该对象中需要如下属性:
el
: 用来指定哪儿些标签受 Vue 管理。 该属性取值#app
中的app
需要是受管理的标签的id属性值data
:用来定义数据模型methods
:用来定义函数。这个我们在后面就会用到
2.3编写视图
<div id="app"><input name="username" v-model="username" >{{username}}
</div>
{{}}
是 Vue 中定义的 插值表达式
,在里面写数据模型,到时候会将该模型的数据值展示在这个位置。
2.4整体代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="app"><input v-model="username"><!--插值表达式-->{{username}}
</div><script src="js/vue.js"></script><script>//随着在input中输入文本,会实时在{{username}}显示输入内容new Vue({el:"#app",data(){ // data() 是 ECMAScript 6 版本的新的写法return {//username绑定v-model,随着input输入变化username:""}}// date:function (){// return{// username:""// }// }});
</script></body>
</html>
3.VUE指令
常用的指令有:
指令 | 作用 |
---|---|
v-bind | 为HTML标签绑定属性值,如设置 href , css样式等 |
v-model | 在表单元素上创建双向数据绑定 |
v-on | 为HTML标签绑定事件 |
v-if | 条件性的渲染某元素,判定为true时渲染,否则不渲染 |
v-else | |
v-else-if | |
v-show | 根据条件展示某元素,区别在于切换的是display属性的值 |
v-for | 列表渲染,遍历容器的元素或者对象的属性 |
3.1v-bind & v-model 指令
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><a v-bind:href="url">点击一下</a><!-- 上述可简写如下--><a :href="url">点击一下</a><!--input显示默认url网址,可通过改变input内容实时使a标签跳转网址改变--><input v-model="url"><!-- 通过浏览器打开页面,并且使用检查查看超链接的路径,该路径会根据输入框输入的路径变化而变化,这是因为超链接和输入框绑定的是同一个模型数据-->
</div><script src="js/vue.js"></script>
<script>//1. 创建Vue核心对象new Vue({el:"#app",data(){return {url:"https://www.baidu.com"}}});
</script>
</body>
</html>
v-bind :该指令可以给标签原有属性绑定模型数据。这样模型数据发生变化,标签属性值也随之发生变化
v-model :该指令可以给表单项标签绑定模型数据,这样就能实现双向绑定效果。
3.2v-on 指令
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><input type="button" value="一个按钮" v-on:click="show()"><br><!-- 使用 `v-on` 时还可以使用简化的写法,将 `v-on:` 替换成 `@`--><input type="button" value="一个按钮" @click="show()"></div><script src="js/vue.js"></script>
<script>//1. 创建Vue核心对象new Vue({el:"#app",data(){return {url:"https://www.baidu.com"}},methods:{show(){alert("我被点了...");}}});</script></body>
</html>
注意:v-on:
后面的事件名称是之前原生事件属性名去掉on
例如:
单击事件 : 事件属性名是 onclick,而在vue中使用是
v-on:click
失去焦点事件:事件属性名是 onblur,而在vue中使用时
v-on:blur
3.3条件判断指令
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><div v-if="count == 3">div1</div><div v-else-if="count == 4">div2</div><div v-else>div3</div><hr><div v-show="count == 3">div v-show</div><br><input v-model="count"></div><script src="js/vue.js"></script>
<script>//1. 创建Vue核心对象new Vue({el:"#app",data(){return {username:"",url:"https://www.baidu.com",count:3}},methods:{show(){alert("我被点了...");}}});</script></body>
</html>
当 count
模型的数据是3时,在页面上展示 div1
内容;当 count
模型的数据是4时,在页面上展示 div2
内容;count
模型数据是其他值时,在页面上展示 div3
。这里为了动态改变模型数据 count
的值,再定义一个输入框绑定 count
模型数据。
3.4v-for 指令
用来遍历的,该指令使用的格式如下:
<标签 v-for="变量名 in 集合模型数据">{{变量名}}
</标签>
注意:需要循环那个标签,v-for
指令就写在那个标签上。
如果在页面需要使用到集合模型数据的索引,就需要使用如下格式:
<标签 v-for="(变量名,索引变量) in 集合模型数据"><!--索引变量是从0开始,所以要表示序号的话,需要手动的加1-->{{索引变量 + 1}} {{变量名}}
</标签>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><div v-for="addr in addrs">{{addr}} <br></div><hr><div v-for="(addr,i) in addrs">{{i+1}}--{{addr}} <br></div>
</div><script src="js/vue.js"></script>
<script>//1. 创建Vue核心对象new Vue({el:"#app",data(){return {addrs:["北京","上海","西安"]}}});
</script>
</body>
</html>
3.5生命周期
mounted
:挂载完成,Vue初始化成功,HTML页面渲染成功。而以后我们会在该方法中发送异步请求,加载数据。
4.案例
4.1查询所有功能
4.11前端代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><a href="addBrand.html"><input type="button" value="新增"></a><br><hr><table id="brandTable" border="1" cellspacing="0" width="100%"><tr><th>序号</th><th>品牌名称</th><th>企业名称</th><th>排序</th><th>品牌介绍</th><th>状态</th><th>操作</th></tr><!--使用v-for遍历tr--><tr v-for="(brand,i) in brands" align="center"><td>{{i + 1}}</td><td>{{brand.brandName}}</td><td>{{brand.companyName}}</td><td>{{brand.ordered}}</td><td>{{brand.description}}</td><td>{{brand.statusStr}}</td><td><a href="#">修改</a> <a href="#">删除</a></td></tr></table>
</div>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script><script>new Vue({el: "#app",data(){return{brands:[]}},mounted(){// 页面加载完成后,发送异步请求,查询数据var _this = this;axios({method:"get",url:"http://localhost:8080/brand-demo/selectAllServlet"}).then(function (resp) {//VUE中的data()中的brands数据由获得响应的值来赋予//若调用VUE的brands进行赋值操作不能直接在axios中写this.brands,//写在外面才可表示,来表示对VUE的brands进行赋值_this.brands = resp.data;})}})
</script>
</body>
</html>
4.12后端代码
package com.web;import com.alibaba.fastjson.JSON;
import com.itheima.pojo.Brand;
import com.itheima.service.BrandService;import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.util.List;@WebServlet(name = "SelectAllServlet", value = "/SelectAllServlet")
public class SelectAllServlet extends HttpServlet {private BrandService brandService=new BrandService();@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1.调用service查询List<Brand> brands = brandService.selectAll();//2. 将集合转换为JSON数据 序列化String jsonString = JSON.toJSONString(brands);//3. 响应数据 application/json text/jsonresponse.setContentType("text/json;charset=utf-8");response.getWriter().write(jsonString);}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request, response);}
}
4.2添加功能
4.21前端代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>添加品牌</title>
</head>
<body>
<div id="app"><h3>添加品牌</h3><form action="" method="post">//通过绑定v-model,一旦input输入的内容产生变化,VUE中brand获得的值也变化品牌名称:<input id="brandName" v-model="brand.brandName" name="brandName"><br>企业名称:<input id="companyName" v-model="brand.companyName" name="companyName"><br>排序:<input id="ordered" v-model="brand.ordered" name="ordered"><br>描述信息:<textarea rows="5" cols="20" id="description" v-model="brand.description" name="description"></textarea><br>状态:<input type="radio" name="status" v-model="brand.status" value="0">禁用<input type="radio" name="status" v-model="brand.status" value="1">启用<br>//提交绑定一个submitForm()事件,在VUE的methods中实现<input type="button" id="btn" @click="submitForm()" value="提交"></form>
</div>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
<script>new Vue({el: "#app",data(){return {brand:{}}},methods:{submitForm(){// 发送ajax请求,添加var _this = this;axios({method:"post",url:"http://localhost:8080/brand-demo/addServlet",//axios自动将js转化为JSON数据并发送过去data:_this.brand}).then(function (resp) {// 判断响应数据是否为 successif(resp.data == "success"){location.href = "http://localhost:8080/brand-demo/brand.html";}})}}})
</script>
</body>
</html>
4.22后端代码
package com.itheima.web;import com.alibaba.fastjson.JSON;
import com.itheima.pojo.Brand;
import com.itheima.service.BrandService;import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.BufferedReader;
import java.io.IOException;@WebServlet("/addServlet")
public class addServlet extends HttpServlet {private BrandService brandService = new BrandService();@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1. 接收数据,request.getParameter 不能接收json的数据/* String brandName = request.getParameter("brandName");System.out.println(brandName);*/// 获取请求体数据BufferedReader br = request.getReader();String params = br.readLine();// 将JSON字符串转为Java对象Brand brand = JSON.parseObject(params, Brand.class);//2. 调用service 添加brandService.add(brand);//3. 响应成功标识response.getWriter().write("success");}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request, response);}
}
可以点个免费的赞吗!!!
VUE简介及简单应用案例相关推荐
- Vue简介及简单应用
目录 一.Vue简介 1.Vue介绍 官方说法:Vue是一个构建用户界面(UI)的渐进式JavaScript框架.并且颠覆了传统的MVC模式(js)使用了MVVM模型开发,它实现了前后端分离. 2.库 ...
- Ajax和Axios 的简介及简单应用案例
目录 1.ajax概念 2.ajax作用 2.1与服务器进行数据交换: 2.2异步交互: 3.ajax快速入门 3.1传送数据 3.2接受并响应数据 4.axios快速入门 4.1axios概念 4. ...
- 简单介绍Vue之vue.$set()方法源码案例
这篇文章主要介绍了Vue之vue.$set()方法源码案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下 在使用vue开发项目的过程中,经常会遇到这样 ...
- Vue详解及综合案例
一.Vue简介 1.1 简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式的js框架,发布于 2014 年 2 月.与其它大型框架不同的是,Vue 被设计为可以自底 ...
- Vue安装配置以及入门案例
Vue Vue简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不 ...
- SLAM:SLAM(即时定位与地图构建)的简介、发展、案例应用之详细攻略
SLAM:SLAM(即时定位与地图构建)的简介.发展.案例应用之详细攻略 目录 SLAM的简介 1.我在什么地方?-定位,自身状态. 周围环境是什么样?-建图,外在环境. 2.SLAM的问题描述 3. ...
- BigData之Hive:Hive数据管理的简介、下载、案例应用之详细攻略
BigData之Hive:Hive数据管理的简介.下载.案例应用之详细攻略 目录 Hive数据管理的简介 1.Hive的适用场景--不适合那些需要高实性的应用(不能够在大规模数据集上实现低延迟快速的查 ...
- BigData之Hbase:Hbase数据管理的简介、下载、案例应用之详细攻略
BigData之Hbase:Hbase数据管理的简介.下载.案例应用之详细攻略 目录 Hbase数据管理的简介--基于Hadoop的非结构化.基于列的数据存储的数据库 1.HBase的架构体现及与HD ...
- ML之DataScience:基于机器学习处理数据科学(DataScience)任务(数据分析、特征工程、科学预测等)的简介、流程、案例应用执行详细攻略
ML之DataScience:基于机器学习处理数据科学(DataScience)任务(数据分析.特征工程.科学预测等)的简介.流程.案例应用执行详细攻略 目录 数据科学的任务(数据分析.特征工程.科学 ...
最新文章
- 寻找网页设计灵感的200佳网站推荐(系列二)
- 使用 dispatchEvent() 方法
- android activity dialog 高度,将Activity以Dialog形式显示,并设置宽高度
- JVM——类文件结构
- thinkphp中mysql添加数据_thinkphp添加数据 add()方法
- POJ 1947 Rebuilding Roads (树dp + 背包思想)
- python自学行吗-没有编程基础,可以自学Python吗?
- 探索图片填充模式二--CenterCrop模式的实现
- 天正安装autocad启动失败_天正cad启动失败
- 压力单位MPa、Psi和bar之间换算公式
- Windows, 使用https访问网页提示此网站的安全证书有问题解决方法
- delphi mysql 删除_Delphi如何清空日志文件
- java专有技术名词_关于Java的专有名词
- Logic Synthesis And Verification Algorithms Gary D. Hachtel Fabio Somenzi 第十章
- 面试中的SQL分析二
- SQL更改表名,数据库名,字段名
- 写一篇基于SPEA2算法的高维多目标救灾物资分配的论文
- 放牛奶的冰箱(二分答案)
- java用wasd_涨知识:游戏默认WASD原来是这么来的
- SpringCloud - Spring Cloud Netflix 之 Hystrix熔断器(七)
热门文章
- 01 html和css (前端基础第一天)
- 打印机共享用计算机,如何将打印机共享
- Oracle PL/SQL开发基础(第十七弹:集合类型)
- 北航软件学院2013级数据库期末试题
- urdf、xacro、sdf三种文件的转换
- [常微分方程的数值解法系列二] 欧拉法
- 儿童产品上架亚马逊CPC认证介绍
- 单纯形法表格法例题详解_第二章 线性规划与单纯形法(补充例题123页开始).ppt...
- C# DllImport 系统调用使用详解 托管代码的介绍 EntryPoint的使用
- ThinkPHP框架下载