Vue教程——[11]

哲寻

已于 2024-07-18 16:20:26 修改

阅读量894

点赞数 13

文章标签： vue.js 前端 javascript

于 2024-07-18 16:14:27 首次发布

本文链接：https://blog.csdn.net/liuyishou0824/article/details/140525570

版权

javascript脚本语言

jQuery是js库（脚本的框架）,layui是一个UI框架

vue.js脚本库==ElemnetUI框架。

1、简介

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。

渐进式：从容易到复杂，循序渐进。

Vue的学习门槛：html、css、javascript。

vue官网：https://cn.vuejs.org/

菜鸟教程：https://www.runoob.com/vue2/vue-tutorial.html

2、插值表达式

{{ message }} 插值表达式

表达式：里面支持常量，支持逻辑运算，支持三目运算等等。

{{ 10 }}
{{ "李四"}}
{{ 10>5 }}
{{5>3&& 4>1}}

普通变量解析：

{{message}}

对象解析

{{user.userName}}

对象数组解析

{{ students[0].stuId }}

3、V-指令

V-指令与插值表达式的区别：

相同点：都可以进行数据的渲染

不同点：插值表达式，不依赖外层的dom节点，不能对html标签进行解析执行。V-指令必须依赖一个dom节点。

3.1 v-html

v-html="title"   对html标签进行解析

3.2 v-text

v-text="title" 纯文本

3.3 v-bind

v-bind一般作用于html的标签属性前，v-bind后面是冒号。在一些属性中需要读取定义的变量值，把变量放入到值的双引号中后，属性前面要给加v-bind:指令

<div  v-bind:class="isShow ? 'bg1':'bg2'">
    我是内容
</div>
<a v-bind:href="urlPath">百度</a>

v-bind 简写 " : "

3.4 v-if

v-if 可以控制整个节点是否要加入到dom之中去。如果为true，就加入。否则，就不加入

v-else v-if条件满足后，就不会执行v-else。if与else只能存在一个。

多重选择结构的使用

<div id="app">
    <div v-if="number>=90">
        优秀
    </div>
    <div v-else-if="number>=70">
        良好
    </div>
    <div v-else-if="number>=60">
        及格
    </div>
    <div v-else="number<60">
        差
    </div>
</div>

3.5 v-for

v-for=“item in students”，可以循环操作一些数组，集合。

<tr v-for="(stu,index) in students"  :key="stu.stuId">
    <td>{{index+1}}.{{stu.stuId}}</td>
    <td>{{index+1}}.{{stu.stuName}}</td>
    <td>{{index+1}}.{{stu.stuAge}}</td>
</tr>

3.6 v-show

v-show控制的是节点在dom中的显示与否。已经加入到dom之中了。

3.7 v-model

v-model就是双向数据绑定

<input type="text" v-model="message" /><br/>

4、事件处理

vue中的事件

<!--单击事件-->
<button v-on:click="show">点击</button>  
<!--鼠标滑过-->
<button v-on:mouseover="show()">点击</button>

new Vue({
    el:"#app",
    data:{
        message:"hello,vue"
    }
    },
    methods:{
        show:function(){
            alert(123)
        }	
    }
});

如果函数上没有传入实际参数，而在函数的定义处加入一个参数的话，这个参数就代表的是触发该事件的事件监听。

<button v-on:mouseover="show($event)">点击</button>

methods:{
    show:function(event){
        alert(event.target.tagName)
        this.message="无需命运垂青，努力可以翻盘！";
    }	
}
this关键字就代表的是当前的Vue对象

v-on:keyup.enter=“add()” 键盘敲回车事件

全部的按键别名：
.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

简写：v-on:click 可以简写为@click

操作变量：

<div id="app">
    {{ number }}
    <button @click="number+=1">点击</button>
</div>

5、综合小案例

记事本1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app" style="width: 500px; border: 1px solid #ff0000; margin: 0 auto;">
			<h1>我的记事本</h1>
			<input type="text" v-model="info"/><input @click="add()"  type="button" value="添加"/><br/>
			<ul>
				<li v-for="(arr,index) in msg" :key="index">
					{{index+1}}.{{arr}} <span @click="del(index)">删除</span>
				</li>
			</ul>
			<div v-if="msg.length>0">
				<span>共有{{msg.length}}条数据</span>
			</div>
			
		</div>
	</body>
	<script src="./js/vue.js"></script>
	<script type="text/javascript">
		new Vue({
			el:"#app",
			data:{
				msg:[] ,//数组
			    info:""
			}, 
			methods:{
				add(){
					if(this.info.length>0){
						this.msg.push(this.info)  //往数组中追加元素
						this.info=""
					}
				
				},
				del(index){
					this.msg.splice(index,1)  //从数组中移除指定索引值的元素，1代表删除1条数据
				}
			}
		})
	</script>
