mvvm
vue官网：https://cn.vuejs.org/
例子
cdn引用使用,new Vue对象（必须el绑定要使用的标签）
-
创建Vue实例: new Vue()来创建Vue实例
-
构造函数接收一个json配置对象，json配置对象中有一些属性:
el: 是element的缩写，通过id选中要渲染的页面元素，本例中是一个div
data: 数据对象，里面可以自定义很多属性，都可以渲染到视图中
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<!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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="d1">
{ {Message} }
</div>
<script>
var vm = new Vue({
el: "#d1",
data: {
Message: "hello"
}
});
</script>
</body>
</html>
mvvm
是一种软件架构设计模式，核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用。
-
M: 即Model，模型，包括数据和一些基本操作
-
V: 即View，视图，页面渲染结果
-
VM: 即View-Model，模型与视图间的双向操作（无需开发人员干涉）
MVVM模式的设计理念;让开发人员从繁琐的DOM操作中解放出来。
语法
Vue的实例-组件（对象）讲解
a. 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 根Root实例 （又称为主组件）开始的:
b. 当创建一个 Vue 实例时，你可以传入一个选项对象, 选项对象包括(例举):
DOM (视图):
-
el: 渲染的html元素
-
template: 渲染的模板(组件开发时用)
数据/方法
-
data: 数据
-
props: 组件属性(组件开发时用)
-
methods: 方法
-
computed: 计算属性
-
watch: 监控属性
生命周期钩子(初始化Vue实例时，不同阶段自动回调的函数)
-
beforeCreate
-
created
-
beforeMount
-
mounted
-
beforeUpdate
-
updated
-
beforeDestory
-
destoryed
定义一个vue组件
进阶
插值表达式 { {} }
作用：取值在页面上显示
语法：{ { vue数据对象中的属性 | 运算表达式 } } ----两种用处，但是如果运算表达式过长，可以用vue的计算属性来代替{ {} }插值表达式里面的运算。
故，{ {} }里面只能是属性和运算表达式，不能由其他的，比如 ：{ {我是总数message} }是不会显示在页面上的，直接当成错误处理了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<!-- 引入Vue -->
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!-- View 视图 -->
<div id="app">
{ {message} }
<br/>
<!-- 插值表达式: 算术运算符 -->
{ {(100 + 100 - 20) * 10 / 20} }
<br/>
<!-- 插值表达式: 三目运算符 -->
{ {100 > 50 ? '大于50' : '小于50'} }
</div>
<!-- Vuejs代码 -->
<script type="text/javascript">
// 创建Vue实例
var vue = new Vue({
el : '#app', // 指定Vue渲染的html元素 element
data : { // 数据对象 Model
message : 'Vuejs入门到精通...'
}
});
</script>
</body>
</html>
v-model
作用：数据（value属性）双向绑定—v-model绑定html元素的value值到data对象，data对象中的属性又可以绑定到html元素的value。
语法：v-model=”数据对象中的属性名” | v-model=”数据对象中的属性名.变量名”-------两种用处
注意：其数据默认是字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs数据绑定</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
姓名：<input type="text" v-model="name"/><br/>
年龄：<input type="text" v-model="user.age"/><br/>
性别：<input type="text" v-model="user.sex"/><br/>
<hr/>
姓名：{ {name} } 年龄：{ {user.age} } 性别：{ {user.sex} }
</div>
<script type="text/javascript">
var vue = new Vue({
el : '#app', // 渲染的html元素
data : { // 数据对象(必须先初始化)
name : '',
user : {
age : '18',
sex : '男'
}
}
});
</script>
</body>
</html>
例二：
例三：
v-bind
作用：属性（除了value属性外的其他属性）单向绑定----v-bind绑定html元素的属性值，只能从data对象中取属性绑定到html元素的属性值。（vue的data到html）
语法：v-bind:html元素的属性值=”数据对象中的属性名”（使用这个方法，idea会报红，但不是错）
简写： :html元素的属性值=”数据对象中的属性名”
vue的data数据对象中属性 指向的是html样式中的值
注意：
v-bind：能转换类型，如下：
：page-index=“1” 会把字符串1转换成数值类型
:bottom=“true” 加：才会认为是布尔类型，而不是字符串类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs属性绑定</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-bind: 绑定html元素的属性值 -->
<font v-bind:color="color" v-bind:size="size22">李大华</font>
<hr/>
<!-- 简写: html元素的属性值 -->
<font :color="color" :size="size22">李大华</font>
<hr/>
<!-- 拼接多个颜色值 -->
<font :color="color1 + color2" :size="size22">李大华</font>
<!-- url带参数值 -->
<a v-bind:href="'http://www.baidu.com?id='+ id">百度</a>
<a :href="'http://www.baidu.com?id='+ id">百度</a>
</div>
<script type="text/javascript">
var vue = new Vue({
el : '#app', // 渲染的html元素
data : { // 数据对象(必须先初始化)
color : 'red',
color1 : 'yellow',
color2 : 'green',
size22: 5, //注意这儿不加px
id : 100
}
});
</script>
</body>
</html>
v-on
作用：为html元素绑定事件
语法: @html元素的事件名把前面的on去掉-------------@click=”函数名()”
这个函数名()必须卸载vue的method中
常用事件指令:
@click：单击事件
@blur：失去焦点事件
@keyup：键盘按键按下并松开
@focus：获取焦点事件
@change：对应onchange改变事件
@keydown：键盘按键按下事件
@keypress：同上
@mousedown：鼠标按下事件
@mouseup：鼠标按下弹起
@mouseenter：鼠标进入事件
@mouseleave：鼠标离开事件
@mouseover：鼠标进入事件
注意：v-model.number=”x”绑定数据时指定x变量的数据类型。(v-model默认都是字符串类型)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs事件绑定</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-model.number : 指定x变量的数据类型 -->
x值：<input type="text" v-model.number="x" @keyup="keyup()"/><br/>
y值：<input type="text" v-model.number="y" @blur="blur()"/><br/>
<input type="button" @click="calc()" value="计算一"/>
<!--
@事件名 这种方式绑定事件在Vue2.0推荐使用
过时的事件绑定(了解 1.x版本)
v-on:事件名 已放弃
-->
<input type="button" v-on:click="calc()" value="计算二"/>
<hr/>
{ {count} }
</div>
<script type="text/javascript">
var vue = new Vue({
el : '#app', // 渲染的html元素
data : { // 数据对象(必须先定义，才能使用)
x : '',
y : '',
count : ''
},
methods : { // 事件方法
calc() {
this.count = this.x + this.y;
},
keyup() {
alert(this.x);
},
blur() {
alert(this.y);
}
}
});
</script>
</body>
</html>
##按键修饰符
作用：可监控用户具体按了哪个键
语法: @html元素事件名把前面的on去掉.按键修饰符=”函数名()”---------------------@keyup.enter=”fun1()”
ue.js允许在绑定事件时可以指定具体的按键事件，按键别名:
.enter (回车键)
.tab (Tab键)
.delete (捕获 “删除” 和 “退格” 键)
.esc (Esc键)
.space (Space键)
.up (向上键)
.down (向下键)
.left (向左键)
.right (向右键)
.ctrl (Ctrl键)
.alt (Alt键)
.shift (Shift键)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs按键修饰符</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 判断按下了什么键才触发事件：
@keydown.enter: 按下了回车键
$event: Vue事件对象它封装了(dom的event对象)。
-->
姓名：<input type="text" @keydown.enter="fun1($event)"/>
</div>
<script type="text/javascript">
var vue = new Vue({
el : '#app',
methods : {
fun1 (e) {
alert('按下了回车键！' + e.keyCode);
}
}
});
</script>
</body>
</html>
$event.keyCode: 获取按键代号。
问题：通过Vue怎样为文本框绑定回车键?
回答：
@keyDown.13—方1
@keyDown.enter----方2
v-for
作用：迭代vue的data数据对象中的 数组 或者 json对象 在页面显示，故用在视图上
语法:
迭代数组[]： v-for=“item in 数组” 或 v-for="(item,index) in 数组"
迭代对象{}： v-for="(value,key) in 对象"
注意，前面是值后面那是键
迭代对象数组[{},{},{}]: v-for=“item in 对象数组” 或 v-for=”(item,index) in 对象数组”
应用场景:
- <li v-for=’"">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs迭代指令</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<!-- 迭代数组 -->
<li v-for="(item,index) in dataList">
索引号：{ {index} } === 数组元素：{ {item} }
</li>
</ul>
<ul>
<!-- 迭代对象 -->
<li v-for="(value, key) in user">
{ {key} } : { {value} }
</li>
</ul>
<table border="1">
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<!-- 迭代对象数组 -->
<tr v-for="(item,index) in arrUsers">
<td>{ {index+1} }</td>
<td>{ {item.name} }</td>
<td>男</td>
<td>{ {item.age} }</td>
</tr>
</table>
</div>
<script type="text/javascript">
// 创建Vue实例
var vue = new Vue({
el : '#app', // 渲染的html元素
data : { // 数据对象
dataList : [100,200,300,400,500],
user : {name : '李小一', age : 19, sex : '男'},
arrUsers : [
{name:'lisa1' , age: 11},
{name:'lisa2' , age: 13},
{name:'lisa3' , age: 15}
]
}
});
</script>
</body>
</html>
v-text / v-html
v-text: 为html元素添加text相当于innerText (原样输出)
语法: <html标签名 v-text=”数据对象中的属性名”></html标签名>
v-html: 为html元素添加html相当于innerHTML (格式化输出)
语法: <html标签名 v-html=”数据对象中的属性名”></html标签名>
这儿的html元素，一般都是指容器或者修饰字体元素。
v-text与v-html指令的区别?
v-text: 输出普通的文件，如果有html文本的话，会原样输出
v-html: 输出普通的文件，如果有html文本的话，会格式化输出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs文本指令</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-text="message"></div>
<div v-html="message"></div>
</div>
<script type="text/javascript">
var vue = new Vue({
el : '#app',
data : {
message : '<h1>中国人</h1>'
}
});
</script>
</body>
</html>
v-if & v-show
v-if: 控制html元素是 显示还是隐藏(true:显示、false:隐藏)
语法：<html标签名 v-if=”true|false”></html标签名>
v-show: 控制html元素是 显示还是隐藏(true:显示、false:隐藏)
语法：<html标签名 v-show=”true|false”></html标签名>
****v-if与v-show的区别?
v-if: 显示(添加html元素) 隐藏(删除html元素)
v-show: 显示(把dispaly:none删除) 隐藏(style=“dispaly:none”)
***应用场景:就是隐藏html元素，因为默认是显示的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs显示与隐藏</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="flag">我可是最牛div层一</div>
<div v-show="flag">我可是最牛div层二</div>
<input type="button" @click="toggle()" value="开关"/>
</div>
<script type="text/javascript">
var vue = new Vue({
el : '#app',
data : {
flag : true
},
methods : {
toggle : function () {
this.flag = !this.flag;
}
}
});
</script>
</body>
</html>
条件指令
注意：v-else和v-else-if是不能脱离v-if单独使用的
-
v-if: 条件成立输出该html标签中的内容。
-
v-else-if: 如果v-if条件不成立，才会判断该条件，如果条件成立输出该html标签中的内容。
-
v-else: 如果v-if或v-else-if条件不成立，输出该html标签中的内容。
扩展：在js中=，==，===的区别
=是赋值运算符，==是关系运算符; ===是全等运算符。
””与”=”是不同的,一个是判断值是否相等,一个是判断值及类型是否完全相等。第一个是相等符；第二个全等符；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs条件指令</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 1. v-if / v-else-if / v-else -->
<div>
<span v-if="sex == 1">男</span>
<span v-else-if="sex == 0">女</span>
<span v-else>保密</span>
</div>
<!-- 2. v-if / v-else-if -->
<div>
<span v-if="sex == 1">男</span>
<span v-else-if="sex == 0">女</span>
</div>
<!-- 3. v-if / v-else -->
<div>
<span v-if="sex == 1">男</span>
<span v-else>保密</span>
</div>
</div>
<script type="text/javascript">
var vue = new Vue({
el : '#app', // 渲染的html元素
data : { // 数据对象
sex : 0 // 性别
}
});
</script>
</body>
</html>
vue的 computed 计算属性
作用：简化插值运算符{ {} }里面的运算表达式
语法; 有两种， 但是无论哪一种，都不是代表函数，都是一个属性
注意：他的本质使用和缓存，吧结果缓存起来，只有data里面拿到数据放生了变化才会更新缓存
computed: {
key1: function(){
return "计算后的数据";
},
key2(){
return "计算后的数据";
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs计算属性</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 插值表达式 -->
<h2>{ {new Date(milliseconds).getFullYear() + "年"
+ new Date(milliseconds).getMonth()
+ "月" + new Date(milliseconds).getDate()} }</h2>
<!-- 计算属性 (注意：它不是一个函数) -->
<h2>{ {time} }</h2>
</div>
<script type="text/javascript">
var vue = new Vue({
el : '#app', // 渲染的html元素
data : { // 数据对象
milliseconds : 1573878276849,
},
computed : { // 计算属性
time (){ // time属性
const date = new Date(this.milliseconds);
return date.getFullYear() + "年" + date.getMonth() + "月" + date.getDate();
}
}
});
</script>
</body>
</html>
计算属性需要我们自己主动调用，生命周期钩子函数不会主动调用计算属性。
计算属性本质是函数，但是一定要返回数据。页面渲染时，只能把这个函数当成一个属性来使用。
vue的 watch 监控属性
作用：监控data（数据对象）中属性值发生改变
前提：页面要用了v-modle来修饰
语法： 有两种，这是对于当v-model指定的是一个vue中data的属性名 或者 vue中data的属性名.变量名
watch : {
key1 : function(newVal, oldVal){ // vue中data的属性名
}, //"obj.key1" 是vue中data中的对象属性以及其键
"obj.key1" : function(newVal, oldVal){ //vue中data的属性名.变量名 } <br><br> }
使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs监控属性</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="message"/><br/>
<h2>{ {message} }</h2>
<input type="text" v-model="user.name"/><br/>
<input type="text" v-model="user.age"/><br/>
<h2>
姓名: { {user.name} } ==> 年龄: { {user.age} }
</h2>
</div>
<script type="text/javascript">
var vue = new Vue({
el : '#app', // 渲染的html元素
data : { // 数据对象
message : '',
user : {name : '', age : ''}
},
watch : { // 监控属性
message : function(newVal, oldVal){
console.log("新值:" + newVal + ",旧值:" + oldVal);
},
"user.name" : function(newVal, oldVal){
console.log("user.name:" + newVal + ",user.name:" + oldVal);
}
}
});
</script>
</body>
</html>
扩展：
- 了解Vuejs的生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程: 创建实例，装载模板，渲染模板等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。
- vue实例的执行步骤：
问题
问题1：页面初始化数据，可以在哪些钩子函数中提前加载?-----------------created | beforeMount
问题2:data数据对象发生改变，可以在哪些钩子函数中监听?----------------beforeUpdate updated
扫一扫
141
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
