Vue学习计划--Vue2(一)简单了解vue

Vue2的终止支持时间为2023年12月31日。
在这个矛盾的时间点,还是决定先把vue2的笔记放出来,在Vue2完结后再把Vue3的笔记补上。这样呢,2和3都不落下,也算是来一个启承的作用吧。在工作中呢,旧的项目可以维护,新的项目也可以上手。

后续呢会有react16react18nodewebpackvite、以及实战项目,期间会包含umijs,nextjs, nuxtjs等等更多的更前沿的前端技术笔记

也算是对自己的一种督促,不断充实自己,分享自己的学习笔记,让自己和朋友们可以在前端的道路上越走越远。

  1. vue是什么?
    vue是一套用于构建用户界面的渐进式jacascript库
    构建用户界面: 把一系列的数据转换成界面
    渐进式:循序渐进
    简单应用:只需一个轻量小巧的核心库
    复杂应用:可以引入各式各样的vue插件
    2. Vue作者?
    尤雨溪
    1. 13年,受到Angular框架的启发,开发出了一套轻量级框架-- Seed,同年12月,Seed更名为Vue 0.6.0
    2. 14年,正式对外发布, 版本号0.8.0
    3. 15年,10月27日,正式发布Vue1.0.0 Evangelion(超世纪福音战士)
    4. 16年,10月1日 正式发布Vue2.0.0 Chost in the Shell(攻壳机动队)
    5. 20年,9月18日,正式发布Vue3.0.0 One piece(海贼王)

    后起之秀,生态完善,已然成为国内工程师必备技能
    3. Vue 特点:
    1. 采用组件化模式,提高的复用率,且让代码更好的维护
    2. 声明编码,让编码人员无需直接操作DOM
    3. 使用虚拟DOM+优秀的DIFF算法, 尽量复用DOM节点
    命令式: 数据 => 真实DOM
    声明式: 数据 => 虚拟DOM => 真实DOM
    核心
    1. 初始Vue
      想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象
      root容器里的代码依然符合html规范
      root容器里的代码被称为[Vue模板]
      Vue实例与容器是一一对应的
      真实开发中只有一个Vue实例,并且配合组件一起使用
      {{ xxx }} 要写js表达式,且xxx会自动读取到data中所有的属性
      注意区分: js表达式和js代码(语句)
      表达式: 一个表达式会产生一个值,可以放在任何一个需要的地方
      a: 变量
      b: a + b
      demo(1)
      x === y ? ‘a’ : ‘b’
      js代码(语句)
      if()
      for()

      一旦data中的数据发生改变,那么页面中用到该数据的地方也会自动更新
      注意:

      • 取消控制台的vueTools提示,安装vue-Tools

        安装一个vue-Tools工具,方便开发,其实就是谷歌浏览器的插件件,可以访问此链接,进入最后一个网址(收藏猫)进行下载,该网上还有教程,如何安装谷歌插件,点击进入

      • 取消控制台的生产环境提示 Vue.config.productionTip = false
        示例:
      <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="./vue.js"></script> 	<!--	此处在Vue2官网把vue.js下载到本地即可	--><!-- <script src="https://cdn.jsdelivr.net/npm/vue@2"></script><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>--><title>Document</title></head><!-- 想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象root容器里的代码依然符合html规范root容器里的代码被称为[Vue模板]Vue实例与容器是一一对应的真实开发中只有一个Vue实例,并且配合组件一起使用{{ xxx }} 要写js表达式,且xxx会自动读取到data中所有的属性注意区分: js表达式和js代码(语句)表达式: 一个表达式会产生一个值,可以放在任何一个需要的地方a: 变量b: a + bdemo(1)x === y ? 'a' : 'b'js代码(语句)if()for() --><body><div id="app">{{ name }} <br>{{ 1 + 2 }} <br>{{ false ? name : age }} </div><div id="list">{{ nameList }}</div><div class="classVue">{{ className }}  {{ className2 }}</div><script>new Vue({el: "#app",  // el用于指定当前Vue实例为哪个容器服务,值通常为class选择器字符串data:{ // 用于存储数据,数据供el所指定的容器去使用,值我们暂时先写成一个对象name: '财经',age: 19}})new Vue({el: "#list",  data:{ nameList: 'list的data',}})new Vue({el: ".classVue",  data:{ className: '小猪佩奇',}})new Vue({el: ".classVue",  data:{ className2: '乔治',}})</script></body></html>
      
    2. Vue模板语法有2大类
      插值语法: {{ XXX }}
      功能: 用于解析标签体内容
      写法: {{ xxx }} 中的xxx要写js表达式,vm实例上的所有属性
      指令语法:
      功能: 用于解析标签(包括:标签属性,标签体内容,绑定事件…)
      备注: Vue中有很多指令,形式都是v-xxx

    3. Vue中有两种绑定数据方式:
      单向绑定: v-bind 绑定动态属性 // 数据只从data流向页面
      v-bind 定义属性: 包括class style

          <input type="text" v-bind:value = "name"><!-- 简写 --><input type="text" :name = "name">
      

      双向绑定: v-model 数据不仅能从data流向页面,还可以从页面流向data

          <input type="text" v-model:value = "name"><!-- 简写 --><input type="text" v-model = "name">

      备注:
      v-model 一般用于表单元素 (如input select等),因为v-model默认收集的是value的值
      v-model: value 可以简写成 v-model,

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

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

相关文章

VIVADO-FFT IP核学习记录

根据用户手册使用IP核 ① 找到user guide / product guide 并打开 ② 找到Customizing and Generating the Core(不同手册可能题目不一样)&#xff0c;查看IP核的创建过程中各个参数的意义和设置方法。 ③ 找到port description &#xff0c;查看接口注释 根据网络教程使用…

微信小程序调用相机拍摄或手机相册

wx.chooseMedia(Object object) 功能描述 拍摄或从手机相册中选择图片或视频。

Facebook推广工具功能科普!

随着社交媒体的普及&#xff0c;Facebook已经成为全球使用最广泛的社交平台之一&#xff0c;对于广大营销人员来说&#xff0c;利用Facebook推广工具进行营销已经成为不可或缺的一部分。 那么&#xff0c;这些推广工具到底有哪些功能呢?本文将为您揭秘Facebook推广工具的强大…

SaToken利用Redis做持久化

官网解释 官网解释 教程 引入依赖 <!-- 提供Redis连接池 --> <dependency><groupId>org.apache.commons</groupId><artifactId>commons-pool2</artifactId> </dependency><!-- Sa-Token 整合 Redis &#xff08;使用 jdk 默认序…

py 读取抖音话术

要读取抖音话术&#xff0c;您可以使用Python中的文件操作和字符串处理功能。以下是一个简单的示例代码&#xff0c;演示如何读取抖音话术文件并将其打印到控制台上&#xff1a; # 打开抖音话术文件 with open("douyin_scripts.txt", "r", encoding"…

leecode | 从二叉搜索树到更大和树

官方的题目解释永远晦涩难懂 这就是最大的拦路虎 简单介绍&#xff0c;将二叉搜索树&#xff0c;转换成“更大和树”&#xff0c;“最大的和树”&#xff0c;就是更新节点val&#xff0c;二叉树中所有大于等于该节点的的val 总和&#xff0c;包括本身 #对着图看&#xff0c;会更…

pythonGUi不能立即刷新

今天遇到一个UI界面问题&#xff1a; 在修改控件的背景颜色或其他样式后&#xff0c;UI 没有立即更新&#xff0c;而需要晃动窗口或触发一些事件才能看到变化&#xff0c;可能是由于界面的刷新机制问题。这种情况下&#xff0c;我尝试使用 Refresh 方法来强制刷新控件。 在你的…

SpringMVC常用注解

1、Controller 声明该类为SpringMVC中的Controller 控制器Controller 负责处理由DispatcherServlet 分发的请求&#xff0c;它把用户请求的数据经过业务处理层处理之后封装成一个Model &#xff0c;然后再把该Model 返回给对应的View 进行展示。在SpringMVC 中使用Controller &…

pip命令详解

pip命令介绍 pip是由Ian Bicking在2008年提出的&#xff0c;他将pyinstall重命名为pip。名称pip是首字母缩写词&#xff0c;全称为“Package Installer for Python”。自Python3的3.4版本以及Python2的2.7.9版本开始&#xff0c;pip被直接包括在Python的安装包内&#xff0c;成…

【原神游戏开发日志1】缘起

【原神游戏开发日志1】缘起 版权声明 本文为“优梦创客”原创文章&#xff0c;您可以自由转载&#xff0c;但必须加入完整的版权声明 文章内容不得删减、修改、演绎 相关学习资源见文末 大家好&#xff0c;最近看到原神在TGA上频频获奖&#xff0c;作为一个14年经验的游戏开…

C语言每日一题(45)删除排序链表中的重复元素

力扣网83 删除排序链表中的重复元素 题目描述 给定一个已排序的链表的头 head &#xff0c; 删除所有重复的元素&#xff0c;使每个元素只出现一次 。返回 已排序的链表 。 示例 1&#xff1a; 输入&#xff1a;head [1,1,2] 输出&#xff1a;[1,2]示例 2&#xff1a; 输入&…

Android 11.0 Camera 分辨率从高到低排列功能实现

1.前言 在11.0的系统ROM定制化开发中,在对Camera2的产品进行定制化的时候,在camera2的设置页面,总是会发现在预览 分辨率的列表中,有的产品不是按照分辨率的大小来进行排序显示的,所以就需要了解显示流程,然后按顺序排序来实现 功能,接下来实现相关功能 2.Camera 分…

公有云迁移研究——AWS DMS

大纲 1 什么是DMS2 DMS的作用3 DMS在迁移的时候都做些什么4 在使用DMS的时候我们需要做些什么5 操作5.1 创建两个数据库终端节点5.2 创建迁移任务 6 可能遇到的问题7 总结 在本地机房或其他云往AWS上做迁移时&#xff0c;往往会遇到数据库迁移的任务。如果数据量不是特别大&…

SQL server QUOTENAME()和CONVERT()函数一起使用来将日期值格式化

在这段代码中&#xff0c;QUOTENAME()和CONVERT()函数一起使用来将日期值格式化并引用在动态SQL语句中。 CONVERT(): 这是SQL Server中的一个内置函数&#xff0c;用于将数据从一种类型转换为另一种类型。在这个例子中&#xff0c;它接受三个参数&#xff1a; a. 目标数据类型…

Linux 软件安装

目录 一、Linux 1、Linux异常解决 1、JDK安装 1、Linux卸载JDK 2、Linux安装JDK 2、Redis安装 一、Linux 1、Linux异常解决 1、Another app is currently holding the yum lock; waiting for it to exit... 解决办法: rm -f /var/run/yum.pid1、杀死这个应用程序 ps a…

计算机网络:传输层——多路复用与解复用

文章目录 前言一、Socket&#xff08;套接字&#xff09;二、多路复用/解复用三、多路解复用&#xff08;1&#xff09;多路解复用原理&#xff08;2&#xff09;无连接&#xff08;UDP&#xff09;多路解复用&#xff08;3&#xff09;面向连接&#xff08;TCP&#xff09;的多…

mysql大数据量查询瓶颈解决方案-供参考

项目运行了三年了&#xff0c;流水表主表数据已经达到4kw以上 所以最近项目开始时不时的出现问题&#xff0c;主要体现在以下方面&#xff1a; 1.客户端经常出现查询超时。 1.1 mybatis分页查询出现问题。 对于这个情况&#xff0c;我在这篇博客中做了描述&#xff0c;可以移…

进入软件的世界

选择计算机 上高中的时候&#xff0c;因为沉迷于网络游戏&#xff0c;于是对计算机产生了浓厚的兴趣&#xff0c;但是那个时候对于计算机的了解还是非常肤浅的。上大学的时候&#xff0c;也就义无反顾的选择了计算机专业&#xff0c;其实并不是一个纯粹的计算机专业&#xff0…

每日OJ题_算法_双指针①_力扣283. 移动零

目录 力扣283. 移动零 解析代码 力扣283. 移动零 283. 移动零 - 力扣&#xff08;LeetCode&#xff09; 难度 简单 给定一个数组 nums&#xff0c;编写一个函数将所有 0 移动到数组的末尾&#xff0c;同时保持非零元素的相对顺序。 请注意 &#xff0c;必须在不复制数组的…

使用Redis管理登录令牌cookie

相关知识 大多数网站都会使用 cookie 记录用户的身份。cookie 是由少量数据组成的字符串&#xff08;通常还要经过加密&#xff09;。网站会要求浏览器存储这些数据&#xff0c;并在向服务端发起请求时将这些数据传回给服务端。 通常&#xff0c;用于处理登录&#xff08;识别…