Vue入门学习笔记-从入门到模版语法

devtools/2024/9/23 0:57:59/

前言

建议：

  • 建议学习HTML5+CSS3+JavaScript之后在学Vue
  • HTML和JavaScript需要着重学习，如果还学了jQuery更好
  • Vue本身是基于JavaScript开发的框架，完全兼容JavaScript语法
  • 本学习笔记着重记录Vue语法和使用的相关特性，目的是为了后端开发人员快速上手Vue开发。

 Vue 和 jQuery 的区别

vue 和 jquery 都是前端开发中常用的框架和库，但它们在设计理念，应用场景和使用方式等方面有很大的不同

一、设计理念不同

        Vue 是一种被称为MVVM（Model-View-ViewModel）的设计模式。这种模式可以将应用程序视为由三个部分构成的单元：用户界面（视图），应用程序数据（模型）和处理用户输入的逻辑，即视图模型。Vue 提供了实现这种模式的基本工具，用于将视图与模型和视图模型之间的依赖关系建立起来。

        jQuery 是一种简化DOM操作的工具库，旨在让开发人员以更少的代码实现更多的效果。jQuery 对事件、动画、AJAX和DOM操作等方面提供了丰富的支持，它主要针对的是JavaScript的原生操作难以做到的一些高级操作。

二、应用场景不同

        Vue 主要专注于构建大型单页应用程序（SPA），它提供了更加高效的DOM操作和渲染方式，以及更加灵活的数据绑定和组件化方式。对于需要快速构建交互式界面的应用程序，Vue 是一个非常好的选择。

        jQuery 则更倾向于网站开发，特别是针对那些需要大量事件处理和DOM操作的页面。使用jQuery可以大幅减少代码量，因此对于轻度交互的网站，jQuery 会是一个非常实用的工具。

三、使用方式不同

        Vue 的使用方式类似于其他现代前端框架，它是基于组件化的思想构建的。在Vue中，一个页面是由多个组件构成的，每个组件可以拥有自己的HTML模板、CSS样式和JavaScript代码。这种组件化的设计使得代码可以更好地组织和重用。（更好的重用模版，快速构建项目）

        而jQuery则主要是以函数的形式提供各种操作，开发者可以直接使用而不需要引用其他js文件，当然，jQuery也可以通过模块化加载方式引用。（进行复杂的事件处理和DOM操作，使用jQuery是一个好的选择）

四、学习难度不同

        因为Vue具有较高的组件和模块化支持，它在初学者面前可能显得比较难以掌握，需要一些额外的学习成本。同时Vue的开发工具也需要基于Node.js，相对于jQuery来说有比较大的学习曲线。但学会Vue可以更高效和规范的开发大型、复杂的前端应用程序。

        而jQuery则相对来说学习难度较低，可以快速上手，不需要配置环境。对于初学者或者需要快速实现某些功能的开发者来说，jQuery是一个更好的选择。

总结

        综上所述，Vue和jQuery两者都有各自的优势和特点。Vue适用于构建大型单页应用程序，而jQuery适用于构建需要大量事件处理和DOM操作的页面。学习Vue需要一些额外的成本，但是可以提高开发效率和程序的可维护性。而jQuery则更适合初学者或者需要快速实现某些功能的开发者。

 框架和库的区别

 框架：

框架（Framework）是一个综合性的解决方案，它提供了一套预定义的结构、组件和规则，旨在帮助开发者快速构建和部署应用程序。

        可以理解为，框架是一个半成品，可以基于一个现有模版，使用框架预先规定的规则进行快速开发，迅速构建一个项目，框架一般只需要使用框架提供的类和函数，就可以实现全部功能。

 库：

库（Library）是一组预编译的代码集合，它封装了特定的功能或算法，供开发者在开发过程中调用。库通常包含了一系列函数、类、接口等

        可以理解为，一些库是对原有代码的封装，目的是为了简化原生代码的操作步骤，提高开发效率，引入库，可以大大减轻开发的难度。

 Vue入门

什么是Vue？

  • Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
  • Vue 只关注视图层， 采用自底向上增量开发的设计。
  • Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

渐进式代表的含义是：主张最少。每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。

主要理解：Vue的核心功能是一个视图模版引擎，只做本职之内的事情，使用更加灵活。当然Vue也可以成为一个框架，在声明式渲染（视图模板引擎）的基础上，我们可以通过添加组件系统、客户端路由、大规模状态管理来构建一个完整的框架。更重要的是，这些功能相互独立，你可以在核心功能的基础上任意选用其他的部件，不一定要全部整合在一起。可以看到，所说的“渐进式”，其实就是Vue的使用方式，同时也体现了Vue的设计的理念

自底向上增量开发是一种设计程序的过程和方法，具体来说，它指的是在软件开发过程中，先从最基本的部分或功能开始，逐步构建和完善整个系统。这种方法强调从基础做起，通过不断地增加功能和模块，来逐步实现软件的完整性和复杂性。

 第一个实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
