Vue.js学习笔记

1 Vue.js基础

Vue.js介绍

vuejs 渐进式 JavaScript 框架

Vue.js 如何应用

1 在普通html项目中，引入VUE.JS

Hb 的项目生成的默认是3.X版本

修改为 2.6.10版本

在html head 里引进js文件

	<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>

2 利用vue cli 搭建工程模式

Hello Vue

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- <script src="https://unpkg.com/vue@next"></script> -->
		<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- 插值表达式：通过两个大括号，把变量包起来 -->
			{{showText}}
		</div>
		<script>
			let vm = new Vue({
				el: '#app',  // el = element的缩写 挂载到那个元素上，或者将来渲染到那个区域 id #app css基础选择器 # id . class 
				data:{
					showText : 'Hello Vue'
				}
			});
		</script>
	</body>
</html>

标签绑定_v-bind_单向数据绑定

vue v- 叫做vue的指令

v-bind 可以动态修改HTML标签的属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- <script src="https://unpkg.com/vue@next"></script> -->
		<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#ex1 {
				width: 200px;
				height: 200px;
				background-color: aqua;
			}
			.change {
				background-color: blue !important;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 插值表达式：通过两个大括号，把变量包起来 -->
			{{ showText }}
			
			<!-- v-bind 可以动态修改HTML标签的属性 -->
			<span v-bind:title="showText"> 鼠标放在这里，看看显示什么 </span>
			<div id="ex1" v-bind:class="change">

			</div>
		</div>
		<script>
			let vm = new Vue({
				el: '#app', // el = element的缩写 挂载到那个元素上，或者将来渲染到那个区域 id #app css基础选择器 # id . class 
				data: {
					showText: 'Hello Vue',
					change: 'change'
				}
			});
		</script>
	</body>
</html>

标签绑定_v-model_双向数据绑定（重点）

v-model 是应用在表单元素中的。表单元素 input select

狭义：

它会把表单元素input value值和 data里定义的属性值进行双向绑定。

所谓双向绑定 VM层数据绑定，一句话你变我也变我变你也变。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- <script src="https://unpkg.com/vue@next"></script> -->
		<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#ex1 {
				width: 200px;
				height: 200px;
				background-color: aqua;
			}

			.change {
				background-color: blue !important;
			}
		</style>
	</head>
	<body>
		<!-- vue 的双向绑定   MVC MV VM  是 vm的绑定 -->
		
		<div id="app">
			<!-- html渲染的内容 view -->
			<input type="text" name="" id="" v-model="input" value="" />
			<br>
			{{input}}
		</div>
		<script>
			let vm = new Vue({
				el: '#app', 
				data: {   // model 数据
					showText: 'Hello Vue',
					change: 'change',
					input: ''
				}
			});
		</script>
	</body>
</html>

标签绑定_v-on_事件绑定（重点）

js 事件：developer.mozilla.org/zh-CN/docs/…

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- <script src="https://unpkg.com/vue@next"></script> -->
		<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">

		</style>
	</head>
	<body>

		<div id="app">
			<button type="button" @click="tishi(1)">提交</button>
			<div v-on:dblclick="tishi2">
				考虑到房价肯定撒就发撒旦
			</div>
			<input type="text" id="" @focus="tishi3('你好','新世界')" value="" />
		</div>
		<script>
			
			let vm = new Vue({
				el: '#app',
				data: { // model 数据
					showText: 'Hello Vue',
					change: 'change',
					input: '',
					num: 5
				},
				methods: { 
				//方法
				// 属性中,方法如何声明. k v  方法和方法之间,要用逗号分割.
				// 在传统js中,我们用onclick来触发单击事件,在vue中,我们要用v-on 这个v指令来触发事件
				// 语法糖 缩写 v-on 用 @ 字符来替代 v-on:
				// 语法糖 缩写 v-bind: 直接用 : 来替代
					tishi:function (arg) {
						alert(arg)
					},
					tishi2:function () {
						alert('另一个双击我的按钮')
					},
					tishi3:function (arg1,arg2) {
						alert(arg1)
						alert(arg2)
					}
					
				}
			});
		</script>
	</body>
</html>

