1. 概述
1.1 简述
- vue是一款渐进式的JavaScript框架；
- 可以动态的构建用户界面
1.2 特点
- 遵循MVVM模式；
- 编码简洁，体积小，运行效率高，比较适合移动/PC端的开发；
- 本身只关注UI，可以引入vue插件或者其他第三库的开发项目。
1.3 Vue扩展插件
2. MVVM模型图
MVVM解释：
- model： 模型，数据对象，即data；
- view：视图，模板页面；
- vm：视图模型（Vue实例）
3. Hello Vue!
- 官网下载vue.js
https://cn.vuejs.org/v2/guide/installation.html
- 在项目中引入vue.js(我创建的SpringBoot项目)
- 创建test.html文件（路径如上图）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="message">
<p>{{message}} </p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
(1). var app = new Vue 创建vue实例;
(2). el: 选择器(element);
(3). data: 数据(model);
4. 模板语法
4.1 对于模板的一些理解
- 就是动态的html页面；
- 包含了一些JS语法：
(1). 双大括号表达式；
(2). 指令(以v-开头的自定义标签属性) - 双大括号表达式{{ }}
(1). 向页面输出数据;
(2). 可以调用对象的方法 - 指令
(1). 强制数据绑定
使用v-bind:[属性]，或者直接在属性前加一个冒号" : "；
(2). 绑定事件监听
使用v-on:click=“XXX”，或者使用@click=“XXX”,注意XXX表示要调用的方法，该方法写在methods中。
(3). 双向绑定
v-model限制在<input>、<select>、<textarea>、component中使用，主要实现了数据–>视图、视图—>数据的双向绑定
4.2 代码实操
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="test">
<h3>大括号表达式</h3>
<p>{{message}}</p>
<h3>强制数据绑定</h3>
<img :src="url" width="200px" height="200px"/>
<h3>绑定事件监听</h3>
<input type="text"v-model="message">
<button type="button" @click="test(message)">点击</button>
</div>
<script src="./js/vue.js"></script>
<script>
const vm = new Vue({
el: "#test",
data: {
message: "hello vue",
url: "http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg",
},
methods: {
test(val) {
alert(val);
}
}
});
</script>
</body>
</html>
运行结果：
![[Oracle] Insert All神奇](/images/no-images.jpg)
