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>- 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,
