首页 > 其他分享 >vue学习笔记01

vue学习笔记01

时间:2023-03-22 23:33:07浏览次数:40  
标签:文件 vue 函数 笔记 js 01 template data

vue3 带来的变化

  • vue3 的发布时间 2020/09/19。
  • 优点:更好的性能、更小的包体积、更好的 TypeScript 集成、更优秀的 API 设计。
  • options API->CompositionAPI,由选项 API 到组合 API。

学习方式:

  1. 官方文档
  2. 看书学习,书的质量要高,你不知道的 javascript
  3. 学习开源项目,比如 TJ ,Core 和 express 的作者
  4. 视频课程

vue 的本质是一个 javascript 封装的库

vue 的使用

  1. CDN 引入
    CDN 是中文内容分发网络的简称,
    image-20230322000715730

  2. 下载
    下载打包好的 vue.js 文件也可以

声明式和命令式

  1. 汇编语言属于命令式编程,主要思想式关注计算机的执行步骤,即一步步的告诉计算机应该怎么做。
  2. vue.js 属于声明式编程,主要思想是告诉计算机应该做什么,而不指定具体要怎么做
  3. 除此之外还有函数式编程,主要特点就是函数第一位,类似于声明式编程,函数可以作为参数传递给另一个函数,函数也可以作为返回值,例如 javascrpt 闭包就属于函数式编程。

MVVM 模型

MVVM 是Model-View-ViewModle的简称,是一种基于前端开发的架构模式,其核心是提供对 View 和 ViewModel 的双向数据绑定,这使得 ViewModel 的状态改变可以自动传递给 View,这就是双向数据绑定。
除此之外还有MVC架构模式,常用于 javaweb。

template 模板

template 的使用方式

  1. 第一种方式,直接在 template:``中写
    图 6

  2. 第二种,创建 type = 'x-template' 和带 id 属性的 script 标签
    图 8

  3. 推荐第三种,创建 template 带 id 的标签
    图 7

methods 属性

methods 是一个对象,可以通过关键字 this 来直接访问 data 中的属性
图 9

data 属性

平时使用的时候 data 为什么是函数而不是对象?
根实例对象 data 既可以是对象也可以是函数(跟实例是单例),不会产生数据污染。组件实例 data 必须是函数,目的是为了防止多个组件实例对象之间公用一个 data,产生数据污染。采用函数的形式,initData 调用时会将其作为工厂函数都会返回全新的 data 对象。

Vue 的源码

  1. vue3 源码下载https://github.com/vuejs/core.git

  2. 下载方式:推荐使用 git clone 方式

  3. 安装依赖:pnpm install

  4. 对项目执行打包操作:pnpm dev,会在 dist 目录生成 vue.global.js 文件

  5. 修改脚本:添加--sourcemap
    图 2
    不添加--sourecemap调试的文件来源是 vue.global.js,这个是打包好的文件,所有的文件都在一个 js 文件中,不好观察,添加了--sourcemap后可以在调试的时候看到函数进入到的具体那个文件,比如说 createApp 就是在runtime-dom/src/index.ts定义的
    图 4
    同样的,想要详细阅读就可以到我们源码的这个目录的runtime-dom/src/index.ts的第66行来进行阅读。

  6. 怎么调试?
    可以在example目录建立一个文件夹创建 html 文件引入打包生成的vue.global.js文件,代码中添加debugger来进行调试
    图 5

标签:文件,vue,函数,笔记,js,01,template,data
From: https://www.cnblogs.com/ma1998/p/17245895.html

相关文章

  • C语言-指针学习笔记
    指针变量:变量的值是内存的地址普通变量的值是实际的值指针变量的值是具有实际值的变量的地址作为参数的指针:voidf(int*p);在被调用的时候得到了某个变量的地址......
  • *【学习笔记】(2)莫队
    莫队,是莫涛发明的一种解决区间查询等问题的离线算法,基于分块思想,复杂度一般为\(\mathcal{O}(N\sqrt{N})\)普通莫队例题:P1972[SDOI2009]HH的项链(其实这道题用莫队过......
  • CS61B学习笔记_Lecture4 References, Recursion, and Lists
    还是得先熟悉java的语法规则,准备先回归CS61B了。。。Bits: 计算机将信息储存为内存,用bits(0或1)序列表示这些信息。(一般简写为“b”,注意不要与字节Byte搞混,字节一般用“B......
  • CS61B学习笔记_Project0
    1GameRules1.4x4网格,每个位置为空或者填有带有一个2的正整数次幂数字的贴图;2.第一次移动前,随机选择一个空位填入带有数字2或4的贴图,其中填充2的概率为75%,填充4的概率......
  • 20201306——Exp2 后门原理与实践
    一、实验准备1、实验要求使用netcat获取主机操作Shell,cron启动使用socat获取主机操作Shell,任务计划启动使用MSFmeterpreter(或其他软件)生成可执行文件,利用ncat或soca......
  • Vue.js 具名插槽
    视频componentsCategray.vue<template> <divclass="category"> <h3>{{title}}分类</h3> <!--定义一个插槽(挖个坑,等着组件的使用者进行填充)--> <slotname="ce......
  • Django笔记五之字段类型
    这篇笔记介绍字段的类型FieldType。Django的model下的field对应的是MySQL中的表字段,而我们定义的field的类型则对应MySQL中的字段类型。本次主要介绍以下几......
  • Vue.js 默认插槽
    默认插槽视频componentsCategray.vue<template> <divclass="category"> <h3>{{title}}分类</h3> <!--定义一个插槽(挖个坑,等着组件的使用者进行填充)--> <slot>......
  • P2500 [SDOI2012]集合
    [SDOI2012]集合LuoguP2500[SDOI2012]集合题目描述小H在学习“集合与图论”的时候遇到了一个问题,他思考了很久依然无法很好完成这个问题。于是他只好来求助你了,给出n个......
  • 20201226马瑞婕《网络对抗》Exp2后门原理与实践
    目录1实验基础1.1基础知识1.1.1后门的概念常用后门工具2.实验目标3.实验环境4.实验过程4.1使用netcat获取主机操作Shell,cron启动4.1.1在主机中使用ncat-l-p1226(个人......