后端学前端：Vue学习总结（一）
Tags: Vue
一、前言
MVVM
MVVM（Model-View-ViewModel） 是一种软件架构设计模式，是一种事件驱动编程方式。
MVVM来源于经典的MVC模式，其中心在VM（ViewModel）层，作用有二：与View层进行双向数据绑定；与Model层通过接口进行数据交互。
何为双向绑定？
单向绑定非常容易理解，就是把Model层绑定到View层。Model变，View跟着变。
那么双向绑定，就是在单向绑定的基础上，将View层绑定到Model层。View变，Model跟着变。
怎么理解？
以表单为例，我们在输入框中编辑信息（View变），这些信息会同步到表单的内部逻辑代码中（Model变）。
为什么是Vue？
- Vue综合了Angular的模块化和React的虚拟DOM，博采众长
- Vue只关注视图层，遵从关注点分离（Soc）原则
- 生态丰富
- 对后端程序员友好-
二、Hello World
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--通过CDN引入Vue-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<!--Vue要绑定的元素-->
<div id="app">{{message}}</div>
<script>
//新建Vue对象
var vm = new Vue({
el:"#app",//绑定的元素
data:{
message:"Hello World"//与模板引擎类似，单向绑定
}
})
</script>
</body>
</html>
在浏览器控制台随意更改"vm.message"的值，发现页面会实时同步。
三、基本语法
v-bind
作用：绑定元素属性，比如style，class，title等。
官网API链接：
代码：
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--通过CDN引入Vue-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<!--Vue要绑定的元素-->
<div id="app">
<!--一定要在绑定了Vue的元素里写-->
<!--绑定了title属性-->
<span v-bind:title="message">你好啊</span>
</div>
<script>
var vm = new Vue({
el:"#app",//绑定的元素
data:{
message:"Hello World"//与模板引擎类似，单向绑定
}
})
</script>
</body>
</html>
v-if、v-else和v-else-if
作用：嗯，就是if、else和else if（条件渲染）
官网API链接：
代码：
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--通过CDN引入Vue-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<!--Vue要绑定的元素-->
<div id="app">
<!--简单true或者false-->
<span v-if="ok">if表达式为真</span>
<span v-else>if表达式为假</span>
<!--加入表达式-->
<!--注意判断是三个等号-->
<span v-if="item==='A'">A</span>
<span v-else-if="item==='B'">B</span>
<span v-else="item==='C">C</span>
</div>
<script>
var vm = new Vue({
el:"#app",//绑定的元素
data:{
ok:true,//直接传一个true或者false
item:'B'
}
})
</script>
</body>
</html>
v-for
作用：循环渲染（列表渲染）
官网：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 普通循环-->
<li v-for="item in items">{{item}}</li>
<!-- 加入元素索引-->
<li v-for="(item, index) in items">
{{index}}----{{item}}
</li>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
items:["Java","Python","C++"]
}
})
</script>
</body>
</html>
v-on
作用：绑定事件
官网：
浏览器事件参考：
代码：
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 绑定了浏览器的按钮点击事件-->
<button v-on:click="sayHello">点击</button>
</div>
<script>
var vm = new Vue({
el:"#app",
methods:{
sayHello:function (event) {
alert("Hello!!");
}
}
})
</script>
</body>
</html>