Vue渐进式JavaScript框架

最新推荐文章于 2024-08-15 11:39:27 发布

ps181004

最新推荐文章于 2024-08-15 11:39:27 发布

阅读量895

点赞数

本文链接：https://blog.csdn.net/ps181004/article/details/100014076

版权

一、介绍

渐进式 JavaScript 框架

作用: 动态构建用户界面

特点
遵循 MVVM 模式
编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
它本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目。
基本使用
案例演示：hello Vue

	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> -->
		<script type="text/javascript">
			window.onload=function(){
				//创建vue对象
				new Vue({
					el:'#box',
					data:{
						msg:'Hello Vue'
					}
				});
			}
			
		</script>

理解 Vue 的 MVVM

在这里插入图片描述

二、模板语法

window.onlode 表示在执行完div后再执行语句

	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload=function(){
				new Vue({
					el:'#box',
					data:{
						msg:'Hello Vue',
						num:100,
						mymsg:'<b>加粗文字</b>'
					}
				});
			}
		</script>
	</head>
	<body>
		<div id="box">
			<!-- 模板语法 可以在页面取data 对象中数据 -->
			<h1>{{msg}}<h1>
			<!-- 模板语法 会支持一些 JS 简单的运算符和函数 -->
			<h1>{{msg.length}}<h1>
			<h1>{{msg.toUpperCase()}}<h1>
			<h1>{{num*2}}<h1>
			<h1>{{num==100?'abc':'ccc'}}<h1>
			<!--v-text 取数据  -->
			<h1 v-text="msg"></h1>
			{{mymsg}}
			<span v-text="mymsg"></span>
			<!-- v-html 可以转意 html 标签 -->
			<span v-html="mymsg"></span>
		</div>

模板的理解
动态的 html 页面
包含了一些 JS 语法代码

  双大括号表达式
  指令(以 v-开头的自定义标签属性)

双大括号表示
语法:

{{exp}}

功能: 向页面输出数据
可以调用对象的方法

强制绑定数据

功能: 指定变化的属性值
完整写法:
简洁写法:

v-bind:xxx='yyy'
:xxx='yyy'

绑定时间监听

功能: 绑定指定事件名的回调函数

完整写法:
v-on:keyup='xxx'
v-on:keyup='xxx(参数)'
v-on:keyup.enter='xxx'

简洁写法:
@keyup='xxx'
@keyup.enter='xxx'

四、编码

<div id="app">
<h2>1. 双大括号表达式</h2>
<p>{{msg}}</p>
<p>{{msg.toUpperCase()}}</p>
<h2>2. 指令一: 强制数据绑定</h2>
<a href="url">访问指定站点</a><br><!--不能使用-->
<a v-bind:href="url">访问指定站点 2</a><br>
<a :href="url">访问指定站点 3</a><br>
<h2>3. 指令二: 绑定事件监听</h2>
<button v-on:click="handleClick">点我</button>
<button @click="handleClick">点我 2</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {// data 的所有属性都会成功 vm 对象的属性, 而模板页面中可以直接访问
msg: 'NBA I Love This Game!',
url: 'http://www.baidu.com'
},
methods: {
handleClick () {
alert('处理点击')
}
}
})
</script>

计算属性

在 computed 属性对象中定义计算属性的方法
在页面中使用{{方法名}}来显示计算的结果

computed:{ //计算属性
					//fullname 什么时候调用 第一次初始化的时候调用,
					// fullname 函数中 相关的属性,发送变化时就会调用
						fullname:function(){
						    console.log("fullname 调用了")
	
							return this.xing+" "+this.name;
						}
					}

计算属性高级

通过 getter/setter 实现对属性数据的显示和监视
计算属性存在缓存, 多次读取只执行一次 getter 计算

			computed:{ //计算属性
					 fullname:{
						 get:function () {
							 console.log("get"); 
						 	return this.xing+" "+this.name;
						 },
						 //监听fullname 属性的变化
						 set:function(value){
							 //value 就是fullname 属性的值
							console.log("set fullname 变化了"+value); 
							var text=value.split(' ');
							this.xing=text[0];
							this.name=text[1]; 
						 }
					  }
					}
				});
			}
		</script>
	</head>
	<body>
		<div id="box">
			姓：<input type="text" id="" value="" placeholder="请输入你的姓" v-model="xing"/><br>
			名：<input type="text" id="" value="" placeholder="请输入你的名" v-model="name"/><br>
			全名：<input type="text" id="" value="" placeholder="你的全名"/ v-model="fullname"><br>
			<!-- 全名：<input type="text" id="" value="" placeholder="你的全名"/ v-model="xing.concat(name)"><br> -->
		</div>

六、属性值的变化监听

	watch:{
						xing:function(newValue,oldValue){
							//alert("调用了 新值"+newValue+" 旧值"+oldValue);
						},
						name:function(newValue,oldValue){
							//alert("调用了 新值"+newValue+" 旧值"+oldValue);
						},
						fullname:function(newValue){
							var text=newValue.split(' ');
							this.xing=text[0];
							this.name=text[1];
						}
					}

七、 class属性绑定

方式1、
绑定一个class选择器的名称，注意选择器的名称用单引号引起来

<h1 :class="'bClass'">222222222222</h1>

方式2
绑定多个选择器的名称

<h1 :class="['bClass','aClass']">222222222222</h1>

方式3
绑定的值是一个变量

<h1 :class="myClass">3333333333333333333</h1>

方式4
选择器要不要生效 true 生效，false 不生效

<h1 :class="{'aClass':true,'bClass':false}">5555555555555555555</h1>

