Vue语法
Vue语法
MVVM
1.什么是MVVM
MVVM (Model-View-ViewModel) 是一种软件架构设计模式，由微软WPF (用于替代WinForm，以前就是用这个技术开发桌面应用程序的)和Silverlight (类似于Java Applet,简单点说就是在浏览器上运行的WPF)的架构师Ken Cooper和Ted Peters 开发，是一种简化用户界面的事件驱动编程方式。由John Gossman (同样也是WPF和Silverlight的架构师)于2005年在他的博客上发表。
MVVM 源自于经典的MVC (ModI-View-Controller) 模式。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用，其作用如下:
- 该层向上与视图层进行双向数据绑定
- 向下与Model层通过接口请求进行数据交互
2.MVVM好处
MVVM模式和MVC模式一样，主要目的是分离视图(View)和模型(Model),有几大好处：
- 低耦合:视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的
View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。 - 可复用:你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑。
- 独立开发:开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计。
- 可测试:界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。
Vue.js 就是一个MVVM的实现者，他的核心就是实现了DOM监听与数据绑定
第一个Vue程序
1.创建一个空的新文件夹，用idea引入
2.创建一个新的html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
3.引入Vue.js
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
4.编写项目
的id为 `vue` ，进行一个el绑定，data中`message`为固定值，在被绑定的div中使用`{{message}}`显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="vue">
{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#vue",
data: {
message: "第一个Vue项目"
}
});
</script>
</body>
</html>
直接默认浏览器打开该静态页面:
Vue基本语法
1.v-bind
现在数据和DOM已经被建立了关联，所有的东西都是响应式的。我们在控制台操作对象的属性，界面可以实时更新。
我们可以使用v-bind来绑定元素属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="vue">
<span v-bind:title="message">停这儿别动，这里有个提示信息！</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#vue",
data: {
message: "第一个Vue项目"
}
});
</script>
</body>
</html>
2. v-if、v-else
message的值为 B ，在 div 中利用 v-if 进行判断 ，
- 如果为 message=='A' 则显示 A；
- 如果为 message=='B' 则显示 B；
- 如果不是 A 也不是 B ，则显示 C；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="vue">
<h1 v-if="message=='A'">A</h1>
<h1 v-else-if="message=='B'">B</h1>
<h1 v-else>C</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#vue",
data: {
message: "B"
}
});
</script>
</body>
</html>
3. v-for
data中加入 items 数组信息，然后利用 v-for 进行循环输出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="vue">
<li v-for="item in items">
姓名：{{item.name}}，年龄：{{item.age}}
</li>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#vue",
data: {
items: [
{name: "zc", age: 20},
{name: "dongdong", age: 10},
{name: "lili", age: 16}
]
}
})
</script>
</body>
</html>
4. v-on 事件绑定
- data中message信息为boom！！
- methods对象中绑定方法
- 被绑定的div中加入button，利用
v-on调用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="vue">
<button v-on:click="sayHi">Click Me</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#vue",
data: {
message: "boom！！！！"
},
methods: {
//方法必须绑定在Vue的Methods对象中，v-on:事件
sayHi: (function () {
alert(this.message)
})
}
})
</script>
</body>
</html>
5. 双向绑定 v-model
在Vue.js 中，如果使用vuex ，实际上数据还是单向的，对于我们处理表单，Vue.js的双向数据绑定用起来就特别舒服了
即两者并不互斥，在全局性数据流使用单项,方便跟踪;局部性数据流使用双向，简单易操作。
你可以用v-model指令在表单 <input>、<textarea> 及<select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
注意：v-model会忽略所有元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源，你应该通过JavaScript在组件的data选项中声明。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="vue">
输入框:
<input type="text" value="" v-model="text">
<p>value:{{text}}</p>
<br>
文本域：
<textarea v-model="textarea"></textarea>
<p>value:{{textarea}}</p>
<br>
单选框：
<input type="radio" name="sex" value="男" v-model="radio">男
<input type="radio" name="sex" value="女" v-model="radio">女
<p>value:{{radio}}</p>
<br>
下拉框：
<select v-model="selected">
<option value="" disabled>-请选择-</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<p>value:{{selected}}</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#vue",
data: {
text: "",
textarea:"",
radio: "",
selected: ""
}
})
</script>
</body>
</html>
6.Vue组件
组件是可复用的Vue实例，说白了就是一组可以重复使用的模板，跟JSTL的自定义标签、Thymeleaf的th:fragment 等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织：
基础版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="vue">
<zc></zc>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
Vue.component("zc",{
template: '<h1>template</h1>'
})
var vm = new Vue({
el: "#vue"
})
</script>
</body>
</html>
拓展版
- 绑定div，data中加入数组信息
- 添加vue组件 zc
- 利用 v-for 循环数组， v-bind 绑定数组
- 在vue组件中用 props 接收，再添加到 template 中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="vue">
<zc v-for="item in items" v-bind:zc="item"></zc>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
Vue.component("zc",{
props: ['zc'],
template: '<li>{{zc}}</li>'
})
var vm = new Vue({
el: "#vue",
data: {
items: ['Java','Python','Php']
}
})
</script>
</body>
</html>
