VUE用法（二）
1、属性绑定
入门案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性绑定</title>
<style>
/* red 红色 宽度50 高度50 */
.red {
background-color: red;
width: 50px;
height: 50px;
}
.blue {
background-color: aqua;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="app">
<!-- a标签的属性绑定
需求: href中的属性动态赋值
语法: v-bind:href="VUE中的属性"
-->
<a v-bind:href="url">百度</a>
<!-- 简化写法 -->
<a :href="url">我是简化写法：百度</a>
<hr />
<!-- 2.class类型绑定
class中可以定义多个样式.简化程序的调用
需求: 需要动态的为class赋值
规则: :class是属性的绑定,绑定之后查找对应的属性
colorClass: "blue" 之后根据value值 blue 查找对应的CSS样式
-->
<div :class="colorClass">我是class修饰</div>
<hr >
<!-- 3. 属性切换
需求: 通过按钮控制样式是否展现 属性
语法: :class={class类型的名称: false}
-->
<div :class="{red: flag}">我是class修饰</div>
<button @click="flag = !flag">切换</button>
</div>
<script src="../js/vue.js"></script>
<script>
const APP = new Vue({
el: "#app",
data: {
url: "http://www.baidu.com",
colorClass: "blue",
flag: true
}
})
</script>
</body>
</html>
2、分支结构语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性绑定</title>
<style>
</style>
</head>
<body>
<div id="app">
<!-- 分支结构
语法:
1.v-if 如果为真则展现标签
2.v-else-if 必须与v-if连用
3.v-else 必须与v-if连用 取反
案例:
要求: 按照用户的考试成绩 评级
>=90分 优秀
>=80分 良好
>=70分 中等
>=60分 及格
否则 不及格
-->
<h3>评级</h3>
请录入分数: <input v-model="score" />
<div v-if="score >= 90 ">优秀</div>
<div v-else-if="score >= 80 ">良好</div>
<div v-else-if="score >= 70 ">中等</div>
<div v-else-if="score >= 60 ">及格</div>
<div v-else>不及格</div>
</div>
<script src="../js/vue.js"></script>
<script>
const APP = new Vue({
el: "#app",
data: {
score: 70
}
})
</script>
</body>
</html>
3、循环结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>循环结构</title>
<style>
</style>
</head>
<body>
<!-- 2.指定区域 -->
<div id="app">
<!--
1.什么时候使用循环
多次重复的执行同一个操作.
2.什么数据使用循环
1.数组
2.对象
3.数组套对象(集合)
-->
<!--遍历数组-->
<!--
遍历数数组，将数组中的数据在页面中展现
-->
<p v-for="item in array" v-text="item">
<!-- {{item}} -->
</p>
<!-- 2. 获取下标
语法: v-for="(遍历的元素,遍历的下标) in 需要遍历的数组名"
-->
<p v-for="(item,index) in array">
<!--
item:变量名,用来接数组的值，index是下标
-->
下标:{{index}}~~~数据值:{{item}}
</p></br>
<!--遍历对象-->
<p v-for="(item,key,index) in user">
<!--
给对象属性赋值是用键值对,多个属性，逗号隔开
{key:value,key:value}
语法: v-for="(value,key,index) in 需要遍历的对象名"
item：变量名，用来接对象的值（value位置的值）
key：key位置的值
index是下标
-->
key:{{key}}~~~value:{{item}}~~~下标:{{index}}
</p></br>
<!--遍历"集合"-->
<!-- 获取集合中的是对象，括号中只有两个参数（对象、下标） -->
<div v-for="(user,index) in userList">
ID:{{user.id}}
name:{{user.name}}
sex:{{user.sex}}
下标:{{index}}
</br>
<!-- 获取集合中的是对象属性，括号中只有三个参数（属性值、属名、下标） -->
<div v-for="(value,key,i) in user">
{{key}}~~~~{{value}}~~~~{{i}}
</div>
</br>
</div>
</div>
<!-- 1.导入JS文件 -->
<script src="../js/vue.js"></script>
<!-- 3.创建VUE对象 -->
<script>
const APP = new Vue({
//1.指定区域
el: "#app",
//2.定义属性
data: {
array: ["郭晶晶","马龙","姚明"],
user:{
<!--定义格式(键值对)：{key:value,key:value} -->
id:100,
name:"tomcat",
sex:"男",
},
userList:[
{id:200,name:"张三",sex:"男"},
{id:300,name:"张四",sex:"女"},
],
}
})
</script>
</body>
</html>
4、form表单数据绑定
主要练习：form表单中如何实现双向数据绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用表单属性</title>
</head>
<body>
<h1>本案例练习 表单提交数据时 数据如何与vue进行数据绑定</h1>
<div id="app">
<form id="userForm"action="http://www.baidu.com">
<div>
<span>
姓名:
</span>
<span>
<input type="text" name="name" v-model="name"/>
</span>
</div>
<div>
<span>性别:</span>
<span>
<!-- 单选框: name属性必须一致 -->
<input type="radio" name="gender" value="男" id="man" v-model="gender"/>
<label for="man">男</label>
<input type="radio" name="gender" value="女" id="women" v-model="gender"/>
<label for="women">女</label>
</span>
</div>
<div>
<span>爱好:</span>
<input type="checkbox" name="hobbies" value="吃" v-model="hobbies"/>吃
<input type="checkbox" name="hobbies" value="喝" v-model="hobbies"/>喝
<input type="checkbox" name="hobbies" value="玩" v-model="hobbies"/>玩
</div>
<div>
<span>职业</span>
<!-- 如果需要设置为多选 则添加属性 -->
<select name="occupation" v-model="occupation" multiple="true">
<option value="工人">工人</option>
<option value="教师">教师</option>
<option value="工程师">工程师</option>
</select>
</div>
<div>
<span>个人简介</span>
<textarea name="userInfo" style="width: 200px;height: 50px;" v-model="userInfo"></textarea>
</div>
<div>
<!-- 阻止默认提交事件 -->
<input type="submit" value="提交" v-on:click.prevent="submitForm"/>
</div>
</form>
</div>
<!-- 引入JS文件 -->
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
name: '输入名称',
gender: '女',
//多个数据定义时 应该使用数组
hobbies: ['吃','喝','玩'],
occupation: ['工人'],
userInfo: ''
},
methods: {
submitForm(){
//数据提交
console.log("姓名:"+this.name)
console.log("性别:"+this.gender)
console.log('爱好:'+this.hobbies)
console.log('职业:'+this.occupation)
console.log('用户详情:'+this.userInfo)
console.log('封装好数据之后,可以使用ajax方式实现数据提交')
}
}
})
</script>
</body>
</html>
5、表单修饰符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单修饰符</title>
</head>
<body>
<h1>表单修饰符number/trim/lazy</h1>
<div id="app">
<!--
语法:
.number 只能输入数值类型
.trim 去除左右空格
.lazy 离焦事件才触发，点击其他地方才触发
-->
<h3>数据展现: {{age}}</h3>
年龄: <input type="text" v-model.number="age" />
<button @click="addNum">增加</button>
<hr />
用户输入的长度: {{name.length}} <br>
用户名: <input type="text" v-model.trim="name" />
<hr />
展现数据lazy~~{{msg}} <br>
<input type="text" v-model.lazy="msg"/>
<hr />
</div>
<!-- 引入JS文件 -->
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
age: '',
name: '',
msg: ''
},
methods: {
addNum(){
this.age += 1
}
}
})
</script>
</body>
</html>
6、计算属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算属性</title>
</head>
<body>
<h1></h1>
<div id="app">
<!-- 需求:
将用户的输入内容进行反转
API:
1.字符串转化为数组 拆串 split('')
2.将数组倒序 .reverse()
3.将数组转化为字符串 .join('')
计算属性功能用法:
1.插值表达式中应该写简单的算数计算,如果复杂应该封装
2.如果数据操作相同则应该简化过程.
总结: 计算属性相对于方法 效率高(从虚拟DOM中直接获取结果)
-->
<h3>数据展现:</h3>
{{reverse()}}<br> <!-- 方法多次执行-->
{{reverse()}}<br>
{{reverse()}}<br>
{{reverse()}}<br>
{{reverseCom}}<br> <!-- 计算属性只执行一次-->
{{reverseCom}}<br>
{{reverseCom}}<br>
{{reverseCom}}<br>
<input type="text" v-model="msg"/>
</div>
<!-- 引入JS文件 -->
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
msg: 'abc'
},
methods: {
reverse(){
console.log("方法执行!!!!!")
return this.msg.split('').reverse().join('')
}
},
computed: {
//key:value 必须添加返回值
reverseCom(){
console.log("计算属性!!!!")
return this.msg.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
7、数组操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数组操作</title>
</head>
<body>
<h1>数组操作</h1>
<div id="app">
<!-- 数组的方法 java中的叫法push:入栈 pop弹栈
push() 在结尾追加元素
pop() 删除最后一个元素
shift() 删除第一个元素
unshift() 在开头追加元素
splice() 替换数组中的数据 !!!!
sort() 数据排序
reverse() 数组反转
-->
输入框: <input type="text" v-model="msg"/><br>
<span v-for="(value) in array">
{{value}},
</span><br>
<button @click="push">push</button>
<button @click="pop">pop</button>
<button @click="shift">shift</button>
<button @click="unshift">unshift</button>
<button @click="splice">替换</button>
<button @click="reverse">反转</button>
</div>
<!-- 引入JS文件 -->
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
array: ["a","b","c"],
msg: ''
},
<!-- 方法 -->
methods: {
<!-- 末尾追加 -->
push(){
this.array.push(this.msg)
},
<!-- 删除最后一个元素 -->
pop(){
//数组数据会自动的更新
this.array.pop()
},
<!-- 删除第一个元素 -->
shift(){
this.array.shift()
},
<!-- 在开头追加元素 -->
unshift(){
this.array.unshift(this.msg)
},
<!-- 替换数组中的数据 !!!! -->
splice(){
/**
* 参数: 3个参数
* arg1: 操作数据的起始位置 从0开始
* arg2: 操作的数量 阿拉伯数字
* arg3: 替换后的数据.可以有多个(可变参数类型)
* 案例:
* 1.将第一个元素,替换为msg
* this.array.splice(0,1,this.msg)
* 2.将前2个元素替换为msg
* this.array.splice(0,2,this.msg) 前2个替换
* this.array.splice(0,2,this.msg,this.msg) 前2个替换,补齐2个数据
* 3.将最后一个替换为msg
* let index = this.array.length - 1;
this.array.splice(index,1,this.msg)
4.删除第二个元素
*/
//如果只有2个参数,则表示删除
this.array.splice(1,1)
},
<!-- 数组反转 -->
reverse(){
this.array.reverse();
}
}
})
</script>
</body>
</html>
== 8、VUE生命周期(难点!!)==
周期：
1.初始化周期
1.1.beforeCreate vue对象实例化之前(刚开始)
1.2. created
1.3. beforeMount
1.4. Mounted 说明VUE对象实例化成功(DIV渲染完成)
2.修改周期
2.1. beforeUpdate 用户修改数据之前
2.2. updated 用户修改数据之后
3.销毁周期
3.1. beforeDestroy VUE对象销毁前
3.2. destroyed VUE对象销毁后(最后一步)
** 生命周期函数的作用:**
如果需要对VUE对象中的数据进行额外的操作，则使用生命周期函数，
**生命周期函数的目的: **
框架的扩展性更好.(实现定制化)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试vue生命周期函数</title>
</head>
<body>
<div id="app">
<h3 v-text="msg"></h3>
<button @click="destroy">销毁</button>
</div>
<!--引入js函数类库 -->
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el : "#app",
data : {
msg: "vue生命周期"
},
//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
beforeCreate(){
console.log("beforeCreate")
},
//在实例创建完成后被立即调用
created(){
console.log("created")
},
//在挂载开始之前被调用：相关的 render 函数首次被调用。
beforeMount(){
console.log("beforeMount")
},
//实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。
mounted(){
console.log("mounted")
},
//数据更新时调用，发生在虚拟 DOM 打补丁之前
beforeUpdate(){
console.log("beforeUpdate")
},
//由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
updated(){
console.log("updated")
},
//实例销毁之前调用。在这一步，实例仍然完全可用
beforeDestroy(){
console.log("beforeDestroy")
},
//实例销毁后调用。
destroyed(){
console.log("destroyed")
},
methods:{
destroy(){
this.$destroy()
}
}
})
</script>
</body>
</html>
9、总结
9.1）事件绑定：
语法：
v-on:事件="函数/方法/直接计算"
简化写法：
@事件="函数/方法/直接计算"
9.2）属性绑定
1）属性绑定，动态为属性赋值
语法：
v-bind:xxxx="VUE中的属性"
简化写法：
xxxx="VUE中的属性"
2）class绑定，class中可以定义多个样式.简化程序的调用，动态的为class赋值
如果用户需要切换class 则可以使用该操作
数据是否展现，可以通过 {class类型: true/false}
9.3）分支结构
用法：如果数据为真则展现html标签
语法： v-if/v-else-if/v-else
要求：v-if可以单独使用
另外2个必须与v-if连用
9.4） 循环结构
用法: 通过循环 展现标签+数据
语法:
1）遍历数组，获取元素
v-for((value,index) in array)
item：变量名，用来接数组的值
index：下标
array：需要遍历的数组名
2）遍历对象，获取对象属性值
v-for((value,key,index) in obj)
item：变量名，用来接对象的值（value位置的值）
key：key位置的值
index：下标
obj：需要遍历的对象
3）遍历集合（外循环，获取集合中的元素；内循环，获取元素的属性值）
v-for(user in userList){ //遍历集合中的元素/对象
user：变量名，用来接集合中元素/对象
userList：需要变的集合名
v-for((value,key,index) in user) //遍历元素/对象的属性值（嵌套for循环）
item：变量名，用来接对象的值（value位置的值）
key：key位置的值
index：下标
user：需要遍历的元素/对象
}
9.5）表单操作
一般数据进行提交时都会使用表单.
每个表单几乎都写action（action后面接路径），action现在几乎不用(同步操作)
一般通过，阻止默认行为的方式，禁用action，之后手写点击事件触发后续操作(Ajax)
禁用action：
v-on:click.prevent="submitForm"
用户录入标签体 1.文本框 2.单选 3.多选 4.下拉框 5.文本域
掌握各个标签的双向数据绑定的写法，值有多个，使用数组.
表单修饰符：
.number 只能输入数值类型
.trim 去除左右空格（不去中间空格）
.lazy 离焦事件才触发，点击其他地方才触发
9.6）计算属性
复杂的操作如果通过{{}} 插值表达式封装，比较冗余。
如果将复杂的操作封装为方法，调用一次执行一次，效率低.
计算属性:
1.可以封装复杂操作
2.内部有缓存机制，只需要计算一次，多次调用，计算属性相对于方法，效率高(从虚拟DOM中直接获取结果)
9.7） 数组操作
push() 在结尾追加元素，需要传参
pop() 删除最后一个元素
shift() 删除第一个元素
unshift() 在开头追加元素，需要传参
splice() 替换数组中的数据 !!!!，需要传参
sort() 数据排序
reverse() 数组反转
14万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
