前端学习之VUE基础一：什么是Vue、指令、事件/样式/属性绑定、分支/循环结构
文章目录
- 一、Vue:
- 1. vue 是什么？
- 2. Vue基本使用
- 3. :使用Vue将helloworld 渲染到页面上:
- 3.1 模板语法概述:
- 二、指令：
- 1. 什么是指令：
- 2. v-cloak 防止闪动：
- 3. 渲染:
- 3.1 v-text 将数据填充到标签中:
- 3.2 v-html 将HTML片段填充到标签中:
- 3.3 v-pre 跳过编译过程:
- 4. 数据响应式:
- 4.1 如何理解数据响应式:
- 4.2 什么是数据绑定;
- 4.3 v-once: 只编译一次
- 5. 双向数据绑定:
- 5.1 v-model:
- 5.2 mvvm
- 三、事件绑定:
- 1. v-on
- 1.1 v-on基本用法:
- 1.2 v-on事件函数调用:
- 1.3 事件修饰符:
- 1.4 按键修饰符:
- 1.4 自定义按键修饰符别名
- 1.5 案例:简单计算器:
- 四、属性绑定:
- 1. v-bind
- 2. v-model的底层实现原理分析:
- 五、样式绑定:
- 1. 绑定对象:
- 1.1 v-bind 中支持绑定一个对象
- 1.2 v-bind 中支持绑定一个数组:
- 1.3 样式绑定相关语法细节:
- 1.3 绑定对象和绑定数组 的区别
- 2. 绑定style:
- 六、分支/循环结构:
- 1. 分支结构:
- 1.1 v-if 使用场景
- 1.2 v-show 和 v-if的区别
- 2. 循环结构:
- 2.1 v-for遍历数组:
- 2.2 key的作用:
- 七、案例: Tab选项卡:
- 1. 需求:
- 2. 实现步骤:
- 3. 实现过程:
- 3.1 静态ui:
- 3.2 把数据渲染到页面:
- 3.3 给每一个tab栏添加事件,并让选中的高亮:
- 3.4 点击每一个tab栏 当前的高亮 其他的取消高亮
- 4. 实现:
一、Vue:
1. vue 是什么？
- Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架;
- vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合;
- 渐进式: 声明式渲染 -> 组件系统 -> 客户端路由 -> 集中式状态管理 -> 项目构建
- 官网: https://cn.vuejs.org/
2. Vue基本使用
<head>
<title>01_hello VUEtitle>
<script src="../vue.js">script>
head>
<body>
<div id="app">
<div>{{msg}}div>
div>
<script>
// Vue的基本使用步骤:
// 1. 需要提供标签用于填充数据;
// 2. 引入vue.js库文件;
// 3. 可以使用vue的语法做功能;
// 4. 把vue提供的数据填充到标签里面;
var vm = new Vue({
el: "#app",
data: {
msg: "Hello Vue"
}
})
script>
body>
- 实例参数分析:
- el: 元素的挂载位置(值可以使css选择器或DOM元素);
- data: 模型数据(值是一个对象)
- 插值表达式用法:
- 将数据填充到html标签中;
- 插值表达式支持基本的计算操作;
- Vue代码运行原理分析:
3. :使用Vue将helloworld 渲染到页面上:
3.1 模板语法概述:
如何理解前端渲染:
把数据填充到HTML标签中
前端渲染方式:
- 原生js拼接字符串;
- 使用前端模板引擎;
- 使用vue特有的模板语法;
vue模板语法:
- 插值表达式;
- 指令;
- 事件绑定;
- 属性绑定;
- 分支循环结构;
二、指令：
1. 什么是指令：
- 本质就是自定义属性
- Vue中指定都是以 v- 开头；
2. v-cloak 防止闪动：
防止页面加载时出现闪烁问题：
<style type="text/css">
/*
1、通过属性选择器 选择到 带有属性 v-cloak的标签 让他隐藏
*/
[v-cloak]{
/* 元素隐藏*/
display: none;
}
style>
<body>
<div id="app">
<div v-cloak >{{msg}}div>
div>
<script type="text/javascript" src="js/vue.js">script>
<script type="text/javascript">
var vm = new Vue({
// el 指定元素 id 是 app 的元素
el: '#app',
// data 里面存储的是数据
data: {
msg: 'Hello Vue'
}
});
script>
body>
html>
3. 渲染:
3.1 v-text 将数据填充到标签中:
- v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题;
- 如果数据中有HTML标签会将html标签一并输出;
- 注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值;
<head>
<title>01_hello VUEtitle>
<script src="../vue.js">script>
head>
<body>
<div id="app">
<div>{{msg}}div>
<div v-text="msg">div>
div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "Hello Vue"
}
})
script>
body>
3.2 v-html 将HTML片段填充到标签中:
- 用法和v-text 相似 但是他可以将HTML片段填充到标签中;
- 可能有安全问题, 一般只在可信任内容上使用 v-html，永不用在用户提交的内容上;
- 它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出;
<div id="app">
<p v-html="html">p>
<p>{{message}}p>
<p v-text="text">p>
div>
<script>
let app = new Vue({
el: "#app",
data: {
message: "通过双括号绑定",
html: "html标签在渲染的时候被解析",
text: "html标签在渲染的时候被源码输出",
}
});
script>
3.3 v-pre 跳过编译过程:
- 显示原始信息跳过编译过程;
- 跳过这个元素和它的子元素的编译过程;
- 一些静态的内容不需要编译加这个指令可以加快渲染;
<span v-pre>{{ this will not be compiled }}span>
<span v-pre>{{msg}}span>
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js'
}
});
script>
4. 数据响应式:
4.1 如何理解数据响应式:
- html5中的响应式(屏幕尺寸的变化导致样式的变化);
- 数据的响应式(数据的变化导致页面内容的变化);
4.2 什么是数据绑定;
- 数据绑定: 将数据填充到标签中;
4.3 v-once: 只编译一次
显示内容之后不再具有响应式;
<div v-once>{{info}}div>
5. 双向数据绑定:
- 当数据发生变化的时候，视图也就发生变化;
- 当视图发生变化的时候，数据也会跟着同步变化;
5.1 v-model:
- v-model是一个指令，限制在 、