Vue框架av88732281笔记
Vue 官网 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
基础知识
Vue初识
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01vue初识</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
console.log(new Vue)
var app = new Vue({
el: '#app',
data: {
message: "Hello,Vue!"
}
})
</script>
</body>
</html>我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。
我们要怎么确认呢？打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。
条件判断
v-if不显示时，第一次就直接不渲染，如果内容已显示改为不显示，将内容直接从DOM去除。v-show不显示时，就会改为display:none，但是会渲染在DOM上。
建议：反复需要切换的内容使用 v-show，只是渲染一次用 v-if
v-if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02条件渲染</title>
</head>
<body>
<div id="app">
<h1>用户名: {{ username }}</h1>
<h3 v-if="isVip">用户类型 VIP</h3>
<!-- 注意 v-if 和 v-else 中间不能有其他的元素-->
<h3 v-else>用户类型 普通用户</h3>
<hr>
<h1>用户年龄判断</h1>
<h3 v-if="age > 18">age > 18</h3>
<h3 v-else-if="age > 14">age > 14</h3>
<h3 v-else>age < 14</h3>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
console.log(new Vue)
var app = new Vue({
el: '#app',
data: {
username: "Ray",
isVip: true,
age: 24
}
})
</script>
</body>
</html>注意： v-if 和 v-else 中间不能有其他的元素
v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02条件渲染</title>
<style>
#pane {
width: 200px;
height: 200px;
background: skyblue;
}
</style>
</head>
<body>
<div id="app">
<div v-show="isShow" id="pane">
Hello,Vue
</div>
<button @click="showPane">切换显示内容</button>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
console.log(new Vue)
var app = new Vue({
el: '#app',
data: {
isShow: true
},
methods: {
showPane: function (){
app.isShow = !app.isShow;
}
}
})
</script>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-09-14|，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录