</head>
<body>
<div id="app"><p>{{ message }}</p>
</div><script>
new Vue({el: '#app',data: {message: 'Hello Vue.js!'}
})
</script>
</body>
</html>

对于Vue.js的安装，这里不在赘述，这里使用的vue.js文件都是网络路径（保证网络畅通）

Vue.js 起步 

  • 每个 Vue 应用都需要通过实例化 Vue 来实现。
  • 语法格式如下：
var vm = new Vue({// 选项
})

一个Vue构造器中需要哪些内容：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="https://cdn.staticfile.net/vue/2.4.2/vue.min.js"></script></head><body><div id="csx_id"><h1>{{message}}</h1><h2>{{f1()}}</h2></div><script>new Vue({el:'#csx_id',data:{message:'Hello Vue!',author: 'csx'},methods:{f1 :function(){return this.author + ":  Hello World";}}});</script></body>
</html>
  • Vue 构造器中有一个el 参数，它是 DOM 元素中的 id，如上div标签中的id为"csx_id"
    • 这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响
  • data 用于定义属性，实例中有三个属性分别为：message，author
  • methods 用于定义的函数，可以通过 return 来返回函数值。
  • {{ }} 用于输出对象属性和函数返回值

        当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。（实现了数据的双向绑定）

        除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。例如： 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="https://cdn.staticfile.net/vue/2.4.2/vue.min.js"></script></head><body><div id="csx_id"><h1>{{message}}</h1><h2>{{f1()}}</h2></div><script>var data={ message:"Hello Vue!",author:'csx'};var vm=	new Vue({el:'#csx_id',data : data,methods:{f1 :function(){return this.author + ":  Hello World";}}});document.write(vm.$data===data);document.write("<br>");document.write(vm.$el===document.getElementById('csx_id'));</script></body>
</html>

 Vue.js 模板语法

  • Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
  • Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
  • 结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

 插值

文本

  • 数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
</head>
<body>
<div id="app"><p>{{ message }}</p>
</div><script>
new Vue({el: '#app',data: {message: 'Hello Vue.js!'}
})
</script>
</body>
</html>

Html

  • 使用 v-html 指令用于输出 html 代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app"><div v-html="message"></div>
</div><script>
new Vue({el: '#app',data: {message: '<h1>VaporGas</h1>'}
})
</script>
</body>
</html>

属性

  • HTML 属性中的值应使用 v-bind 指令。
  • 以下实例判断 flag 的值，如果为 true 使用 cls1 类的样式，否则不使用该类：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
</head>
<style>
.cls1{background: #444;color: #eee;
}
</style>
<body>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script><div id="app"><label for="r1">修改颜色</label><input type="checkbox" v-model="flag" id="r1"><br><br><div v-bind:class="{'cls1': flag}">v-bind:class 指令</div>
</div><script>
new Vue({el: '#app',data:{flag: false}
});
</script>
</body>

表达式

  • Vue.js 都提供了完全的 JavaScript 表达式支持。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app"><!-- 算术运算符 -->{{5+5}}<br> <!-- 三元运算符 -->{{ ok ?'yes' : 'no' }}<br><!-- JS函数调用 -->{{ message.split('').reverse().join('') }}<!-- 绑定id属性值 --><div v-bind:id="'list-' + id">Vues教程</div>
</div><script>
new Vue({el: '#app',data: {ok: false,message: 'Hello',id : 1}
})
</script>
</body>
</html

指令

  • 指令是带有 v- 前缀的特殊属性。
  • 指令用于在表达式的值改变时，将某些行为应用到 DOM 上。如下例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app"><p v-if="seen">现在你看到我了</p><template v-if="ok"><h1>如何快速入门Vue</h1><p>推荐去菜鸟教程</p><p>推荐看VaporGas博客</p></template>
</div><script>
new Vue({el: '#app',data: {seen: false,ok: true}
})
</script>
</body>
</html>

这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。

参数

  • 参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app"><pre><a v-bind:href="url">百度一下，你就知道</a></pre>
</div><script>
new Vue({el: '#app',data: {url: 'http://www.baidu.com'}
})
</script>
</body>
</html>

在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

另一个例子是 v-on 指令，它用于监听 DOM 事件：

  • <a v-on:click="监听的事件名>

 修饰符

修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit"></form>

 用户输入

  • 在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app"><p>{{ message }}</p><input v-model="message">
</div><script>
new Vue({el: '#app',data: {message: 'Hello!'}
})
</script>
</body>
</html>
  • v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
  • 按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。
    • 以下实例在用户点击按钮后对字符串进行反转操作：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app"><p>{{ message }}</p><button v-on:click="reverseMessage()">反转字符串</button>
</div><script>
new Vue({el: '#app',data: {message: 'Hello World!'},methods: {reverseMessage: function () {this.message = this.message.split('').reverse().join('')}}
})
</script>
</body>
</html>

