vue零基础

vue 与其他框架的对比

框架设计模式数据绑定灵活度文件模式复杂性学习曲线生态
VueMVVM双向灵活单文件完善
ReactMVC单向较灵活all in js丰富
AngularMVC双向固定多文件较大较陡(Typescript)独立

更多对比细节:vue 官网:https://cn.vuejs.org/v2/guide/comparison.html

Vue 是一个推陈出新的前端框架,吸收了很多前端框架的优点。例如,Vue 借鉴了 React 的组件化和虚拟 DOM ,借鉴了 Angular 的模块化和数据绑定。因此,我们以 Vue.js 作为入手,以后深入学习其他框架,你会发现他们的共通之处,更好地高效地学习。

选择 Vue.js 的更多原因是,就框架的 API 而言,对比之下,Vue 更加轻便简洁。Vue 自身拥有开箱即用的生态开发包(Vuex,Vue-Router)等,复杂性低、学习成本低,是一门比较好入门的前端框架。

如果你刚开始学习前端开发,将框架作为你的第一步可能不是最好的选择,推荐进入实验楼前端基础知识课程。假入你已掌握了关于 HTMLCSSJavaScript 的中级知识,那让我们进入 Vue 的学习吧!

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例 开始的:

var app = new Vue({// 选项
});

vue框架就是很简单的,新手可以在html的head标签里面直接引入一个带有vue连接的script就ok

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统,我们新建一个.html 后缀的文件,输入以下代码,运行(右击文件 > open with > Preview 或 Mini Browser),你就会看到 {{msg}} 被渲染成 hello

