测开 | Vue速查知识点
文章目录
-
- Vue知识
-
- 1. Vue 概述
- 2. Vue 代码格式
- 3. Vue 指令
-
- 3.1 v-bind & v-model
- 3.2 v-on
- 3.3 v-if和v-show
- 3.4 v-for
- 4. 生命周期
Vue知识
1. Vue 概述
-
简介：
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 -
原理：
MVVM:其实是Model-View-ViewModel的缩写，有3个单词，具体释义如下：- Model: 数据模型，特指前端中通过请求从后台获取的数据
- View: 视图，用于展示数据的页面，可以理解成我们的html+css搭建的页面，但是没有数据
- ViewModel: 数据绑定到视图，负责将数据（Model）通过JavaScript的DOM技术，将数据展示到视图（View）上
如图所示就是MVVM开发思想的含义：
2. Vue 代码格式
- 框架格式：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue-快速入门title>
<script src="js/vue.js">script>
head>
<body>
<div id="app">
<input type="text" v-model="message">
{{message}}
div>
body>
<script>
//定义Vue对象
new Vue({
el: "#app", //vue接管区域
data:{
message: "Hello Vue"
},
methods:{
}
})
script>
html>
3. Vue 指令
- Vue指令如下表：
| 指令 | 作用 |
|---|---|
| v-bind | 为HTML标签绑定属性值，如设置 href , css样式等 |
| v-model | 在表单元素上创建双向数据绑定 |
| v-on | 为HTML标签绑定事件 |
| v-if | 条件性的渲染某元素，判定为true时渲染,否则不渲染 |
| v-else | |
| v-else-if | |
| v-show | 根据条件展示某元素，区别在于切换的是display属性的值 |
| v-for | 列表渲染，遍历容器的元素或者对象的属性 |
3.1 v-bind & v-model
| 指令 | 作用 |
|---|---|
| v-bind | 为HTML标签绑定属性值，如设置 href , css样式等 |
| v-model | 在表单元素上创建双向数据绑定 |
- v-bind: 为HTML标签绑定属性值，如设置 href , css样式等。当vue对象中的数据模型发生变化时，标签的属性值会随之发生变化。
<a v-bind:href="url">链接1a>
<a :href="url">链接2a>
<script>
//定义Vue对象
new Vue({
el: "#app", //vue接管区域
data:{
message: "Hello Vue",
url:"https://www.baidu.com"
},
methods:{
}
})
script>
-
v-model： 在表单元素上创建双向数据绑定。什么是双向？
- vue对象的data属性中的数据变化，视图展示会一起变化
- 视图数据发生变化，vue对象的data属性中的数据也会随着变化。
data属性中数据变化，我们知道可以通过赋值来改变，但是视图数据为什么会发生变化呢？只有表单项标签！所以双向绑定一定是使用在表单项标签上的。编写如下代码：
<a v-bind:href="url">链接1a>
<input type="text" v-model="url">
<script>
//定义Vue对象
new Vue({
el: "#app", //vue接管区域
data:{
message: "Hello Vue",
url:"https://www.baidu.com"
},
methods:{
}
})
script>
表单项标签：
：用于创建一个表单输入框，可以输入文本、密码、日期、数字等。