当前位置：首页 > news >正文

网站建设 html互联网广告

news 2025/7/18 12:26:59

网站建设 html,互联网广告,宣城网站建设有限公司,做网站教程第一课Vue2的终止支持时间为2023年12月31日。在这个矛盾的时间点，还是决定先把vue2的笔记放出来，在Vue2完结后再把Vue3的笔记补上。这样呢，2和3都不落下，也算是来一个启承的作用吧。在工作中呢，旧的项目可以维护&#xff0c…

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
核心
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> 	<title>Document</title></head><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,