标签绑定_v-text_v-html_v-show

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- <script src="https://unpkg.com/vue@next"></script> -->
		<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">

		</style>
	</head>
	<body>

		<div id="app">
			<!-- div.innerText
			v-text:innerText 显示文本,你有什么,我原样输出
			v-html:innerHtml 显示并渲染html标签
			 v-show: 原理:他接受一个值,这个值一定是真或假的布尔值.当时真的时候,就会显示. 当是假的时候,它会给该元素追加style display none
			 -->
			<span v-text="html" v-show="2>1"></span>
			<!-- 和下面的一样 -->
			<br>
			{{ showText }}


			<button type="button" @click="changeShow">改变显示</button>
		</div>
		
		
		<div id="app2">
			{{ showText }}
		</div>


		<script>
			let vm = new Vue({
				el: '#app',
				data: { // model 数据
					showText: 'Hello Vue',
					change: 'change',
					input: '',
					num: 5,
					msg: '唐山港集团',
					html: '<h1>唐山港集团</h1>', //innerHtml
					isShow: true
				},
				methods: {
					/**
					 * 动态改变data中isShow的值 每次反转
					 */
					changeShow: function() {

						// 单击一次,取反,当它是ture的时候,变成false;当它是false,变成true
						this.isShow = !this.isShow
					}
				}
			});


		</script>
	</body>
</html>

标签绑定_v-if-else（重点）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- <script src="https://unpkg.com/vue@next"></script> -->
		<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">

		</style>
	</head>
	<body>

		<div id="app">
			<!-- 
				v-if指令: 根据v-if里面的布尔值,来决定是否在html里,渲染此DOM对象,它和vshow的区别在于,它是真正的不渲染,不占位.
				v-else指令:用法,1是,前面的dom对象中必须有 v-if  v-else 直接写,不用再=什么
				
				v-else-if,他们的结构同下面,理解.
				
				if () {
					显示A
				}else if(){
					显示B
				}else if(){
					显示C
				}else{
					不是ABC
				}
				
				v-show:
			 -->
			<!-- <table border="" cellspacing="" cellpadding="" v-if="havedata">
				<tr><th>序号</th><th>姓名</th><th>电话</th></tr>
				<tr><td>1</td><td>沈国福</td><td>15031519880</td></tr>
				<tr><td>2</td><td>田华</td><td>15331519880</td></tr>
			</table>
			
			<span v-else>没有更多记录了</span>
			 -->

			<div v-if="type === 'A'">
				A
			</div>
			<div v-else-if="type === 'B'">
				B
			</div>
			<div v-else-if="type === 'C'">
				C
			</div>
			<div v-else>
			 Not A/B/C
			</div>


			<br>
			<br>
			<button type="button" @click="changeA">改成A</button>
			<button type="button" @click="changeB">改成B</button>
			<button type="button" @click="changeC">改成C</button>
			<button type="button" @click="changeD">改成D</button>
		</div>




		<script>
			let vm = new Vue({
				el: '#app',
				data: { // model 数据
					showText: 'Hello Vue',
					change: 'change',
					input: '',
					num: 5,
					msg: '唐山港集团',
					html: '<h1>唐山港集团</h1>', //innerHtml
					havedata: true,
					type: 'A'
				},
				methods: {
					/**
					 * 动态改变data中isShow的值 每次反转
					 */
					changeA: function() {
						this.type = 'A'
					},
					changeB: function() {
						this.type = 'B'
					},
					changeC: function() {
						this.type = 'C'
					},
					changeD: function() {
						this.type = 'D'
						
						
					},
					
					
				}
			});
		</script>
	</body>
</html>

一些问题

MD文件如何查看，编辑？
Vue data里能否使用变量赋值？

Vue data是一个对象，看API可以用方法，能否使用方法？

// 1 用对象的方式，来构建data
// data:{
// 	message : '唐山港集团欢迎您！'
// },
// 2 以方法的方式，来构建data,return 一个值 值是一个对象。
// data(){
// 	return {
// 		message: '唐山港集团欢迎您2!'
// 	}
// }
// 3 以匿名函数的方式来构建data
// data:function () {
// 	return {
// 		message: '唐山港集团欢迎您3!'
// 	}
// }

$data是什么？

$data:是普通js变量

vm.$data.message = vm.message
axios离线引进

标签绑定_v-for (重点)

js for 循环遍历