<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>syl-vue-test</title><!-- 通过cdn方式引入 vue.js --><script src="https://labfile.oss.aliyuncs.com/courses/1262/vue.min.js"></script></head><body><div id="app">{{msg}}</div><script>var app = new Vue({el: "#app", //dom挂载点data: {//数据项msg: "hello syl",},});</script></body>
</html>

运行效果:

此处输入图片的描述

说明: el 为实例挂载点,上面表示挂载在 id 为 app 的 dom 元素中。data 选项为数据选项,存放绑定数据。除了这两个之外还有实例选项,methods(实例方法)、computed(计算属性) 等,后面我们会学习到。

双大括号

双大括号 {{ }} 在 Vue.js 中被用作文本插值的语法,这是一种在模板中输出数据到 HTML 的简单方式。当你在 Vue.js 的模板中使用 {{msg}} 时,Vue 会自动将其替换为与其绑定的数据属性 msg 的当前值。

在你给出的例子中:

  • <input type="text" v-model="msg" /> 这行 HTML 代码创建了一个文本输入框,并通过 v-model 指令将其值与 Vue 实例的 msg 数据属性双向绑定。这意味着,当你在输入框中输入文本时,msg 属性的值会实时更新,反之亦然。
  • <p>{{msg}}</p> 这行 HTML 代码将会在 <p> 标签中显示 msg 属性的值。当 msg 的值发生变化时(比如你在输入框中输入了文本),这个变化会立即反映在 <p> 标签中的内容上。

所以,双大括号 {{ }} 内的内容是动态的,并且是响应式的。它不仅仅是简单的文本输入,而是一个数据绑定的表达式,Vue 会监控这个表达式关联的数据属性,一旦属性值发生变化,模板中的内容也会自动更新。

总结来说,双大括号 {{ }} 用于在 Vue 模板中输出 JavaScript 表达式的结果。在 Vue.js 中,它是最基本的数据绑定形式,允许开发者将数据实时渲染到 DOM 中,非常适合构建动态交互的用户界面。

上面的双大括号表达式会将数据解释为普通文本,即使你的数据为 HTML 元素,也不会渲染成对应的标签元素,只能渲染成普通文本,而非 HTML 代码,例子:

<!doctype html> 
<html lang="en">  <head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>syl-vue</title><!-- 通过cdn方式引入 vue.js --><script src="https://labfile.oss.aliyuncs.com/courses/1262/vue.min.js"></script></head><body>     <!-- 数据绑定 --> <div id="app"><p>{{msg}}</p></div><script>var app = new Vue({el: "#app", //el: 挂载点data: {           //data:数据选项msg: "<h1>hello syl</h1>", //这个标签h1还是会作为h1文本进行输出的},});</script></body>
</html>

tips:

在 Vue.js 中,el 属性指的是“挂载点”,也就是 Vue 实例所要控制的 DOM 元素。这个 DOM 元素作为 Vue 实例的作用范围。在你的代码中,el: "#app" 告诉 Vue 实例要控制的 DOM 元素是页面上 idapp 的元素。Vue 实例会管理这个元素及其内部的所有内容。

data 属性是 Vue 实例的一个选项,用于声明所有这个实例要用到的数据。这些数据是响应式的,意味着当这些数据变化时,绑定这些数据的视图也会自动更新。

关于逗号的使用,JavaScript 中的对象由键值对构成,这些键值对就是属性名和它们对应的值。在对象字面量的表示法中,每个键值对之间都用逗号 , 分隔。例如:

var app = new Vue({el: "#app",  // 这里的逗号分隔了 el 和 data 两个不同的属性data: {msg: "<h1>hello syl</h1>",},  // 这里的逗号在实际中不是必需的,因为后面没有紧跟其他属性,但放置逗号是一种常见的做法,便于后续添加新属性
});

data 对象内部,如果你有多个属性,它们也会用逗号分隔。逗号是 JavaScript 对象以及许多其他结构(如数组)中分隔元素的标准方式。在实践中,最后一个属性后面的逗号是可选的,但有的开发者喜欢加上它,也可以不加上去,因为这样添加新属性时更方便。这通常被称为“尾逗号”(trailing comma)。

双大括号语法不能作用在 HTML 特性(标签属性)上,需要对标签属性操作,应该使用 v-bind 指令:

<div v-bind:class="syl-vue-course"></div>

HTML 标签属性为布尔特性时,它们的存在表示为 truev-bind 工作起来略有不同,在这个例子中:

<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>syl-vue</title><!-- 通过cdn方式引入 vue.js --><script src="https://labfile.oss.aliyuncs.com/courses/1262/vue.min.js"></script></head><body><!-- 布尔特性绑定--><div id="app"><input type="checkbox" v-bind:checked="isChecked" /></div><script>var app = new Vue({el: "#app",data: {isChecked: false, // isChecked是否选中boolean},});</script></body>
</html>

一些指令能够接收一个“参数”,在指令名称之后以冒号表示。例如,v-bind 指令可以用于响应式地更新 HTML 特性,在这里 href 是参数,告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定,例子:

<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>syl-vue</title><!-- 通过cdn方式引入 vue.js --><script src="https://labfile.oss.aliyuncs.com/courses/1262/vue.min.js"></script></head><body><!-- 指令 参数--><div id="app"><a v-bind:href="url">123</a></div><script>var app = new Vue({el: "#app",data: {url: "https://www.baidu.com",},});</script></body>
</html>

另外一个例子,v-on 指令,用于监听 DOM 事件,例子:

<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>syl-vue</title><!-- 通过cdn方式引入 vue.js --><script src="https://labfile.oss.aliyuncs.com/courses/1262/vue.min.js"></script></head><body><!-- 指令 参数--><div id="app"><p>我叫:{{name}}</p><!-- handleClick 使我们在实例 methods 中写的方法 --><button v-on:click="handleClick">点我</button><p v-bind:class="'col'+colNum">syl</p></div><script>var app = new Vue({el: "#app",data: {name: "实验楼",colNum: "12",},methods: {//实例方法对象handleClick: function () {this.name = this.name.split("").reverse().join("");},},});</script></body>
</html>

在 Vue.js 中,v-bind:class 用于动态地绑定 class 属性。这个指令后面通常跟着一个 JavaScript 表达式。

在你提供的代码中:

<p v-bind:class="'col'+colNum">syl</p>

'col' + colNum 是一个字符串拼接的表达式,它将 'col' 字符串与 colNum 数据属性的值拼接起来。如果 colNum 的值为 "12"(如你的 Vue 实例中定义的那样),那么这个表达式的结果就是字符串 "col12"

这意味着 Vue 会将这个计算后的字符串值绑定到 <p> 元素的 class 属性上。所以,最终渲染到 DOM 上的 HTML 会是这样的:

<p class="col12">syl</p>

这样你就可以根据 colNum 的值来动态地设置 <p> 元素的类名,这在响应式布局框架(如 Bootstrap)中非常有用,其中 col-12 类型的类名用于指定元素在网格系统中占据的列数。如果你改变了 colNum 的值,那么绑定的类名也会相应地改变。

类似的操作在这里:

在 Vue.js 中,除了 v-bind 用于绑定 HTML 特性外,还有许多其他指令和技术可以用来实现不同的动态行为和数据绑定。下面是一些常用的 Vue 指令和它们的用途:

  1. v-model

    • 用于在表单元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
    <input v-model="message" placeholder="编辑我...">
    
  2. v-for

    • 用于基于源数据多次渲染一个元素或模板块。可以用于渲染列表。
    <ul><li v-for="item in items">{{ item.text }}</li>
    </ul>
    
  3. v-if / v-else-if / v-else

    • 用于条件渲染一块内容。只有表达式返回真值时才渲染。
    <p v-if="seen">现在你看到我了</p>
    
  4. v-show

    • 类似于 v-if,但是它通过切换 CSS 的 display 属性来显示或隐藏元素。
    <p v-show="isVisible">你可以看到我吗?</p>
    
  5. v-on

    • 用于监听 DOM 事件,并在触发时执行一些 JavaScript 代码。
    <button v-on:click="doSomething">点击我</button>
    
  6. v-slot

    • 用于编写可复用的模板组件,允许子组件内部的内容通过插槽分发。
  7. v-pre

    • 跳过这个元素和它的子元素的编译过程。可以用来显示原始的 Mustache 标签。
    <span v-pre>{{ this will not be compiled }}</span>
    
  8. v-cloak

    • 保持在元素上直到关联实例结束编译。配合 CSS 规则 [v-cloak] { display: none } 可以隐藏未编译的 Mustache 标签直到 Vue 实例准备就绪。
  9. v-once

    • 执行一次性的插值,当数据改变时,插值处的内容不会更新。
    <span v-once>这个将不会改变: {{ msg }}</span>
    

每个指令都有其特定的用例和功能,使 Vue.js 强大而灵活,可以轻松地处理各种动态网页和应用的需求。通过组合使用这些指令,你可以构建出高度交互和响应式的用户界面。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/214852.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

matplotlib绘图时show函数需在save函数后

matplotlib绘图时&#xff0c;先调用show&#xff0c;后调用save函数保存图像&#xff0c;否则无法保存图像信息 figsize 23,10 #fig, axes plt.subplots(nrows1, ncols2) fig, axs plt.subplots(4, 3, sharexcol,shareyrow,figsizefigsize) # 在每个子图中绘制一个图形 pi…

Hbase2.5.5分布式部署安装记录

文章目录 1 环境准备1.1 节点部署情况1.2 安装说明 2 Hbase安装过程Step1&#xff1a;Step2:Step3:Step4&#xff1a; 3 Web UI检查状态并测试3.1 Web UI3.2 创建测试命名空间 1 环境准备 1.1 节点部署情况 Hadoop11&#xff1a;Hadoop3.1.4 、 zookeeper3.4.6、jdk8 Hadoop1…

JOSEF 静态延时中间继电器 JZS-7G/42 DC110V 导轨安装

系列型号&#xff1a; JZS-7G-57端子排延时中间继电器&#xff1b; JZS-7G-42X端子排延时中间继电器&#xff1b; JZS-7G-22X端子排延时中间继电器&#xff1b; JZS-7G-21端子排延时中间继电器&#xff1b; JZS-7G-41端子排延时中间继电器&#xff1b; JZS-7G-51端子排延…

git bash查看远程仓库地址

进入代码路径 git remote -vgit remote -v

排程系统中关于任务优先级的需求延伸与设计构思

无论是面向销售订单的MPS&#xff0c;还是基于多工序制约关系的APS&#xff0c;还是具体车间生产中针对单一工序的任务作业调度优化&#xff0c;都存在基于被排程对象(例如销售订单、生产工单、工序任务)的优先级进行优化的需求场景。当我们仅在宏观、较高层次的角度考虑&#…

高效扫频阻垢装置广谱感应水处理设备介绍工作原理使用参数和选型

​ 1&#xff1a;高效扫频阻垢装置设备介绍 高效扫频阻垢装置是一种通过控制箱释放变频电磁信号&#xff0c;传输到信号放大装置&#xff0c;管道外侧的电磁线圈和电锤产生高频机械振动&#xff0c;在管道和水中传输&#xff0c;通过共振机理破坏水分子之间的氢键&#xff0c;产…

Java - Lombok介绍、使用、工作原理、优缺点

介绍 Project Lombok is a java library that automatically plugs into your editor and build tools, spicing up your java.Never write another getter or equals method again, with one annotation your class has a fully featured builder, Automate your logging vari…

算法Day28 二进制差异序列(格雷码)

二进制差异序列&#xff08;格雷码&#xff09; Description n 位二进制差异序列是一个由2^n个整数组成的序列&#xff0c;其中&#xff1a; 每个整数都在范围[0, 2^n - 1]内&#xff08;含0和2^n - 1&#xff09; 第一个整数是0 一个整数在序列中出现不超过一次 每对相邻整数…

【网络安全】CTF入门教程(非常详细)从零基础入门到进阶,看这一篇就够了!

一、CTF简介 CTF&#xff08;Capture The Flag&#xff09;中文一般译作夺旗赛&#xff0c;在网络安全领域中指的是网络安全技术人员之间进行技术竞技的一种比赛形式。CTF起源于1996年DEFCON全球黑客大会&#xff0c;以代替之前黑客们通过互相发起真实攻击进行技术比拼的方式。…

计算机丢失msvcp140dll怎么恢复?快速解决dll缺失问题

在计算机使用过程中&#xff0c;我们经常会遇到一些错误提示&#xff0c;其中之一就是“msvcp140dll丢失”。msvcp140.dll是一个动态链接库文件&#xff0c;它包含了许多C标准库函数的实现。这些动态链接库文件是程序运行所必需的&#xff0c;它们包含了许多函数和资源&#xf…

圣诞新奇惊喜:利用 AI 技术帮助圣诞老人创建手写信件

人工智能甚至正在接管北极的任务。在即将到来的圣诞节假期之前&#xff0c;圣诞老人和他的助手们迎来了一项革命性的技术支持。一群乐于助人的精灵采用了人工智能技术&#xff0c;制作出独一无二、看似亲手书写的信件&#xff0c;以确保遵守圣诞老人的「北极标准」。 这些信件通…

C语言实现选择排序

完整代码&#xff1a; #include<stdio.h>//交换函数&#xff0c;交换两个数 void swap(int *a,int *b){int temp;temp*a;*a*b;*btemp; }//选择排序&#xff0c;从小到大 //参数&#xff1a;arr[]表示待排序数组&#xff0c;len表示该数组长度 void select_sort(int arr[…

爱智EdgerOS之深入解析安全可靠的开放协议SDDC

一、协议简介 在 EdgerOS 的智慧生态场景中&#xff0c;许多智能设备或传感器的生命周期都与 SDDC 协议息息相关&#xff0c;这些设备可能是使用 libsddc 智能配网技术开发的&#xff0c;也有可能是因为主要功能上是使用其他技术如 MQTT、LoRa 等但是设备的上下线依然是使用上…

图的遍历(深度优先遍历 + 广度优先遍历)

目录 &#x1f33c;广度优先遍历 &#xff08;1&#xff09;邻接矩阵BFS &#xff08;2&#xff09;邻接表BFS &#xff08;3&#xff09;非连通图BFS &#xff08;4&#xff09;复杂度分析 &#x1f33c;深度优先遍历 &#xff08;1&#xff09;邻接矩阵的DFS &#x…

Caching the Application Engine Server 缓存应用程序引擎服务器

Caching the Application Engine Server 缓存应用程序引擎服务器 Application Engine caches metadata just like the application server. This caching enhances performance because a program can refer to the local cache for any objects that it uses. 应用程序引擎…

科技云报道:从数据到生成式AI,是该重新思考风险的时候了

科技云报道原创。 OpenAI“宫斗”大戏即将尘埃落定。 自首席执行官Sam Altman突然被董事会宣布遭解雇、董事长兼总裁Greg Brockman辞职&#xff1b;紧接着OpenAI员工以辞职威胁董事会要求Altman回归&#xff1b;再到OpenAI董事会更换成员、Altman回归OpenAI。 表面上看&…

java--LocalDate、LocalTime、LocalDateTime、ZoneId、Instant

1.为什么要学习JDK8新增的时间 LocalDate&#xff1a;代表本地日期(年、月、日、星期) LocalTime&#xff1a;代表本地时间(时、分、秒、纳秒) LocalDateTime&#xff1a;代表本地日期、时间(年、月、日、星期、时、分、秒、纳秒) 它们获取对象的方案 2.LocalDate的常用API(…

【精选】 VulnHub (超详细解题过程)

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【python】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收藏…

C# 任务的异常和延续处理

写在前面 当Task在执行过程中出现异常或被取消等例外的情况时&#xff0c;为了让执行流程能够继续进行&#xff0c;可以使用延续方法实现这种链式处理&#xff1b;还可以针对前置任务不同的执行结果&#xff0c;选择执行不同的延续分支方法。子任务执行过程中的任何异常都会被…

线程安全的哈希表ConcurrentHashMap

1. HashTable 不推荐使用&#xff0c;无脑给各种方法加锁 2.ConcurrentHashMap 多线程下推荐使用 锁粒度控制 HashTable直接在方法上加synchronized&#xff0c;相当于对哈希表对象加锁&#xff0c;一个哈希表只有一把锁。多线程环境下&#xff0c;无论线程如何操作哈希表…