八、 style属性绑定

方式1
vue 绑定style属性值要一个json对象
值要使用单引号引起来
css样式名如果有 “-” 连接把"-“去掉，”-"后面的第一个字母变大写

<h1 :style="{color:'red',fontSize:'100px'}">2222222</h1>

方式2
值作为变量

<h1 :style="{color:a,fontSize:b}">2222222</h1>

			<button type="button" @click="change(flag=!flag)">按钮</button>

在上面

methods: {
						change(f) {
							if (f) {
								this.a = 'blue'
								this.b = '50px'
							} else {
								this.a = 'pink'
								this.b = '150px'
							}
						}
					}

九、 if条件指令

<div id="box">
			<h1 v-if="flag">正确</h1>
			
			<h1 v-else>错误</h1>
			<button type="button" @click="change()">切换</button>
		</div>

十、多重条件选择

案例演示：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload = function() {
				new Vue({
					el: '#box',
					data: {
						score: 0
					},
					methods: {
						change() {
							this.flag = !this.flag;
						}
					}
				});
			}
		</script>
	</head>
	<body>
		<div id="box">
			<input type="text" name="" id="" value="" placeholder="请输入你的成绩0---100" v-model="score" />
			<h1 v-if="score>=0&&score<60">
				不及格
			</h1>
			<h1 v-else-if="score>=60&&score<80">
				及格
			</h1>
			<h1 v-else-if="score>=80&&score<90">
				优秀
			</h1>
			<h1 v-else-if="score>=90&&score<100">
				非常优秀
			</h1>
			<h1 v-else-if="score==100">
				满分
			</h1>
			<h1 v-else>
				成绩乱输
			</h1>
		</div>
	</body>
</html>

十一、 for循环指令

1、

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性

2、
遍历JSON对象

<li v-for="(value,key,index)  in myJson" :key="key">
					{{value}}-----{{key}}----{{index}}
				</li>

3、
遍历 JSON数组

<li v-for="(obj,index) in jsonArry" :key="index">
					{{obj.username}}----{{obj.age}}----{{obj.phone}}----{{index}}
				</li>

十二、案例

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			div: {
				font-style: italic;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				new Vue({
					el: '#box',
					data: {
						name: '',
						age: '',
						jsonArray: [],
						delObj(index) {
							this.jsonArray.splice(index, 1)


						}
					},
					methods: {
						addObj() {
							//alert("添加");
							//把输入框中的数据拿出来 ,封装成JSON对象,把这个对象再添加到数组中
							var name = this.name.trim();
							var age = this.age.trim();
							//对表单做非空校验 //自动类型转换  
							if (!name || !age) {
								alert("用户名或年龄不能为空")
								return;
							}

							var json = {
								'name': name,
								'age': age
							};
							//添加到数组里面去
							// unshift()
							// push()
							this.jsonArray.push(json);

							//加完数据后,清空输入框中的就内容
							this.name = '';
							this.age = '';
						},
						//全部删除
						delAll() {
							if (window.confirm("要删除全部数据吗?")) {
								this.jsonArray = [];
							}
						},
						xiugai(index) {
							var namexin = prompt("请输入修改后的文字");
							if (namexin != null && namexin != "") {

								this.jsonArray[index].name = namexin;
								this.jsonArray.reverse().reverse();
								/* document.write(name); */
							}

						},
						xiugaimima(index) {
							var mimaxin = prompt("请输入修改后的文字");
							if (mimaxin != null && mimaxin != "") {

								this.jsonArray[index].age = mimaxin;
								this.jsonArray.reverse().reverse();
							}
						},
						sortObj(num){
								if (num == 1) { //年龄升序
							this.jsonArray.sort(function(a, b) {
								return a.age - b.age;
							});
						} else if (num == 2) { //年龄降序

							this.jsonArray.sort(function(a, b) {
								return b.age - a.age;
							});

						} else { //默认排序

						}
						
						}
					

					},

				});

			}
		</script>

		<!-- 	<script type="text/javascript">
					var name=window.prompt("请输入新的名字");
					document.write(name);
				</script> -->

	</head>
	<body>
		<div id="box">
			<center>
				<h1>添加数据</h1>
				<input type="text" id="" value="" placeholder="请输入姓名" v-model="name" />
				<input type="text" id="" value="" placeholder="请输入年龄" v-model="age" />
				<button type="button" @click="addObj()">添加</button>
				<br>
				<br>
				<br>
				<br>
				<br>
				<table border="1" cellspacing="0" cellpadding="" width="500px">
					<caption>
						<h3>用户信息</h3>
					</caption>
					<tr>
						<th>序号</th>
						<th>姓名</th>
						<th>年龄</th>
						<th>操作</th>
					</tr>

					<tr v-for="(obj,index) in jsonArray" align="center">
						<td>
							{{index}}
						</td>
						<td>
							{{obj.name}}<button @click="xiugai(index)">修改</button>
						</td>
						<td>
							{{obj.age}}<button @click="xiugaimima(index)">修改</button>
						</td>
						<td>
							<button type="button" @click="delObj(index)">删除</button>
						</td>
					</tr>
					<tr>
						<td align="center" colspan="4" v-if="jsonArray.length==0">没有数据</td>
						<td colspan="4" align="center" v-else><button type="button" @click="delAll()">全部删除</button></td>
						<button type="button" @click="sortObj(1)">年龄升序</button>
						<button type="button" @click="sortObj(2)">年龄降序</button>
						<button type="button" @click="sortObj(3)">默认顺序</button>
					</tr>

				</table>
			</center>

		</div>
	</body>
</html>