</html>

6、计算属性

1、表达式模板语法复杂

不容易看懂，不利于维护。

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

<div id="app">
      {{ message.split('').reverse().join('') }}
</div>
<!--改完后：-->
<div id="app">
  {{ setMsg }}
</div>

改写为计算属性完成：

computed:{
    setMsg:function(){
        return this.msg.split('').reverse().join('');
    }
}

2、计算属性VS方法

计算属性会根据基于它们的响应式依赖进行缓存的，当要获取数据时，只要它所依赖的基础数据没有发生改变，就不会重新进行计算，会立刻把结果返回。

方法，调用一次，重新计算一次。

示例1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<form>
				java成绩：<input type="text" v-model="java" /><br />
				html成绩：<input type="text" v-model="html" /><br />
				vue成绩：<input type="text" v-model="vue" /><br />
			</form>
			总成绩：<span>{{ sum }}</span> 
			平均分：<span>{{ avg }}</span>
			
		</div>
	</body>
	<script src="js/vue.js"></script>
	<script type="text/javascript">
		new Vue({
			el: "#app",
			data: {
				java: 90,
				html: 85,
				vue: 84
			},
			// methods:{
			// 	sum:function(){
			// 		return this.java+this.html+this.vue;
			// 	},
			// 	avg:function(){
			// 		return Math.round((this.java+this.html+this.vue)/3)
			// 	}
			// }
			// ,
			computed:{ //计算属性
				sum:function(){
					return this.java+this.html+this.vue;
				},
				avg:function(){
					return Math.round((this.java+this.html+this.vue)/3)
				}
			}
		});
	</script>
</html>

示例2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			方法:{{ f_show() }}<br />
			计算属性:{{c_show}}
		</div>
	</body>
	<script src="js/vue.min.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#app",
			data: {
                messge:"hello"
			},
			methods: {
				f_show() {
					return Date.now()
				}
			},
			computed: {
				c_show() {
					return Date.now()
				}
			}
		});
	</script>
</html>

7、侦听器

可以通过 watch 来响应数据的变化。

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			千米:<input  type="text" v-model="km"/><br/>
			米:<input  type="text" v-model="m"/><br/>
			结果:{{ rs }}
		</div>
	</body>
	<script src="js/vue.min.js"></script>
	<script type="text/javascript">
		var vm=new Vue({
			el:"#app",
			data:{
				km:0,
				m:0,
				rs:''
			},
			watch:{
				km:function(v){
					this.km=v
					this.m=v*1000
				},
				m:function(v){
					this.m=v
					this.km=v/1000
				}
			}
		})
		//活动侦听结果
		vm.$watch('km',function(newVal,oldVal){
			vm.rs="改变后的值为:"+newVal+",改变前的值为:"+oldVal;
		})
		
	</script>
</html>

8、MVVM模式

MVC设计模式

MVVM模式：

MVVM分为三个部分：分别是M（Model，模型层），V（View，视图层），VM（ViewModel，V与M连接的桥梁，也可以看作为控制器）

1、 M：模型层，主要负责业务数据相关；

2、 V：视图层，顾名思义，负责视图相关，细分下来就是html+css层；

3、 VM：V与M沟通的桥梁，负责监听M或者V的修改，是实现MVVM双向绑定的要点；

MVVM支持双向绑定，意思就是当M层数据进行修改时，VM层会监测到变化，并且通知V层进行相应的修改，反之修改V层则会通知M层数据进行修改，以此也实

现了视图与模型层的相互解耦；

关系图

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

9、Vue的表单操作

在表单的单行与多行文本框是通过v-model指令完成的双向数据绑定。

9.1 单选框的应用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        <div id="app">
              <input type="radio" id="man" value="man" v-model="picked">
              <label for="man">男</label>
              <br>
              <input type="radio" id="women" value="women" v-model="picked">
              <label for="women">女</label>
              <br>
              <span>选中值为: {{ picked }}</span>
        </div>
</body>
    <script src="js/vue.js"></script>
	<script type="text/javascript">
        new Vue({
          el: '#app',
          data: {
            picked : 'women'
          }
        })
</script>
</html>

9.2 复选框的应用