fori forli forof

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>V-FOR</title>
		<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!--对数组循环输出 -->
			<ul>
				<li v-for="(item,index) in deptList" :key="index">
					{{index+1}}-{{item}}
				</li>
			</ul>
			<!-- 对对象进行遍历输出 -->

			<ul>
				<li v-for="(item,key,index) in zhangsan">
					{{index+1}}--{{key}}--{{item}}
				</li>
			</ul>

			<!-- 对数字进行循环输出 -->
			<div style="width: 330px;height: 330px;background-color: #1CBBB4; display: flex; flex-wrap: wrap;">
				<div style="width: 100px; height: 100px;margin: 5px; background-color: #E03997; text-align: center;line-height: 100px;"
					v-for="i in 9">{{i}}

				</div>
			</div>
			
			<!-- 对数组对象进行输出 -->
			
			<ul>
				<li v-for="item in result" :key="item.userId">
					userId:{{item.useId}} <br>
					姓名:{{item.userName}}<br>
					电话:{{item.tel}}
				</li>
			</ul>

		</div>


		<script type="text/javascript">
			let vm = new Vue({
				el: '#app',
				data: {
					message: '唐山港集团欢迎您！',
					deptList: [
						'综合管控部',
						'商务软件科',
						'安质管控部',
						'生产软件科'
					],
					zhangsan: {
						name: '张三',
						sex: 0, // 0表示男 1表示女
						age: 16
					},
					result: [{
						"Id": 192,
						"userName": "1",
						"tel": "1"
					}, {
						"Id": 191,
						"userName": "",
						"tel": ""
					}, {
						"Id": 182,
						"userName": "宋运城",
						"tel": "654321"
					}, {
						"Id": 180,
						"userName": "",
						"tel": "冀B9235K"
					}, {
						"Id": 179,
						"userName": null,
						"tel": "冀B9235K"
					}, {
						"Id": 178,
						"userName": null,
						"tel": "冀B9235K"
					}, {
						"Id": 176,
						"userName": null,
						"tel": "Tsp2022$$$"
					}, {
						"Id": 175,
						"userName": null,
						"tel": "宋运城"
					}, {
						"Id": 168,
						"userName": null,
						"tel": "宋运城"
					}, {
						"Id": 167,
						"userName": null,
						"tel": "564615"
					}, {
						"Id": 160,
						"userName": "测试111",
						"tel": "123"
					}, {
						"Id": 159,
						"userName": "测试111",
						"tel": "123"
					}, {
						"Id": 158,
						"userName": "测试111",
						"tel": "123"
					}, {
						"Id": 157,
						"userName": "苏锦沅",
						"tel": "9999999"
					}, {
						"Id": 156,
						"userName": "sdf",
						"tel": "45892361245"
					}, {
						"Id": 155,
						"userName": "tre",
						"tel": "18596756542"
					}, {
						"Id": 154,
						"userName": "sxt",
						"tel": "15686425946"
					}, {
						"Id": 152,
						"userName": "马可波罗",
						"tel": "15234567891"
					}, {
						"Id": 150,
						"userName": "呜呜呜呜",
						"tel": "12345"
					}, {
						"Id": 145,
						"userName": "111",
						"tel": "11111111111"
					}, {
						"Id": 144,
						"userName": "111",
						"tel": "333"
					}, {
						"Id": 121,
						"userName": "userName",
						"tel": "tel"
					}, {
						"Id": 120,
						"userName": "田华12345",
						"tel": "394838773"
					}, {
						"Id": 118,
						"userName": "jg",
						"tel": "12332155"
					}, {
						"Id": 117,
						"userName": "jg",
						"tel": "12332155"
					}, {
						"Id": 113,
						"userName": "jgtianhua",
						"tel": "123321"
					}, {
						"Id": 112,
						"userName": "false",
						"tel": "false"
					}, {
						"Id": 109,
						"userName": "tianhua",
						"tel": "1234567904"
					}, {
						"Id": 106,
						"userName": "这个我来",
						"tel": "1852465852"
					}, {
						"Id": 102,
						"userName": "0000",
						"tel": "0000"
					}, {
						"Id": 100,
						"userName": "张三",
						"tel": "0000"
					}, {
						"Id": 99,
						"userName": "张三",
						"tel": "0000"
					}, {
						"Id": 97,
						"userName": "11111",
						"tel": "11111"
					}, {
						"Id": 96,
						"userName": "12",
						"tel": "121212"
					}, {
						"Id": 95,
						"userName": "1111",
						"tel": "1111"
					}, {
						"Id": 94,
						"userName": "菜鸟",
						"tel": "18858858"
					}, {
						"Id": 84,
						"userName": "测试",
						"tel": "123333"
					}, {
						"Id": 83,
						"userName": "测试的",
						"tel": "1234567889"
					}, {
						"Id": 78,
						"userName": "mlmm",
						"tel": "4234234"
					}, {
						"Id": 68,
						"userName": "冯·诺伊曼",
						"tel": "321"
					}, {
						"Id": 63,
						"userName": "韩信",
						"tel": "15234516781"
					}, {
						"Id": 62,
						"userName": "西施",
						"tel": "12315617890"
					}, {
						"Id": 61,
						"userName": "貂蝉",
						"tel": "12345678901"
					}, {
						"Id": 58,
						"userName": "孙尚香",
						"tel": "12345678890"
					}, {
						"Id": 57,
						"userName": "杨玉环",
						"tel": "12345678901"
					}, {
						"Id": 56,
						"userName": "蔡文姬",
						"tel": "12345678902"
					}, {
						"Id": 55,
						"userName": "李白",
						"tel": "12345678901"
					}, {
						"Id": 51,
						"userName": "刘备",
						"tel": "15013578231"
					}, {
						"Id": 34,
						"userName": "修改结果",
						"tel": "1665656565"
					}]
				},

			})
		</script>
	</body>