注意：绑定在HTML标签中的事件属性中的函数调用，可以省略小括号，也可以写上（都可以触发单击事件）

 过滤器

  • Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下： 
    • <!-- 在两个大括号中 -->
{{ message | capitalize }}<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>
  •  过滤器函数接受表达式的值作为第一个参数。
    • 以下实例对输入的字符串第一个字母转为大写：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">{{ message | capitalize }}
</div><script>
new Vue({el: '#app',data: {message: 'vue.js'},filters: {capitalize: function (value) {if (!value) return ''value = value.toString()return value.charAt(0).toUpperCase() + value.slice(1)}}
})
</script>
</body>
</html>

过滤器可以串联：

{{ message | filterA | filterB }}

过滤器是 JavaScript 函数，因此可以接受参数：

{{ message | filterA('arg1', arg2) }}

这里，message 是第一个参数，字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

 缩写

v-bind 缩写

Vue.js 为两个最为常用的指令提供了特别的缩写：

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

总结 

从入门到实践学习：Vue的入门语法到Vue的模版语法


http://www.ppmy.cn/devtools/109914.html

相关文章

【MySQL】MySQL表的增删改查（进阶篇）——之约束条件

【MySQL】MySQL表的增删改查（进阶篇）——之约束条件

前言&#xff1a; &#x1f31f;&#x1f31f;本期讲解关于MySQL表增删查改进阶篇&#xff0c;希望能帮到屏幕前的你。 &#x1f308;上期博客在这里&#xff1a;http://t.csdnimg.cn/cF0Mf &#x1f308;感兴趣的小伙伴看一看小编主页&#xff1a;GGBondlctrl-CSDN博客 目录 …
阅读更多...
ISO 21434与网络安全管理系统（CSMS）的协同作用

ISO 21434与网络安全管理系统（CSMS）的协同作用

ISO/SAE 21434与CSMS&#xff08;网络安全管理系统&#xff09;之间的关系主要体现在以下几个方面&#xff1a; 提供指导框架&#xff1a;ISO/SAE 21434《道路车辆—网络安全工程》是一项国际标准&#xff0c;它为汽车行业提供了实施网络安全管理系统的国际认可的方法和最佳实…
阅读更多...
VS配置PCL环境-获取文件目录下所有.lib文件名称

VS配置PCL环境-获取文件目录下所有.lib文件名称

1、打开CMD&#xff0c;切换目录到lib文件所在目录 例如 D:\PCL\3rdParty\Boost\lib 命令提示符输入&#xff1a; C:\Users\admin>D: D:\>cd D:\PCL\3rdParty\Boost\lib 2、提取当前目录所有.lib文件名到0.txt &#xff08;此处用Boost举例&#xff09; 输入&#x…
阅读更多...
2024最新！Facebook手机版和网页版改名教程！

2024最新！Facebook手机版和网页版改名教程！

Facebook作为全球最大的社交平台之一&#xff0c;允许用户自定义名字和昵称。在Facebook更新姓名可以帮助您更好的展现账号形象。本文将为您提供详细的步骤指导&#xff0c;帮助您在手机APP和网页版上轻松完成Facebook改名操作。 Facebook手机版改名 打开Facebook APP并登录账号…
阅读更多...
Linux基础指令(三)详解

Linux基础指令(三)详解

more补充1(echo和>)重定向补充2>>(追加重定向)补充3补充4制造大文件more 命令的使用 less(自由查找)head (查看头部的内容)tail(查看尾部的内容)查找中间部分方法方法一(思路)方法二 wc(统计文本行数)date(显示时间)时间戳cal(日历)find(查找文件)grep(读取文件中带有…
阅读更多...
音视频开发（二）FFmpeg调用avio_open返回Protocol not found的追踪

音视频开发（二）FFmpeg调用avio_open返回Protocol not found的追踪

Protocol not found 近日&#xff0c;在C中使用FFmpeg把一些本地的视频文件&#xff0c;推送到远程RTSP服务器的时候&#xff0c;使用了如下这个过程&#xff1a; avformat_alloc_output_context2() 申请上下文avcodec_find_encoder 找到编码器avcodec_alloc_context3 通过找…
阅读更多...
第 4 章：跨域

第 4 章：跨域

第 4 章&#xff1a;跨域 1. 同源策略 同源策略(Same-Origin Policy)最早由 Netscape 公司提出&#xff0c;是浏览器的一种安全策略。同源&#xff1a; 协议、域名、端口号 必须完全相同。违背同源策略就是跨域。满足同略策略url可以简写 1.1 同略策略案例 index.html <…
阅读更多...
​数据链路层——流量控制可靠传输机制 ​

​数据链路层——流量控制可靠传输机制 ​

https://www.cnblogs.com/nekodream/p/18048072 数据链路层的流量控制 较高的发送速度和较低的接收能力的不匹配,会造成传输出错,因此流量控制也是数据链路层的一项重要工作。 数据链路层的流量控制是点对点的&#xff0c;而传输层的流量控制是端到端的。 数据链路层流量控制…
阅读更多...
最新文章

Copyright @ 2022~2023