1.Vue js
1.1 vue 是什么
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
如果你想在深入学习 Vue 之前对它有更多了解，我们制作了一个视频，带您了解其核心概念和一个示例工程。
1.2 vue组件说明
1.3 vue入门案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VUE入门案例</title>
</head>
<body>
<!-- 入门案例步骤:
1.导入vue.js文件 html下部编辑
2.指定区域进行渲染 需要准备div 里面写vue.js代码
3.创建vue.js对象 指定渲染区域 动态调用
-->
<!-- 指定区域 -->
<div id="app">
<!-- 展现msg属性
插值表达式:{{key}}
-->
<h1>{{msg}}</h1>
</div>
<!-- 导入js文件 -->
<script src="../js/vue.js"></script>
<!-- 创建vue对象 -->
<script>
/**
* 语法:
* 1.const 定义常量
* 2.let 作用与var类似,有作用域概念
* 3.var 特点:没有作用域
*/
const app=new Vue({
el: "#app",
data: {
msg: "你好vue"
}
})
</script>
</body>
</html>
1.4数据显示
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VUE入门案例</title>
</head>
<body>
<div id="app">
<!-- 特点: 如果页面没有渲染完成,则直接展现给用户
插值表达式需要直接显示
显示时使用,输入不可使用-->
<h1>{{msg}}</h1>
<!-- v-text 如果页面没有渲染完成,则不显示信息-->
<h1 v-text="msg"></h1>
<!-- v-html 直接渲染html标签 -->
<div v-text="h3html"></div>
<div v-html="h3html"></div>
<!-- v-pre 跳过预编译 -->
<div v-pre>{{msg}}</div>
<!-- v-once 只渲染一次 -->
<div v-once>{{once}}</div>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el: "#app",
data: {
msg: "你好vue",
h3html: "<h3>需要html渲染</h3>",
once: "我只能被渲染一次"
}
})
</script>
</body>
</html>
1.5 双向数据绑定
1.5.1 双向数据绑定代码
双向数据绑定: 实现了页面与数据的绑定. 页面变数据变 / 数据变页面变.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VUE入门案例</title>
</head>
<body>
<div id="app">
<!-- v-model 双向数据绑定
数据段--页面
页面----数据
-->
{{msg}}
<input name="msg" v-model="msg" />
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el: "#app",
data: {
msg: "数据随时修改",
}
})
</script>
</body>
</html>
1.5.2 MVVM设计思想
回顾: mvc模式,核心思想:减少代码的耦合性
m model:封装的数据
v view :视图层: 数据的展现
c contro 控制层: 程序的流转过程
衍生: 3层代码的结构 controller–service–mapper/dao
MVVM思想:
M: model 封装的数据
V: view 数据的展现 视图层
VM: 数据视图的控制层 控制数据流转的过程
MVVM是前端为了解耦,模拟后端设计的一种思想
1.5.3 双向数据绑定的原理
步骤:
- 用户修改页面是,通过DOM监听器感知用户的修改行为,通过虚拟DOM,第一时间更新Model中的数据.
- 当数据发生变化时,由虚拟DOM根据数据绑定的规则,第一时间通知真实的DOM,页面发生变化.
1.6 事件绑定
语法:
v-on:click="函数/直接进行计算"
具体代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>双向数据绑定</title>
</head>
<body>
<div id="app">
<!-- 双向数据绑定 v-model
1.数据端---页面
2.页面-----数据
-->
<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>
</html>
1.7 按键触发机制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>按键触发操作</title>
</head>
<body>
<div id="app">
<!--
语法:
1.v-on:keydown="" 按下触发
2.v-on:keyup="" 弹起来触发
3.v-on:keypress="" 小键盘触发
按键支持:
.enter .tab
.delete (捕获“删除”和“退格”键)
.esc .space
.up .down .left .right
需求:用户通过输入 按特殊的键位触发函数
要求1. 按钮实现加法操作 num = num + num2
要求2. 用户按回车按钮实现触发
要求3. 用户按空格键实现触发
-->
<h3>用户数据:{{num}}</h3><br>
<!-- <input type="text" v-on:keyup.enter="addNum" v-model="num2" /> -->
<input type="text" v-on:keyup.space="addNum" v-model="num2" />
<button @click="addNum">计算</button>
</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>
1.8 计算器练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算器案例</title>
</head>
<body>
<div id="app">
<!-- 要求
1.准备两个文本输入框 num1/num2
2.要求准备一个按钮 "计算" 当点击按钮时实现
count=num1+num2
将得到的结果通过 总数输出count
3.当输入num2时可以通过回车按键 计算.
注意事项: input框默认是字符串
-->
数值1: <input type="text" v-model="num1" /><br>
数值2: <input type="text" v-model="num2"
@keyup.enter="addNum"
/><br>
总数: {{count}} <br>
<button @click="addNum">计算</button>
</div>
<script src="../js/vue.js"></script>
<script>
const APP = new Vue({
el: "#app",
data: {
num1: 0,
num2: 0,
count: 0
},
methods: {
addNum(){
this.count =
parseInt(this.num1) + parseInt(this.num2)
}
}
})
</script>
</body>
</html>
1.9 按键修饰符
1.9.1 阻止冒泡 .stop
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>按键修饰符</title>
</head>
<body>
<div id="app">
<!-- 难点: 元素可能需要嵌套,事件可能嵌套
说明: 如果事件嵌套则必然带来事件的冒泡.
解决方案: 阻止事件冒泡 .stop属性
-->
数值: {{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>
1.9.2 阻止默认行为 .prevent
<!-- 需求2:
a标签作用中的href的跳转是默认规则
要求: 用户点击a标签 不跳转页面,同时触发事件
解决: 阻止标签的默认行为 @click.prevent
-->
<a href="http://baidu.com" @click.prevent="aClick">百度</a>
<!-- 用途: prevent阻止页面跳转 a标签/form表单 action同步请求 -->