</html>

标签绑定_v-once 一次

指令汇总

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dBEQHBXF-1649923881720)(Vue.js培训笔记.assets/d39d348e686b449e8931f5a85802e3c6tplv-k3u1fbpfcp-zoom-in-crop-mark1304000.webp)]

网络通讯(第三方模块)_Axios_ajax（重点）

axios文档: www.axios-js.com/zh-cn/docs/

CURD案例

CURD create update read delete

95% 代码都是处理CURD

curd首页
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CURD</title>
		<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/axios.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.title {
				width: 800px;
				margin: 0 auto;
				text-align: center;
			}

			.content {
				width: 800px;
				margin: 0 auto;

			}

			.btns {
				margin: 5px 0 5px;
			}

			button {
				width: 120px;
				height: 40px;
			}

			.small {
				width: 80px;
				height: 30px;
			}

			table {
				border-collapse: collapse;
				width: 100%;
			}

			table th,
			table td {
				border: 1px solid #7e7e7e;
				height: 40px;
				line-height: 40px;
				text-align: center;
			}
		</style>
	</head>
	
	<body>
		<div id="app">
			<div class="title">
				<h1>{{title}}</h1>
			</div>
			<div class="content">
				<div id="">
					姓名:<input type="text" v-model="userName" /> <button type="button" @click="getUsersList" >查询</button>
					<button type="button" @click="reset" >重置</button>
				</div>
				<div class="btns">
					<button type="button" @click="goAdd">添加</button>
				</div>
				<table>
					<tr>
						<th width="30px">Id</th>
						<th width="120px">姓名</th>
						<th width="120px">电话</th>
						<th width="120px">操作</th>
					</tr>
					<tr v-for="item in usersList" :key="item.userId">
						<td>{{item.Id}}</td>
						<td>{{item.userName}}</td>
						<td>{{item.tel}}</td>
						<td>
							<button type="button" class="small" style="margin-right: 30px;"
								@click="goEdit(item.Id)">修改</button>
							<button type="button" class="small" @click="delUser(item.Id)">删除</button>
						</td>
					</tr>
				</table>
				
				<div v-if="this.usersList.length == 0">
					当前没有记录
				</div>
			</div>
		</div>


		<script type="text/javascript">
			let vm = new Vue({
				el: '#app',
				data: {
					title: '员工管理',
					usersList: [],
					userName:''
				},
				mounted() {
					this.getUsersList()
				},
				methods: {
					// axios 的回调函数,不要用普通的匿名函数,用箭头函数.否则this的指向不对.
					getUsersList() {
						axios({
							url: 'http://api.0315e.com/index/users',
							params:{
								userName:this.userName
							}
						}).then((res) => {
							this.usersList = res.data.result
						})
					},
					delUser(Id) {
						let ok = confirm('是否删除Id为' + Id + '的记录?')
						console.log(ok);
						if (ok == true) {
							axios({
								url: 'http://api.0315e.com/index/users',
								method: 'DELETE',
								data: {
									// userId:userId 如果键值一致,可以省略后面的:userId
									Id: Id
								}
							}).then((res) => {
								alert(res.data.msg)
								this.getUsersList()
							})
						} else {
							console.log('用户取消了操作');
						}
					},
					goEdit(Id) {
						axios({
							url: 'http://api.0315e.com/index/users',
							method: 'PUT',
							data: {
								// userId:userId 如果键值一致,可以省略后面的:userId
								Id: Id,
								userName:'王大锤',
								tel:'110'
							}
						}).then((res) => {
							alert(res.data.msg)
							this.getUsersList()
						})
					},
					goAdd() {
						window.location.href = 'add.html'
					},
					reset(){
						this.userName = ''
						this.getUsersList()
					}
					


				}
			})
		</script>
	</body>
