-
Vue的使用
Vue
基于MVVM思想，实现数据的双向绑定，将编程的关注点放到数据上
Vue快速入门
1、新建HTML页面，引入Vue.js文件
链接：https://pan.baidu.com/s/1VUxtuGOVUAtKRGQf1JGWAA
提取码：06302.在JS代码区域，创建Vue核心对象，进行数据绑定
new Vue({ el:"#app", data(){ return username:"" } })- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
3.编写视图
<div id="app"> <input name="username" v-model="username"> {{username}} div>- 1
- 2
- 3
- 4
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <div id="app"> <input v-model="username"> {{username}} div> <script src="js/vue.js">script> <script> new Vue({ el:"#app", data(){ return{ username:"" } } // data:function () { // return{ // username:"" // } // } }) script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
效果展示：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e2U21XPx-1658235407324)(https://s2.loli.net/2022/07/13/W8EqTxZiInkjJ9A.png)]
Vue常用指令：
指令 作用 v-bind 为HTML标签绑定属性值，如设置href，css样式等 v-model 在表单元素上创建双向数据绑定 v-on 为HTML标签绑定事件 v-if 条件性的渲染某元素，判定为true时渲染，否则不渲染 v-else v-else-if v-show 根据条件展示某元素，区别在于切换的是display属性的值 v-for 列表渲染 v-bind：
DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <div id="app"> <a :href="url">点击一下a> <a v-bind:href="url">点击一下a> div> <script src="js/vue.js">script> <script> new Vue({ el:"#app", data(){ return{ username:"", url:"https:\\www.baidu.com" } } // data:function () { // return{ // username:"" // } // } }) script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
v-on:
DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <div id="app"> <input type="button" value="一个按钮" v-on:click="show()"> div> <script src="js/vue.js">script> <script> new Vue({ el:"#app", data(){ return{ username:"", url:"https:\\www.baidu.com" } }, methods:{ show(){ alert("我被点了") } } }) script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
v-if:
DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <div id="app"> <div v-if="count==3">div1div> <div v-else-if="count==4">div2div> <div v-else>div3div> <input v-model="count"> div> <script src="js/vue.js">script> <script> new Vue({ el:"#app", data(){ return{ username:"", url:"https:\\www.baidu.com", count:3 } } }) script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
v-show:
DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <div id="app"> <div v-if="count==3">div1div> <div v-else-if="count==4">div2div> <div v-else>div3div> <hr> <div v-show="count==3">div4div> <input v-model="count"> div> <script src="js/vue.js">script> <script> new Vue({ el:"#app", data(){ return{ username:"", url:"https:\\www.baidu.com", count:3 } } }) script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
v-for:
DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <div id="app"> <div v-for="addr in addrs">{{addr}}div> <div v-for="(addr,i) in addrs">{{i}}--{{addr}}div> div> <script src="js/vue.js">script> <script> new Vue({ el:"#app", data(){ return{ username:"", url:"https:\\www.baidu.com", count:3, addrs:["北京","上海","西安"] } } }) script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
Vue生命周期
生命周期的八个阶段
mounted:挂载完成,Vue初始化完成，HTML页面渲染成功
mounted方法自动执行
mouned(){
}
DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <div id="app"> div> <script src="js/vue.js">script> <script> new Vue({ el:"#app", data(){ return{ } }, mounted(){ alert("挂载成功..") } }) script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
案例：使用Vue简化品牌列表
由于之前采用的是字符串拼接的方式显示数据
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> 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> <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.status}}td> <td><a href="#">修改a> <a href="#">删除a>td> tr> 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) { _this.brands=resp.data; }) } }) script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
新增品牌：
具体实现：
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>添加品牌title> head> <body> <div id="app"> <h3>添加品牌h3> <form action="" method="post"> 品牌名称：<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> <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", data:this.brand }).then(function (resp) { if (resp.data=="success") { //跳转页面 location.href="http://localhost:8080/brand-demo//brand.html"; } }) } } }) script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
-
相关阅读:
Flink CDC 2.2 正式发布，新增四种数据源，支持动态加表，提供增量快照框架
排序算法：非比较排序（计数排序）
Spring Cloud Alibaba Gateway 简单使用
nodejs+Vue+Elementui高校奖学金管理系统express前端项目源码介绍
oracle学习49-监听服务设置开机自启，不用一直配置监听
各种文件对应的文件类型
c语言 2.0
如何做好软件系统的需求调研，七种武器让你轻松搞定
Docker 入门：如何打包、部署并运行你的应用
Hive查询操作详解
- 原文地址：https://blog.csdn.net/qq_57907966/article/details/125880450
