Vue框架av88732281笔记
时间:2022-07-26
本文章向大家介绍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>
- 数据结构 栈&队列
- 终端品牌域名过期被拍卖 价值六位数
- TensorFlow 深度学习笔记 TensorFlow实现与优化深度神经网络
- ASP.NET的路由系统:路由映射
- ASP.NET Core的配置(3): 将配置绑定为对象[上篇]
- ASP.NET的路由系统:URL与物理文件的分离
- 使用Excel分析CloudStack使用记录
- 卷积神经网络初探索
- TensorFlow 深度学习笔记 逻辑回归 实践篇
- 黑客是如何实施暴力破解的?
- Python的初学者你现在可以自己“看”到代码的运行了!
- ASP.NET Core的配置(3): 将配置绑定为对象[下篇]
- TensorFlow 深度学习笔记 从线性分类器到深度神经网络
- 微信版12306来了!用12306微信小程序买票靠谱吗
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- ggplot2| 绘制KEGG气泡图
- 微服务[学成在线] day03:CMS页面管理开发
- ggplot2|绘制GO富集柱形图
- 使用Prometheus监控Flink
- 微服务[学成在线] day04:页面静态化
- Spring Boot 整合Mybatis代码生成插件
- Spring Boot 配置文件
- Hello Spring Boot
- Spring Boot 整合Druid
- Spring Boot 整合JDBC
- Spring Boot 整合SpringSecurity
- jacoco-maven-plugin:prepare-agent
- 【LeetCode】两数之和
- 【LeetCode】回文数
- RestTemplate 发送 Https 请求调用