快速入门VUE（MVVM模式实现者）
程序员文章站
2022-03-05 23:25:31
...
一、导入Vue
- 引用文件，自行去网上下载
- 引用cdn：
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
二、创建Vue实例
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：
var vm = new Vue({
// 选项
})
虽然没有完全遵循 MVVM（MV VM） 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。
三、Vue常用属性
这里介绍下面需要用到的Vue属性：
- el属性：用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。相当于一个容器，跟上面的div id = "app"做关联，从此以后上面div id = "app"里面的内容要通过vue来渲染,都要经过vue处理才能看得到上面div里面的内容
- data属性：用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。跟微信小程序一样，所有的变量都要写在data里面
- methods属性：放置页面中的业务逻辑，js方法一般都放置在methods中，用来写方法，函数的
四、Hello Vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{{msg}}
</div>
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "hello Vue"
}
});
</script>
</body>
</html>
五、vue指令 v-bind
它是一个 vue 指令，用于绑定 html 属性，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="head">
<a v-bind:href="msg">
点击
</a>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#head",
data: {
msg: "https://kexing.site/"
}
});
</script>
</body>
</html>
这里的a标签会渲染成：
六、if - else if - else for
一个程序最基本的就是逻辑判断与循环，作为一个后端，Vue的else if语法在2.1.0版本才新增是不是很惊讶，这里跟java的逻辑判断一样，只不过Vue需要用v指令来使用。如下：
1、逻辑判断
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="head">
<h1 v-if="score===100">优秀</h1>
<h1 v-else-if="score===90">良好</h1>
<h1 v-else>及格</h1>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#head",
data: {
score: 90
}
});
</script>
</body>
</html>
2、for循环
我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。和python的for有点类似
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="head">
<li v-for="(item,index) in items">
{{item.msg}} -- {{index}}
</li>
</ul>
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#head",
data: {
items: [
{
msg: "kexing'blog:"
},
{
msg: "www.kexing.site"
}
]
}
});
</script>
</body>
</html>
这里我们遍历items对象数组，index为遍历的索引值（从0开始）
七、事件绑定（监听事件）
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
如例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="head">
<button v-on:click="sayHai()">click me</button>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#head",
data: {
msg: "hello welcome!"
},
methods: {
sayHai: function () {
alert(this.msg)
}
}
});
</script>
</body>
</html>
vue的js方法统一放到methods属性中，用name：function形式定义，需要监听的时间用v-on指令：引用即可
更多细节部分请移步官网：VUE
上一篇： jQuery ajaxSend 失效
下一篇： 在Firefox中关闭缓存