目录
一、概述
1.介绍
Vue 是一套用于构建用户界面的渐进式框架。
2.MVVM思想
M:Model封装的数据、数据层
V：View数据的展现、视图层
VM：viewModel视图数据的控制层，控制数据流转
MVVM设计思想是前段模拟后端为了解耦的一种设计思想
二、基本语法
1.入门案例
（1）导入vue.js文件 html下部编辑
（2）指定区域进行渲染 需要准备div vue.js代码
（3）创建VUE.js对象 指定渲染区域 动态调用
语法:
（1）const 定义常量的
（2）let: 作用和var类似, 有作用域的概念
（3）var 特点:没有作用域
<body>
<!-- 2.指定区域 -->
<div id="app">
<!-- 在div中展现msg属性
插值表达式: {{key}}
-->
<h1>{{msg}}</h1>
</div>
<!-- 1.导入JS文件 -->
<script src="../js/vue.js"></script>
<!-- 3.创建VUE对象 -->
<script>
const APP = new Vue({
//1.指定区域
el: "#app",
//2.定义属性
data: {
//key:value
msg: "您好VUE"
}
})
</script>
</body>2.数据显示
v-text指令：如果页面没有渲染完成，则不显示信息
v-html指令：直接渲染html标签
v-pre指令：跳过预编译，显示标签体本身
v-once指令：只渲染一次
例：
<body>
<div id="app">
{{msg}}
1.v-text指令: 如果页面没有渲染完成,则不显示信息
<h1 v-text="msg"></h1>
<!-- 2.v-html 直接渲染html标签 -->
<div v-html="h3Html"></div>
<!-- 3.v-pre 跳过预编译 显示标签体本身 -->
<div v-pre>{{msg}}</div>
<!-- 4.v-once 只渲染一次 -->
<div v-once>{{once}}</div>
</div>
<!-- -->
<!-- 1.导入JS文件 -->
<script src="../js/vue.js"></script>
<!-- 3.创建VUE对象 -->
<script>
const APP = new Vue({
el: "#app",
data: {
msg: "您好VUE",
h3Html: "<h3>我需要html渲染</h3>",
once: "我只能被渲染一次"
}
})
</script>
</body>3.双向数据绑定
实现了页面与数据的绑定，页面变数据端变/数据端变页面变 语法：v-model
例：
<body>
<div id="app">
<input name="msg" v-model="msg"/><br>
{{msg}}
</div>
<!-- 1.导入JS文件 -->
<script src="../js/vue.js"></script>
<!-- 3.创建VUE对象 -->
<script>
const APP = new Vue({
el: "#app",
data: {
msg: "数据随时修改"
}
})
</script>
</body>原理：
（1）用户修改页面时，通过DOM的监听器感知用户的修改行为，之后通过虚拟DOM对象，第一时间更新Model中的属性。
（2）当数据发生变化，由虚拟DOM根据数据绑定的规则，第一时间通知真实的DOM对象，至此页面数据发生变化。
4.事件绑定
语法：v-on:click="函数/直接进行计算" （注： v-on: 可以用@简写替换）
<body>
<div id="app">
展现数据: {{num}}
<button v-on:click="num++">自增</button>
<!-- <button v-on:click="addNum">自增函数</button> -->
<button @click="addNum">自增函数</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
num: 100
},
methods: {
addNum: function(){
this.num ++
}
}
})
</script>
</body>
</html>5.按键触发机制
语法：v-on:keydown=" " 按下触发
v-on:keyup=" " 弹起来触发
v-on:keypress=" " 小键盘触发
按键支持：
.enter .tab .delete(捕获“删除”和“退格”键) .esc
.space .up .down .left .right
<body>
<div id="app">
要求1. 按回车钮实现加法操作 num = num + num2
<!-- <input type="text" v-on:keyup.enter="addNum" v-model="num2" /> -->
要求2. 用户按空格键实现触发
<input type="text" v-on:keyup.space="addNum" v-model="num2" />
</div>
<script src="../js/vue.js"></script>
<script>
const APP = new Vue({
el: "#app",
data: {
num: 100,
num2: 0
},
methods: {
addNum(){
//this.num = this.num + this.num2
//将字符串转化为数值类型
this.num += parseInt(this.num2)
}
}
})
</script>
</body>
</html>
6.阻止冒泡 .stop
<!-- 难点: 元素可能需要嵌套,事件可能嵌套
说明: 如果事件嵌套则必然带来事件的冒泡.
解决方案: 阻止事件冒泡 .stop属性
-->
<body>
<div id="app">
数值: {{num}}
<div @click="num++">
嵌套结构
<button @click.stop="num++">计算</button>
</div>
<script src="../js/vue.js"></script>
<script>
const APP = new Vue({
el: "#app",
data: {
num: 0
},
methods: {
}
})
</script>
</body>
</html>
7.阻止默认行为 .prevent
a标签作用中的href的跳转是默认规则 ，要求: 用户点击a标签 不跳转页面,同时触发事件 解决: 阻止标签的默认行为 @click.prevent
<a href="http://baidu.com" @click.prevent="aClick">百度</a>三、高级语法
1.属性绑定
<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.分支结构
v-if 如果为真则展现标签 v-else-if 必须与v-if连用 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> 3.循环结构
多次重复的执行同一个操作时，使用循环
数组、对象、数组套对象（集合）使用循环
（1）遍历数组，将数组中的数据在页面中展现
<p v-for="item in array" v-text="item">
{{item}}
</p>（2）获取下标 语法：v-for="(遍历的元素,遍历的下标) in array"
<p v-for="(item,index) in array">
下标:{{index}}~~~数据值:{{item}}
</p>（3）遍历对象 语法：v-for="(value,key,index下标)"
<p v-for="(value,key,index) in user">
{{index}}~~~~{{key}}~~~~{{value}}
</p>（4）遍历集合 语法：v-for(user in userList) 后续通过user.属性取值
<p v-for="user in userList">
方法一： | ID: {{user.id}}
| name: {{user.name}}
| age:{{user.age}}
方法二： <!-- <p v-for="(value,key,index) in user">
</p> -->
</p>4.表单修饰符
语法： .number 只能输入数值类型
.trim 去除左右空格
.lazy 离焦事件才触发
5.计算属性
字符串转化为数组 split（' '）
将数组倒序 .reverse()
将数组转化为字符串 .join(' ')
6.数组操作
push() 在结尾追加元素
push(){
this.array.push(this.msg)
},
pop() 删除最后一个元素
pop(){
//数组数据会自动的更新
this.array.pop()
},
shift() 删除第一个元素
shift(){
this.array.shift()
},
unshift() 在开头追加元素
unshift(){
//在开头追加
this.array.unshift(this.msg)
},
splice() 替换数组中的数据 !!!!
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)
}
sort() 数据排序
reverse() 数组反转四、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对象销毁后(最后一步)
4.生命周期函数的作用
如果需要对VUE对象中的数据进行额外的操作，则使用生命周期函数，可以使框架的拓展性更好
2638
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
