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 + b demo(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,
-
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
