1.Vue介绍
Vue.js 是用于构建交互式的 Web 界面的库。
Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单、灵活的 API。
2.Vue使用
<body>
<!-- 容器 ,app容器名称-->
<!-- 注:容器名称尽量使用id绑定唯一值 -->
<div id="app">
<!-- {{}}插值语法 -->
{{ message }}---
<h1>
{{names}}
</h1>
</div>
<div id="abc" class="box1">
{{ message }}
</div>
</body>
<body>
<!-- 容器 ,app容器名称-->
<!-- 注:容器名称尽量使用id绑定唯一值 -->
<div id="app">
<!-- {{}}插值语法 -->
{{ message }}---
<h1>
{{names}}
</h1>
</div>
<div id="abc" class="box1">
{{ message }}
</div>
</body>
3.Vue条件语句
3.1 v-if
条件判断使用 v-if 指令:
<div id="app">
<p v-if="seen">现在你看到我了</p>
<template v-if="ok">
<h1>菜鸟教程</h1>
<p>学的不仅是技术,更是梦想!</p>
<p>哈哈哈,打字辛苦啊!!!</p>
</template>
</div>
<script>
new Vue({
el: '#app',
data: {
seen: true,
ok: true
}
})
</script>
3.2 v-else
可以用 v-else 指令给 v-if 添加一个 "else" 块:
<div id="app">
<div v-if="Math.random() > 0.5">
Sorry
</div>
<div v-else>
Not sorry
</div>
</div>
<script>
new Vue({
el: '#app'
})
</script>
3.3 v-else-if
v-else-if 在 2.1.0 新增,顾名思义,用作 v-if 的 else-if 块。可以链式的多次使用:
<div id="app">
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
type: 'C'
}
})
</script>