Vue2的终止支持时间为2023年12月31日。
在这个矛盾的时间点,还是决定先把vue2
的笔记放出来,在Vue2
完结后再把Vue3
的笔记补上。这样呢,2和3都不落下,也算是来一个启承的作用吧。在工作中呢,旧的项目可以维护,新的项目也可以上手。
后续呢会有react16
和react18
、node
、webpack
、vite
、以及实战项目,期间会包含umijs
,nextjs
, nuxtjs
等等更多的更前沿的前端技术笔记
也算是对自己的一种督促,不断充实自己,分享自己的学习笔记,让自己和朋友们可以在前端的道路上越走越远。
- 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核心
-
初始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>
- 取消控制台的vueTools提示,安装vue-Tools
-
Vue模板语法有2大类
插值语法: {{ XXX }}
功能: 用于解析标签体内容
写法: {{ xxx }} 中的xxx要写js表达式,vm实例上的所有属性
指令语法:
功能: 用于解析标签(包括:标签属性,标签体内容,绑定事件…)
备注: Vue中有很多指令,形式都是v-xxx -
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,
-