关于mvvm的理解
说到mvvm,就要提到vue的优点了。
vue有什么优点呢?
:更改变量很容易,具有即时性。
这是我们广泛所知道的,vue的优点。
在原来只有jquery的时候,我们改变一个元素的值的时候,我们需要深入到原代码里,重新绑定元素啦,然后再用方法获取值拉,清空原有值。。。等等,再去替换。非常麻烦!
而且,原有值也不能实时替换,每出一次都要改动dom树的代码,十分繁琐。
此时,vue就给我们提供了一种模型,mvvm模型,这种模型可以将数据和页面实时绑定,将数据和页面用一个虚拟dom层分开,然后直接操作数据,就可以改变页面,直接操纵页面,也可以改变数据。
保证即时性的同时,操作也十分便捷。
这就是mvvm模型,很好的解决了原来存在的 繁琐和不即时问题,算是实现了vue的第一个优点。
2.1vue01
前提:有node.js
在你想使用vue的文件夹输入:
npm -i
npm i vue
下载vue。
当然,也可以导入依赖:
<!-- 导入依赖 -->
<script src="./node_modules/vue/dist/vue.js"></script>
然后就可以开始测试了。
基本写法:(按照这个位置套,之后也一样)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--这写个div(其他元素也行) -->
<script>
//写个vue对象和上面元素绑定
</script>
</body>
</html>
2.2.基本操作
-
单向绑定元素
元素
<div id="app">
<h1> {{name}} ,非常帅</h1>
</div>
vue对象
let vm = new Vue({
el: "#app",
data: {
name: "张三",
}
});
运行之后,你修改name,元素里的name值也跟着变换
- 双向绑定
元素
<h1> {{name}} ,非常帅,有{{num}}个人为他点赞</h1>
<input type="text" v-model="num">
vue对象
let vm = new Vue({
el: "#app",
data: {
name: "张三",
num: 1
}
});
双向绑定后,你修改num,
的值也会变
输入框里输入值,num值就会随着输入变化。
- 事件绑定
元素
<button v-on:click="num++">点赞</button>
<button v-on:click="cancel">取消</button>
vue对象
let vm = new Vue({
el: "#app",
data: {
name: "张三",
num: 1
},
methods:{
cancel(){
this.num -- ;
}
}
});
点击点赞按钮num会增加,点击取消按钮,会运行函数,num会减少