介绍
Vue.js 是什么？
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
起步
创建一个html文件，并将以下代码引入即可，这是最简单的vue环境
1
| <script src="https://cdn.jsdelivr.net/npm/vue"></script>
|
简单的例子1~7
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
| <!-- 指定vue管理内容区域，需要通过vue展示的内容都要放到找个元素中 通常我们也把它叫做边界 数据只在边界内部解析-->
<div id="app-1">{{msg}}</div>
<div id="app-2">
<span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
</div>
<div id="app-3">
<span v-if = "seen">现在你可以看到我</span>
</div>
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{todo.text}}
</li>
</ol>
</div>
<div id="app-5">
<p>{{message}}</p>
<button v-on:click="reverseMessage">翻转 message</button>
</div>
<script src="/common/js/vue.js"></script>
<script>
var vm = new Vue({
//el:提供一个在页面上已存在的DOM元素作为Vue实例的挂载目标
el: '#app-1',
//Vue实例的数据对象，用于给View 提供数据
data: {
msg: "Hello Vue"
}
})
var app2 = new Vue({
el: '#app-2',
data: {
message: "页面加载于" + new Date().toLocaleString()
}
})
//vue使用判断
var app3 = new Vue({
el: '#app-3',
data:{
seen: true
}
})
var app4 = new Vue({
el: '#app-4',
data:{
todos: [
{text: '学习 Javascript'},
{text: '学习 Vue'},
{text: '创建激动人心的代码'}
]
}
})
var app5 = new Vue({
el: "#app-5",
data: {
message: "Hello Vue.js",
},
methods:{
reverseMessage: function(){
this.message = this.message.split('').reverse().join("")
}
}
})
</script>
|