</html>

add页
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>添加员工</title>
		<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/axios.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.title {
				width: 800px;
				margin: 0 auto;
				text-align: center;
			}

			.content {
				width: 800px;
				margin: 0 auto;

			}

			
		</style>
	</head>
	<body>
		<div id="app">
			<div class="title">
				<h1>{{title}}</h1>
			</div>
			<div class="content">
				姓名:<input type="text" v-model="userName" /><br>
				电话:<input type="number" v-model="tel" /><br>
				
				<button type="button" @click="addUser()" >提交</button>
				
			</div>
		</div>


		<script type="text/javascript">
			let vm = new Vue({
				el: '#app',
				data: {
					title: '添加员工',
					userName:'',
					tel:''
					
				},
				mounted() {
					
				},
				methods: {
					addUser(){
						if (this.userName == '') {
							alert('请录入姓名')
						}
						if (this.tel == '') {
							alert('请录入电话')
						}
						axios({
							url: 'http://api.0315e.com/index/users',
							method:'POST',
							data:{
								userName:this.userName,
								tel:this.tel
							}
						}).then((res) => {
							console.log(res);
							alert(res.data.msg)
						})
						
					}
				}
			})
		</script>
	</body>
</html>

edit 没写完
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>编辑员工</title>
		<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/axios.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.title {
				width: 800px;
				margin: 0 auto;
				text-align: center;
			}

			.content {
				width: 800px;
				margin: 0 auto;

			}

			
		</style>
	</head>
	<body>
		<div id="app">
			<div class="title">
				<h1>{{title}}</h1>
			</div>
			<div class="content">
				姓名:<input type="text" v-model="userName" /><br>
				电话:<input type="number" v-model="tel" /><br>
				
				<button type="button" @click="addUser()" >提交</button>
				
			</div>
		</div>


		<script type="text/javascript">
			let vm = new Vue({
				el: '#app',
				data: {
					title: '添加员工',
					userName:'',
					tel:''
					
				},
				mounted() {
					
				},
				methods: {
					addUser(){
						if (this.userName == '') {
							alert('请录入姓名')
						}
						if (this.tel == '') {
							alert('请录入电话')
						}
						axios({
							url: 'http://api.0315e.com/index/users',
							method:'POST',
							data:{
								userName:this.userName,
								tel:this.tel
							}
						}).then((res) => {
							console.log(res);
							alert(res.data.msg)
						})
					}
				}
			})
		</script>
	</body>
</html>

一些概念解释

回调函数函数一种形式

简单点说，一个函数被作为参数传递给另一个函数（在这里我们把另一个函数叫做“otherFunction”），回调函数在otherFunction中被调用。

getUserList(){
    axios({
        url:"http://api.0315e.com/tsg/projects",
        params:{
            projectName:this.projectName
        }
    }).then((res) => {
        this.projects = res.data.result;
    })
},
    (res) => {
        this.projects = res.data.result;
    }

    // 父级函数
    function parentFun (callback) {
        let user = {
            name:'张三'
        }
        callback(user) // 回调函数
    }
// 子级函数
function childFun (data) {
    alert(data.name)
}

parentFun(childFun);

用途：我们需要等到一个操作结束之后再进行下一个操作。简单理解的话就是在一个函数执行完毕后，得到想要的特定数据后在去执行的函数

this

this js都关键字代表一个对象

全局

函数

方法

匿名函数

箭头函数

var name = "冯锐";
//全局 this 指向是window对象  最高级别的对象
// console.log(this);

// 函数中,this调用的是window对象
function fun() {
    console.log(this);
}
// fun()

// 在方法中,方法是定义在对象里面的函数 
// 方法  
// 匿名函数 this指向是当前对象
// 箭头函数 this 指向上下文中,谁调用ta 指向谁