单个复选框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="checkbox" id="hobby" v-model="checked"  />
			<label for="hobby">唱歌</label>
			{{checked}}
			
		</div>
	</body>
	<script src="js/vue.js"></script>
	<script type="text/javascript">
	new Vue({
		el:"#app",
		data:{
			checked:false
		}
	});
	</script>
</html>

多个复选框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
<div id="app">
  <p>多个复选框：</p>
  <input type="checkbox"  value="睡觉" v-model="checkedNames"> 睡觉
  <input type="checkbox"  value="吃饭" v-model="checkedNames"> 吃饭
  <input type="checkbox"  value="写代码" v-model="checkedNames"> 写代码
  <br>
  <span>选择的值为: {{ checkedNames }}</span>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
  el: '#app',
  data: {
    checkedNames: []
  }
})
</script>
</body>
</html>

9.3 下拉列表的应用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        <div id="app">
          <select v-model="selected" name="city">
            <option value="">选择一个城市</option>
            <option value="0">太原</option>
            <option value="1">大同</option>
            <option value="2">晋中</option>
          </select>

          <div id="output">
              选择的城市是: {{selected}}
          </div>
        </div>
<script src="js/vue.js"></script>
<script>
new Vue({
  el: '#app',
  data: {
	selected: '' 
  }
})
</script>
</body>
</html>

9.4 修饰符

v-model几个属性

.lazy 懒加载

在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在失去焦点事件中同步：

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

.number

如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：

相当于

<input type="number" />
<input v-model.number="age" type="number">

.trim

如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：

<input v-model.trim="msg">

10、使用Axios进行异步通信

官网地址：http://www.axios-js.com/zh-cn/docs/

jquery…ajax进行了封装

Vue.js Ajax

Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。

ECMAScript：行业标准，ES6 JavaScript5

const str="123";
let str1="abc";

使用=> 箭头函数，就不用管 this

带参数的get请求方式一

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			学生编号:<span v-text="student.stuId"></span><br />
			学生姓名:<span v-text="student.stuName"></span><br />
			学生年龄:<span v-text="student.stuAge"></span><br />
		</div>
	</body>
	<script src="js/vue.min.js"></script>
	<script src="js/axios.min.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data: {
				student: {}
			},
			mounted(){
				 axios({
				 	method:"get",
				 	url:"http://localhost:8081/student/getUserParam?name=王五&num=101"
				 }).then(response=>{
				 	this.student=response.data
				 })
				
			}
			
		})
	</script>
</html>

带参数的get请求方式二

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			学生编号:<span v-text="student.stuId"></span><br />
			学生姓名:<span v-text="student.stuName"></span><br />
			学生年龄:<span v-text="student.stuAge"></span><br />
		</div>
	</body>
	<script src="js/vue.min.js"></script>
	<script src="js/axios.min.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data: {
				student: {}
			},
			mounted(){
				 axios({
				 	method:"get",
				 	url:"http://localhost:8081/student/getUserParam",
				 	params:{
						name:"小刘",
						num:102
				 	}
				 }).then(response=>{
				 	this.student=response.data
				 })
			}
		})
	</script>
</html>

get方式的简写

axios.get("http://localhost:8081/student/getUserParam",{
    params:{
        name:"小张",
        num:105
    }
}).then(response=>{
    this.student=response.data
}).catch(function(e){
    console.log(e)
})

post方式简写：

axios.post("http://localhost:8090/user/getUser", "userNo=aaaaa&userPwd=123").then(response => {
    this.user = response.data
}).catch(function(e) {
    console.log(e)
})

axios保存post提交的全写形式：

axios({
    method: "post",
    url: "http://localhost:8090/user/saveUser",
    data: this.user
}).then(response => {
    if (response.data.message == "成功") {
        alert("保存成功!")
    }
}).catch(function(e) {
    alert(e)
})

axios保存post提交的简写形式：

axios.post("http://localhost:8090/user/saveUser", this.user).then(response => {
    if (response.data.message == "成功") {
        alert("保存成功!")
    }
}).catch(function(e) {
    alert(e)
})

vue基础篇完

后续vue高级知识：

组件：子组件父组件

路由：路由表

NPM：安装vue-cli

ES6

nodejs

Webpack:打包，发布

创建.vue页面

vue-cli 脚手架

vue=elementUI===vue-elementUI-admin

jQueryLayUI====layuiMini

====================================

作业：

一、后台返回一个集合，前端进行表格绑定

二、前端表单录入数据，传到后台

哲寻

关注

13
点赞
踩
28

收藏

觉得还不错? 一键收藏
0
评论
Vue教程——[11]

Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上。px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
复制链接

扫一扫