Vue基本语法

本文最后更新于:5 个月前

文档官网已经足够详细,所以这里直接上代码

这里主要介绍基础语法,这个基础语法已经很好用了
大道至简,所以我们就聊一聊这个至简后的大道

Vue语法介绍

如果使用过Jsp之类的Java模板引擎,那么对Vue肯定不陌生。如果没学过呢,也不用慌。Vue的不难,难的是前端开发思想上的转变。

再说几句废话

起码要有一丢丢的web开发经历,注意是web开发,web开发不是单纯的指html,css,javasrcipt,这三剑客,还有,服务器,页面与服务器之间的交互。起码要有servlet的开发经历,知道服务器和页面之间怎么传值再来看Vue,记住MVVM模式是MVC模式的进化版,一口气吃不成胖子的啦。先把MVC搞个七七八八。

Vue长这个样子

这是Vue的基本模式,官方建议主要用来学习,其实就算只是基本模式,在我们处理数据的时候就已经十分好用了。淦,好冻手,连个空调都木得,绝了,不打了,上班有空调我在打字吧,手冻的通红。

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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 这些都是cdn,就是说代码可以直接拷贝下来玩哦 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<!--兴趣才是最好的老师嘛,我尝试用Vue写一些小Demo,希望你们喜欢 -->
<div id="app">
<div class="row" style="padding: 0.625rem;">
<div class="col-md-3" style="padding-top: 0.625rem;" style="padding-top: 0.625rem;">
<div class="card" style="width: 18rem; height: ;">
<div class="card-body">
<h5 class="card-title">普通的模板语法</h5>
<h6 class="card-subtitle mb-2 text-muted">'{{}}'</h6>
<p class="card-text">{{msg}}</p>
<a href="#" class="card-link" onclick="app.msg= app.msg + ', 玻璃瓶里插满小小森林' ">加一句</a>
<a href="#" class="card-link" onclick="app.msg = '竹篱上停留着蜻蜓'">复原</a>
</div>
</div>
</div>
<div class="col-md-3" style="padding-top: 0.625rem;">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">绑定元素的属性</h5>
<h6 class="card-subtitle mb-2 text-muted">v-bind:</h6>
<p class="card-text" v-bind:title="de">鼠标放上来看看</p>
<a href="#" class="card-link" onclick="app.de = '从前从前有个人爱你很久'">点一下再试试</a>
<a href="#" class="card-link" onclick="app.de='但偏偏风渐渐把距离吹得好远'">同左边</a>
</div>
</div>
</div>
<div class="col-md-3" style="padding-top: 0.625rem;">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">条件渲染</h5>
<h6 class="card-subtitle mb-2 text-muted">v-if ; v-else</h6>
<p class="card-text" v-if="flag">而我听见下雨的声音</p>
<p class="card-text" v-else>想起你用唇语说爱情</p>
<a href="#" class="card-link" onclick="app.flag = false">出现下一句</a>
<a href="#" class="card-link" onclick="app.flag = true">复原</a>
</div>
</div>
</div>
<div class="col-md-3" style="padding-top: 0.625rem;">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">循环普通变量</h5>
<h6 class="card-subtitle mb-2 text-muted">v-for</h6>
<p class="card-text" v-for="item in items">
{{item}}
</p>
<a href="#" class="card-link" onclick="app.items.push('好不容易')">好不容易</a>
<a href="#" class="card-link" onclick="app.items.push('又能在多爱一天')">多爱一天</a>
<a href="#" class="card-link" onclick="app.items = ['从前从前','有个人爱你很久','偏偏风渐渐把距离吹得好远']">复原</a>
</div>
</div>
</div>
<div class="col-md-3" style="padding-top: 0.625rem;">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">循环对象</h5>
<h6 class="card-subtitle mb-2 text-muted">v-for</h6>
<p class="card-text">一个对象就够了,你还想遍历你的对象啊</p>
<p class="card-text" v-for="item in items2">
{{item.title}} ----{{item.auther}}
</p>
<a href="#" class="card-link" onclick="app.items2.push({title: '床边故事',auther: '小周周'})">加一张专辑</a>
<a href="#" class="card-link" onclick="app.items2.pop()">减一张专辑</a>
</div>
</div>
</div>
<div class="col-md-3" style="padding-top: 0.625rem;">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">用户交互</h5>
<h6 class="card-subtitle mb-2 text-muted">v-on</h6>
<p class="card-text">{{msg2}}</p>
<a href="#" class="card-link" v-on:click="test1">反转消息</a>
<a href="#" class="card-link" v-on:dblclick="test2">双击看看</a>
</div>
</div>
</div>
<div class="col-md-3" style="padding-top: 0.625rem;">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">用户输入</h5>
<h6 class="card-subtitle mb-2 text-muted">v-model</h6>
<p class="card-text">
<input type="text" v-model="msg3"/>
<p>这里显示你输入的内容:{{msg3}}</p>