let me = {
    name: '沈国福',
    sayHi: function() {
        console.log(this.name + '说 Hi');
    },
    sayHello: () => {
        console.log(this.name + '说 Hello');
    }
}

me.sayHi()
me.sayHello()

内置对象

内置对象 BOM DOM

www.runoob.com/jsref/obj-w…

事件对象

事件对象 $event

操作DOM ref

textarea 的双向数据绑定

我们之前讲过 input 的双向数据绑定

textarea 也可以进行双向数据绑定

checkbox 的双向数据绑定

checkbox 也可以双向数据绑定, 不过绑定的值, 最好是布尔值

如果是多个 checkbox, 建议把变量做成数组, 同时一定要有 value 属性和它的值

选中状态:

		<div id="app">

			我的兴趣爱好:
			<br>
			<input type="checkbox" name="fav" v-model="checkboxValue" value="1" /> 看书
			<input type="checkbox" name="fav" v-model="checkboxValue" value="2" /> 抽烟
			<input type="checkbox" name="fav" v-model="checkboxValue" value="3" /> 喝酒
			<input type="checkbox" name="fav" v-model="checkboxValue" value="4" /> 烫头
			<button type="button" @click="submit">提交</button>

		</div>

		<hr>


		<script>
			let vm = new Vue({
				el: '#app',
				// vd
				data() {
					return {
						checkboxValue: [],
					}
				},
				mounted() {
					this.getCheck()
				},
				// vm
				methods: {
					getCheck() {
						this.checkboxValue = ["2", "3"]
					},
					submit() {
						console.log(this.checkboxValue);
					}
				},

			});
		</script>

radio 的双向数据绑定

单选框也可以做双向数据绑定, 绑定的变量给一个空字符串即可

<div id="app">
			<!-- 复选框 -->
			我的兴趣爱好:
			<br>
			<input type="checkbox" name="fav" v-model="checkboxValue" value="1" /> 看书
			<input type="checkbox" name="fav" v-model="checkboxValue" value="2" /> 抽烟
			<input type="checkbox" name="fav" v-model="checkboxValue" value="3" /> 喝酒
			<input type="checkbox" name="fav" v-model="checkboxValue" value="4" /> 烫头
			<button type="button" @click="submit">提交</button>
			
			<hr>
			<!-- 单选 -->
			<h1>性别1: {{radioValue}}</h1>
			
			男:<input v-model="radioValue" type="radio" name="sex" value="男" /> 
			女:<input v-model="radioValue" type="radio"	name="sex" value="女" />
			待定:<input v-model="radioValue" type="radio" name="sex" value="待定" />
		</div>

		<script>
			let vm = new Vue({
				el: '#app',
				// vd
				data() {
					return {
						textarea: "",
						checkboxValue: [],
						radioValue: ''
					}
				},

				// vm
				methods: {
					submit() {
						console.log(this.radioValue);
					}
				},

			});
		</script>

下拉框的双向数据绑定

下拉框也可以进行双向数据绑定,变量可以给一个空字符串

如果牵涉到默认选中状态, 可以修改 selectValue 的值

如果想把第一项变成提示信息, 可以这么写

<select v-model="selectValue">
    <option value="" disabled>请选择你的城市</option>
    <option value="北京">北京</option>
    <option value="上海">上海</option>
    <option value="广州">广州</option>
    <option value="深圳">深圳</option>
</select>

如果 option 的数据不是写死的, 而是从后台传过来的, 我们可以在变量中定义 option 的值

<!DOCTYPE html>

	<body>
		<div id="root">
			<h1>城市: {{selectValue}}</h1>
			<select v-model="selectValue">
				<option value="" disabled>请选择你的城市</option>
				<option v-for="item in ajaxValue" :value="item.value">{{item.text}}</option>
			</select>
		</div>
	</body>

</html>

CURD案例（优化）

