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>
- popcorn-js视频Video框架简单用法
- 一次数据库响应缓慢的问题排查(r2第9天)
- 通过Ajax方式上传文件(input file),使用FormData进行Ajax请求
- C# 读取指定文件夹下所有文件
- ASP.NET 实现Base64文件流下载PDF
- MVC自定义视图引擎地址
- JS禁止鼠标右键、禁止全选、复制、粘贴的方法(所谓的防盗功能)
- impdp异常中断导致的问题(r2第8天)
- 利用autocomplete.js实现仿搜索效果(ajax动态获取后端[C#]数据)
- sql语句的简化(r2第7天)
- Ajax jsonp 跨域请求实例
- asp.net动态解析用户控件(UserControl)
- 找到多个与名为“Home”的控制器匹配的类型的解决方案
- 关于sequence问题的紧急处理(r2第26天)
- 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 数组属性和方法
- 腾讯云TKE-GPU案例: TensorFlow 在TKE中的使用
- 使用pyppeteer 下载chromium 报错 或速度慢
- layui数据表格自定义每页条数limit设置
- dotnet OpenXML 幻灯片 PPTX 的 Slide Id 和页面序号的关系
- springboot 国际化
- Windows/Android/iOS全平台支持的视频播放器EasyPlayerPro,iOS版播放无音频问题如何解决?
- java之springboot之快速入门(一)- maven方式创建项目
- java之springboot之快速入门-Spring Initializr方式创建项目
- springboot之Web综合开发
- springboot之mybatis
- springboot之mybatis多数据源最简解决方案
- 蓝桥杯突击复习准备——部分算法汇总
- 小解c# foreach原理
- 多包依赖管理--Lerna
- Flume概述