</p>
<a href="#" class="card-link" v-on:click="test3">一键输入我爱你</a>
<a href="#" class="card-link" v-on:click="msg3 = ''">清空</a>
</div>
</div>
</div>
<div class="col-md-3" style="padding-top: 0.625rem;">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">组件化</h5>
<h6 class="card-subtitle mb-2 text-muted">一生二,二生四,四象生八卦,八卦衍万物</h6>
<p class="card-text">
<!-- 这里引入了组件 并输出count下一 -->
<p v-for="item in count">
<com1>
</com1>
</p>
</p>
<a href="#" class="card-link" onclick="app.count++">加一条</a>
<a href="#" class="card-link" onclick="app.count--">减一条</a>
</div>
</div>
</div>
<h2 style="display: flex; margin: auto;">准备好了吗</h2>
<p style="display: flex; margin: auto;">
我们刚才简单介绍了 Vue 核心最基本的功能——本教程的其余部分将更加详细地涵盖这些功能以及其它高级功能,所以请务必读完整个教程!
</p>
</div>
</div>
</body>
<script type="text/javascript">
let com2 = Vue.component('com2',{
template: '<h6>我是一个无聊的组件2</h6>'
})
Vue.component('com1',{
template: `<h5>我是一个无聊的组件,<com2></com2></h5>`,
// 在组件1中引入组件2,
components: {
com2
}
})

const app = new Vue({
// 这里就是绑定了上面的id,
el: "#app",
data: {
msg: '竹篱上停留着蜻蜓',
msg2: '你爱我',
msg3: '',
count: 2,
de: new Date(),
flag: true,
items: [
'从前从前',
'有个人爱你很久',
'偏偏风渐渐把距离吹得好远'
],
items2: [
{
title: '依然范特西',
auther: '周婕纶'
},
{
title: '叶惠美',
auther: '周杰伦'
},
{
title: '七里香',
auther: '周杰棍'
}


]
},
methods:{
// 反转消息事件
test1: function () {
this.msg2 = this.msg2.split('').reverse().join('')
},
// 双击事件
test2: function () {
let name,age;
name=prompt("请问你叫什么名字?"); /*在页面上弹出提示对话框,
将用户输入的结果赋给变量name*/
alert(name); //输出用户输入的信息
age=prompt("你今年多大了?","请在这里输入年龄"); /*在页面上再一次弹出提示对话框,
讲用户输入的信息赋给变量age*/
alert(age)//输出用户输入的信息
},
test3: function () {
this.msg3 = '从前从前,有个人爱你很久'
}
}
})
</script>
</html>

详解

详解,官网就是最好的详解,这个只是演示了Vue的基础语法。在使用中,已经很方便了。起码不用手动拼接字符串,已经非常好用了。提一下,v-if和v-show,这两个,在基本模式中,建议不要使用v-if,会有坑。好了,demo没有什么实用价值,就是一些简单的Vue演示,你用jQuery也可以做到,但肯定没有用Vue这么方便。

未完待续

老规矩,献上封面原图

LOL英雄联盟塞尔菲娅


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!