1 优化项目简介改单击查看按钮弹出对话框通过传递数组下标[索引] 来获取数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- <script src="https://unpkg.com/vue@next"></script> -->
		<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/axios.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<style type="text/css">
			html,
			body,
			#app {
				height: 100%;
			}

			.mask {
				display: flex;
				flex-direction: column;
				justify-content: center;
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, .7);
				z-index: 999;
			}

			.mask .intro {
				width: 500px;
				height: 250px;
				background-color: #FFFFFF;
				padding: 10px;
			}

			.mask .header {
				text-align: center;
			}

			.mask .header span {
				float: right;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h1>{{title}}</h1>
			<hr>
			<div class="query">
				项目名称：<input type="text" v-model="projectName" />
				<button class="btn" type="button" @click="getUserList()">查询</button>
				<button class="btn" type="button" @click="clearAll()">重置</button>
				<button class="btn green" type="button" @click="goAdd()">增加</button>
			</div>
			<div class="tb">
				<table>
					<tr>
						<th style="width: 50px;">项目ID</th>
						<th style="width: 80px;">项目名称</th>
						<th style="width: 50px;">项目经理</th>
						<th style="width: 50px;">建设年份</th>
						<th style="width: 50px;">建设方式</th>
						<th style="width: 50px;">使用单位</th>
						<th style="width: 50px;">开发商</th>
						<th style="width: 200px;">项目简介</th>
						<th style="width: 80px;">操作</th>
					</tr>
					<tr v-for="item,index in projects" :key="item.projectId">
						<td class="mid">{{item.projectId}}</td>
						<td>{{item.projectName}}</td>
						<td>{{item.projectManager}}</td>
						<td>{{item.projectYear}}</td>
						<td>{{item.projectMode}}</td>
						<td>{{item.projectUser}}</td>
						<td>{{item.projectDevelopers}}</td>
						<td><button class="btn" type="button" @click="showIntro(index)">查看</button></td>
						<td class="mid">
							<button class="btn" type="button" @click="goEdit(item.projectId)">修改</button>
							<button class="btn red" type="button" @click="delUser(item.projectId)">删除</button>
						</td>
					</tr>

				</table>
				<div v-if="projects.length == 0" class="tishi">
					未找到任何记录！
				</div>
			</div>
			<!-- 模态框的动态切换 用v-show  -->
			<div class="mask" v-show="isIntroShow" @click="hiddenIntro">
				<div class="intro">
					<div class="header">
						{{ maskProjectName }}-简介
						<span @click="hiddenIntro">
							❌
						</span>
					</div>
					<hr>
					<div class="content">
						{{ maskProjectIntro }}
					</div>

				</div>
			</div>
		</div>
		<script>
			let vm = new Vue({
				el: "#app",
				data: {
					title: '项 目 台 账',
					projectName: '',
					projects: [],
					isIntroShow: false,
					maskProjectName:'',
					maskProjectIntro:''
				},
				mounted() {
					this.getUserList();
				},
				methods: {
					/**
					 * 弹出介绍模态框
					 */
					showIntro(index) {
						this.isIntroShow = true
						console.log(index);
						this.maskProjectName = this.projects[index].projectName
						this.maskProjectIntro = this.projects[index].projectIntro
					},
					/**
					 * 隐藏介绍模态框
					 */
					hiddenIntro() {
						this.isIntroShow = false
					},
					getUserList() {
						axios({
							url: "http://api.0315e.com/tsg/projects",
							params: {
								projectName: this.projectName
							}
						}).then((res) => {
							this.projects = res.data.result;
						})
					},
					clearAll() {
						this.projectName = null;
						this.getUserList();
					},
					goAdd() {
						window.location.href = "addUser.html";
					},
					goEdit(projectId) {
						window.location.href = "editUser.html?" + projectId;
					},
					delUser(projectId) {
						let ok = confirm("确定要删除ID为" + projectId + "的项目吗？");
						if (ok == true) {
							axios({
								url: "http://api.0315e.com/tsg/projects",
								method: "DELETE",
								data: {
									projectId
								}
							}).then((res) => {
								alert(res.data.msg);
								if (res.data.code == 200) {
									this.getUserList();
								}
							})
						}
					}
				}
			});
		</script>
	</body>
</html>

2 添加项目总数的显示

<h2>当前项目总数:{{ projects.length}}</h2>

3 新增和修改合并为单页面

4 新建和修改部分字段采用select 和 radio双向绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- <script src="https://unpkg.com/vue@next"></script> -->
		<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/axios.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/add.css" />

	</head>
	<body>
		<div id="app">
			<h1>{{title}}</h1>
			<hr>
			<div class="new">
				项目名称：<input type="text" v-model="projectName" /><br>
				项目经理：
				<select v-model="projectManager">
					<option value ="" disabled="true">---请选择---</option>
					<option :value="item.managerId" v-for="(item,index) in projectManagers">{{ item.managerName }}</option>
				</select>
				
				<br>
				建设年份：<input type="text" v-model="projectYear" /><br>
				<span style="float: left; padding-left: 57px;">
					建设方式：
				</span>
				<span v-for="(item,index) in projectModes">
					<input type="radio" name="projectModes" v-model="projectMode" :value="item.typeId"  /> {{item.typeName}}
				</span>
				
				<br>
				使用单位：<input type="text" v-model="projectUser" /><br>
				开&nbsp;&nbsp;发&nbsp;&nbsp;商：<input type="text" v-model="projectDevelopers" /><br>
				项目简介：<textarea v-model="projectIntro"></textarea><br>
				<button class="btn" type="button" @click="addUser()">确定</button>
				<button class="btn" type="button" @click="clearAll()">重置</button>
				<button class="btn" type="button" @click="goIndex()">返回</button>
			</div>

		</div>
		<script>
			let vm = new Vue({
				el: "#app",
				data: {
					title: '新 增 项 目',
					projectName: '',
					projectManager: '',
					projectYear: '',
					projectMode: '',
					projectUser: '',
					projectDevelopers: '',
					projectIntro: '',
					projectManagers:[],
					projectModes:[]
				},
				mounted() {
					this.getManagers()
					this.getType()
				},
				methods: {
					/**
					 * 获取项目经理列表
					 */
					getManagers(){
						axios({
							url:'./data/managers.json'
						}).then((res) => {
							console.log(res.data.result);
							this.projectManagers = res.data.result
						})
					},
					/**
					 * 获取项目建设类型列表
					 */
					getType(){
						axios({
							url:'./data/projecttype.json'
						}).then((res) => {
							console.log(res.data.result);
							this.projectModes = res.data.result
						})
					},
					addUser() {
						axios({
							url: "http://api.0315e.com/tsg/projects",
							method: "POST",
							data: {
								projectName: this.projectName,
								projectManager: this.projectManager,
								projectYear: this.projectYear,
								projectMode: this.projectMode,
								projectUser: this.projectUser,
								projectDevelopers: this.projectDevelopers,
								projectIntro: this.projectIntro
							}
						}).then((res) => {
							alert(res.data.msg);
							this.goIndex();
						})
					},
					clearAll() {
						this.projectName = null;
						this.projectManager = null;
						this.projectYear = null;
						this.projectMode = null;
						this.projectUser = null;
						this.projectDevelopers = null;
						this.projectIntro = null;

					},
					goIndex() {
						window.location.href = "index.html";
					}
				}
			});
		</script>
	</body>
</html>

5 按id 姓名排序

6 过滤显示

4/41作业要求

1 做项目简介的按钮项目总数的展示

2 将新建和修改页面中的部分字段采用select 和 radio展示

3 开发方式和开发商联动 1 当开发方式是自研开发商只能有科技公司,; 2 当外委模式,没有科技公司

select onchange事件-> 当值==自研开发商列表数组,要去掉其他三个

华东电子
济南洋溢
唐山连拖
科技公司

修饰符

1 事件修饰符

v-on

.stop

.prevent

.capture

.self

.once

.passive

2 表单元素修饰符

v-model

3 按键修饰符

比如我们想要在 input 中输入值以后, 按回车触发对应事件, 可以使用@keydown.enter="函数名", 同理, 也可以监听tab, delete, esc, up, down, left, right

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i7cOElsi-1649923881722)(Vue.js培训笔记.assets/5a1c911988f74cea91da79af3c6049c2tplv-k3u1fbpfcp-zoom-in-crop-mark1304000.webp)]

过滤器_filter

样式处理-class和style

动态class对象：<div :class="{ 'is-active': true, 'red': isRed }"></div>

动态class数组：<div :class="['is-active', isRed ? 'red' : '' ]"></div>

动态style对象：<div :style="{ color: textColor, fontSize: '18px' }"></div>

动态style数组：<div :style="[{ color: textColor, fontSize: '18px' }, { fontWeight: '300' }]"></div>

处理高亮

<div class="listCss" v-for="(item,index) in listArr" :key="index" 
@click="activeVar=index" :class="{'activeCss':activeVar==index}">{{item}}</div>

2 Vue.js进阶

生命周期_钩子函数（重点）

在某一时刻, 自动执行的函数

v3.cn.vuejs.org/api/options…

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PhoLAkBs-1649923881723)(Vue.js培训笔记.assets/892fde0e56324868921d0e924c84858atplv-k3u1fbpfcp-zoom-in-crop-mark1304000.webp)]

Vue.js 基础（一）