VUE 2+3

Vue是什么？
概念：Vue是一个用于构建用户界面的渐进式框架
构建用户界面：基于数据动态渲染页面
Vue的两种使用方式：
1.Vue核心包开发
场景：局部模块改造
2.Vue核心包&Vue插件工程化开发
场景：整站开发
注：Vuejs核心包(声明式渲染，组件系统)
优点：大大提升开发效率
---------------------------------------------------------------------------------------------------
.创建Vue实例，初始化渲染
核心步骤 4步：
     1.准备容器（Vue所管理的范围）
     2.引包(官网)-开发版本/生产版本
     官网: v2.cn.vuejs.org(Vue2的官网)
             cn.vuejs.org(Vue3的官网)
     3.创建Vue 实例 new Vue()
     4.指定配置项->渲染数据
        el 指定挂载点
        data 提供数据
插值表达式{{ }}
插值表达式是一种Vue的模版代码
1.作用：利用表达式进行插值，渲染到页面中
   表达式：是可以被求值的代码，JS引擎会将其计算出一个结果
2.语法：{{表达式}}
3.注意点：
    使用的数据必须存在（data）
    支持的是表达式，而非语句，比如：if for ...
    不能在标签属性中使用{{ }}插值
eg: <p title="{{username}}">我是标签<p>
    <div id="app">
        <h3>{{msg}}</h3>
    </div>
    <!-- 引开发版本的包 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                msg:'Hello world'
            }
        })
Vue 核心特性：响应式
数据的响应式处理->响应式：数据变化，视图自动更新
如何访问 or 修改？data中的数据，最终会被添加到实例上
1.访问数据："实例.属性名"
2.修改数据："实例.属性名"="值"
data中的数据就是响应式的数据
大致的过程就是：修改数据，Vue监听到数据修改，底层自动更新视图(Dom操作)，实现视图界面
聚焦于数据->数据驱动视图
使用Vue开发，关注业务的核心逻辑，根据业务修改数据即可
安装Vue开发者工具：装插件调试Vue应用
1.通过谷歌应用商店安装(国外网站)
2.极简插件：推荐下载->开发者工具->拖拽安装->插件详情允许访问文件
https://chrome.zzzmh.cn/index
Vue指令：
Vue会根据不同的[指令]，针对标签实现不同的[功能]。
指令：带有v-前缀的特殊标签属性
eg: <div v-html="str"></div>
v-html:
作用：设置元素的innerHTML
语法：v-html="表达式"
注：差值表达式并不具备解析标签的能力，v-html类似于我们之前所学的模版字符串，可以动态的解析标签
Vue 指令 v-show和v-if
v-show
1.作用：控制元素显示隐藏
2.语法：v-show="表达式" 表达式值 true 显示，false 隐藏
3.原理：切换display:none 控制显示隐藏
4.场景：频繁切换显示隐藏的场景
v-if
1.作用：控制元素显示隐藏(条件渲染)
2.语法：v-if="表达式" 表达式值true显示，false隐藏
3.原理：基于条件判断，是否创建或移除元素节点
4.场景：要么显示，要么隐藏，不频繁切换的场景

这两种指令在true方面是没啥区别的，当为flase的时候，v-show是靠style="display:none;" 隐藏的，而v-if是标签直接在页面上消失了，懂？
v-show底层原理：切换 css 的display：none 来控制显示隐藏
v-if 底层原理：根据 判断条件 控制元素的 创建和移除(条件渲染)
Vue 指令 v-else v-else-if
1.作用：辅助 v-if 进行判断渲染
2.语法：v-else v-else-if="表达式"
3.注意：需要紧挨着 v-if 一起使用
Vue 指令 v-on
1.作用：注册事件=添加监听+提供处理逻辑
事件名来添加监听，等号后面来提供相关的处理逻辑
2.语法：
    v-on:事件名="内联语句"
    v-on:事件名="methods中的函数名"
第一种语法只适用于相对简单的场景，当我们的逻辑代码量多的话就要用我们的第二种语法了
v-on中的内联语句相关用法：
eg:
     <button v-on:click="count++">按钮</button>
Vue同时也提供了简洁的写法，将v-on:省略为@
     <button @click="count++"></button>
v-on中的methods方法：
eg:
<button @click="fn">-</button>
fn函数可以在实例化中除了添加挂载点和数据项，还可以添加方法(fn函数)
注意：1.内联语句可以通过插值表达式来直接访问数据
           2.methods函数内的this指向Vue实例
v-on调用参数：
<div id="app">
<button @click="fn(参数1,参数2)">
     按钮
</button>
<div>
const app=new Vue=({
    el:'#app',
    methods:{
      fn(a,b){
      console.log('您是一个乐子')
}
}
})
Vue 指令 v-bind
1.作用：动态的设置html的标签属性-> src url title ...
2.语法：v-bind:属性名="表达式"
3.注意：简写形式：属性名="表达式"
eg:
 <div id="app">
   //v-bind:src    可以简写成   :src
   <img v-bind:src="imgUrl" v-bind:title="msg" alt="">
   <img :src="imgUrl" :title="msg" alt="">
  </div>
 <script>
      const app=new Vue({
         el:"#app",
         data:{
         imgUrl:'./imgs/10-02.png',
         msg:'hello world'
   }
   })
 </script>
Vue指令 v-for
1.作用：基于数据循环，多次渲染整个元素 ->数组，对象，数字......
2.遍历数组语法：
   v-for="(item,index) in 数组"
   item代表每一项，index代表下标
   v-for里面的两个参数是可以根据需求来删除参数
   省略index: v-for="item in 数组"
 eg:
     <div id="app">
      <h3>这是一个标题</h3>
       <ul>
           <li v-for="item in list">
                {{item}}
           </li>
        </ul>
     </div>
     <script>
       const app=new Vue({
          el:'#app',
          data:{
           list:['西瓜','苹果','鸭梨','榴莲']
     }
     })
   </script>
v-for中的key
语法：key属性="唯一标识"
作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用
v-for中的key-不加key
v-for的默认行为会尝试原地修改元素(就地复用)
注意点：
1.key的值只能是字符串或数字类型
2.key的值必须具有唯一性
3.推荐使用id作为key(唯一)，不推荐使用index作为key(会变化，不对应)
Vue指令 v-model
1.作用：给表单元素使用，双向数据绑定->可以快速获取或设置表单元素内容
注：在Vue中只要数据变化对应的视图就会变化--这属于单项数据的
双向数据绑定：
  数据变化->视图自动更新
  视图变化->数据自动更新
2.语法：v-modal='变量'
eg:
    <input type="text" v-model="username">
    <input type="password" v-modal="password">
由于v-modal的双向数据绑定功能，表单里的数据可以和Vue实例中的data产生一个联系，相互影响
指令修饰符
通过"."指明一些指令后缀，不同后缀封装了不同的处理操作->简化代码
1.案件修饰符
   @keyup.enter->键盘回车监听
   类似于：e.key==='Enter'
2.v-modal修饰符
   v-modal.trim->去除收尾空格
   v-modal.number->转数字
3.事件修饰符
   @事件名.stop->阻止冒泡
    一般我们采用的是e.stopPropagation()，现在我们可以直接采用@click.stop来阻止冒泡
   @事件名.prevent->阻止默认行为
v-bind对于样式控制的增强
为了方便开发者进行样式控制，Vue扩展了v-bind的语法，可以针对class类名和style行内样式进行控制
1.操作class
语法：class="对象/数组"
类名就是你CSS中写的样式，你可以根据需求动态的添加到你的块级标签当中去
1.对象->键就是类名，值是布尔值。如果为true,有这个类，否则没有这个类
<div class="box" :class="{类名1：布尔值，类名2：布尔值}"></div>
    适用场景：一个类名，来回切换
2.数组->数组中所有的类，都会添加到盒子上，本质就是一个class列表
<div class="box":class="[类名1，类名2，类名3]"></div>
    使用场景：批量添加或删除类
2.操作style
语法：style="样式对象"
<div class="box":style="{CSS属性名1：css属性值，css属性名2：css属性值}"></div>
eg:
     <div id="app">
         <div class="box" :style="{width:'400px',height:'400px','background-color':'green'}"></div>
     注：css对象中不能出现-，所以可以使用' '或驼峰命名法(backgroundColor)
     </div>
使用场景：某个具体属性的动态设置
v-modal 应用于其他表单元素
常见的表单元素都可以用v-modal绑定关联->快速获取或设置表单元素的值
它会根据<<控件类型>>自动选取正确的方法来更新元素
输入框 input:text ->value
文本域 textarea ->value
复选框 input:checkbox ->checked
单选框 input:radio ->checked
下拉菜单 select ->value
注：
    前置理解：
      1.name: 给单选框加上 name 属性可以分组->同一组互相会互斥
      2.value:给单选框加上 value 属性，用于提交给后台数据(一般是一种标识)
eg:
    性别：
       <input type="radio" name="gender" value="1">男
       <input type="radio" name="gender" value="2">男
       <br><br>
     前置理解：
       1.option 需要设置value 值，提交给后台
       2.select 的 value 值，关联了选中的option 的value 值
       3.在控制台中就可以选中对应的select进行修改
  eg:
      所在城市：
        <select v-modal="cityId">
            <option value="101">北京</option>
            <option value="102">上海</option>
            <option value="103">成都</option>
            <option value="104">南京</option>
        </select>
计算属性：
概念：基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算
语法：
1.声明在computed配置项中，一个计算属性对应一个函数
2.使用起来和普通属性一样使用{{计算属性名}}
eg:
     computed:{
        计算属性名(){
          基于现有数据，编写求值逻辑
          return 结果
    }
},
const app=new Vue({
    el:'app',
    data:{
       //现有数据
       list:[
       {id:1,name:'篮球',num:1},
       {id:2,name:'玩具',num:2},
       {id:3,name:'铅笔',num:5},
   ]
   },
   computed:{
     totalCount(){
     //计算属性函数内部，可以直接通过 this 访问到app 实例
     //需求：对this.list 数组里面的num 进行求和->reduce
     let total=this.list.reduce((sum,item)=>sum+item.num,0)
     return total
}
}
})
computed 计算属性 VS methods方法
computed是封装了一段对于数据的处理，求得一个结果，而methods方法却是给实例提供一个方法，调用以处理业务代码
但是 computed 具有缓存特性(提高性能)
计算属性完整写法
计算属性默认的简写，只能读取访问，不能"修改"
如果要"修改"->需要写计算属性的完整写法
eg:
    computed:{
       计算属性名：{
         get(){
          一段代码逻辑(计算逻辑)
          return 结果
    },
    set(修改的值){
     一段代码逻辑(修改逻辑)
 }
 }
}
set(value){
    value.slice(0,1)
}
watch 侦听器(监听器)
作用：监听数据变化，执行一些业务逻辑或异步操作。
场景：一般用于实时变化的一些业务
语法：
1.简单写法->简单类型数据，直接监听
2.完整写法->添加额外配置项
eg:
data:{
   words:'苹果',   //简单的属性
   obj:{
    words:'苹果'  //对象里面的子属性
}
},
watch:{
   //该方法会在数据变化时，触发执行
   数据属性名(newValue,oldValue){
     一些业务逻辑或异步操作
},
   '对象.属性名'(newValue,oldValue){
     一些业务逻辑或异步操作
}
}
eg:
简单的属性：
const app=new Vue({
  el:'#app',
  data:{
    //words:' '
    obj:{
    words:' '
   }  //对象里面的子属性
},
 watch:{
   //该方法会在数据变化时调用执行
   //newValue新值，oldValue老值(一般不用)
   words(newValue){
    console.log('变化了'，newValue)
   }
   'obj.words'(newValue){
    console.log('变化了',newValue)
  }(对象里的子属性)
}
})
案例：有道词典的实时翻译功能
const app=new Vue({
   el:'#app',
   data:{
    obj:{
     words:' '
   },
   result:' '  (翻译结果)
   timer:null //延时器id
},
  watch:{
     'obj.words'(newValue){
    //防抖: 延迟执行=>延迟一会儿，一段时间内没有输入再执行
    clearTimeout(this.timer)
   this.timer= setTimeout(async()=>{
       const res=await axios({
       url:'你们公司的服务器端口'
       params:{
          words: newValue
      }
   })
     this.result=res.data.data
     console.log(res.data.data)
    },100)
  }
  }
})
注：在Vue中的一些非响应的数据可以直接往实例上挂
2.完整写法->添加额外配置项
   deep:true 对复杂类型深度监视(针对复杂类型)
   immediate:true 初始化立刻执行一次handler方法
   需求：输入内容，修改语言，都实时翻译
Vue 生命周期 和 生命周期的四个阶段
Vue 声明周期：一个Vue实例 从 创建 到 销毁的整个过程
生命周期四个阶段：1.创建(响应式数据...) 2.挂载(渲染模版) 3.更新(数据修改，更新视图) 4.销毁(销毁实例)
Vue生命周期函数(钩子函数)
Vue生命周期过程中，会自动运行一些函数，被成为[声明周期钩子]->让开发者可以在[特定阶段]运行自己的代码
beforeCreate--created--beforeMount--mounted--beforeUpdate--updated--beforeDestory--destoryed
eg: beforeCreate(响应式数据准备好之前)
       created(响应式数据准备好之后)
       beforeMount(模版渲染之前)
       mouted(模版渲染之后)
       beforeUpdate(数据修改了，视图还没更新)
       updated(数据修改了，视图已经更新)
------------------------------------------------------------------------------------------------
生命周期两个例子-初始化渲染和获取焦点
------------------------------------------------------------------------------------------------
工程化开发&脚手架 Vue CLI
开发Vue 的两种方式
1.核心包传统开发模式：基于html/css/js文件，直接引入核心包，开发Vue
2.工程化开发模式：基于构建工具(例如：webpack)的环境中开发Vue
传统webpack的问题：
             1.webpack配置不简单
             2.雷同的基础配置
             3.缺乏统一标准
Vue脚手架：
基本介绍：
Vue CLI是Vue官方提供的一个全局命令工具
可以帮助我们快速创建一个开发Vue项目的标准化基础架子(集成了webpack配置)
-----其实就是我们之前在webpack中手动配置的项目目录
好处：
1.开箱即用，零配置
2.内置babel等工具
3.标准化
使用步骤：
1.全局安装(一次)：yarn global add @vue/cli 或 npm i @vue/cli -g
2.查看Vue版本：vue --version
3.创建项目架子：vue create project-name(项目名-不能用中文)
4.启动项目：yarn serve 或 npm run serve(找package.json)
注: yarn serve不是写死的，它是根据package.json配置项中的scripts来进行改动的
脚手架目录文件介绍&项目运行流程
Vue
    -public
         -favicon.ico  网站图标
         -index.html  (index.html模版文件)
        <div id="app">
         //在工程化开发模式中：这里不再直接编写模版语法，通过App.vue 提供结构渲染
        </div>
    -src
        assets   (静态资源目录->存放图片，字体等)
        components  (组件目录->存放通用组件)
        App.vue   (App根组件->项目运行看到的内容就在这里编写)
        main.js  (入口文件->打包或运行，第一个执行的文件)
使用终端在文件夹中创建好了vue-demo可以直接拖拽到VScode里面进行开发
------------------------------------------------------------------------------------------------
脚手架中的---main.js文件
//文件核心作用：导入App.vue,基于App.vue创建结构去渲染index.html
//1.导入Vue 核心包
import Vue from 'vue'
//2.导入App.vue 根组件
import App from '.App.vue'
//提示：当前处于什么环境(生产环境/开发环境)，可以将参数改成true试试
Vue.config.productionTip=false
//3.Vue实例化，提供render方法->基于App.vue创建结构渲染到index.html
new Vue({
    //el:'#app',作用：和$mount('选择器')作用一致，用于指定Vue所管理容器
   //render方法的完整写法
    render:h=>h(App),
}).$mount('#app')
注：.$mount('#app')等同于之前Vue实例中的el:'#app',
//render方法的完整写法
render:(createElement)=>{
    //基于App创建元素结构
    return createElement(App)
}
//再尝试简写一下
render:(h)=>h(App)
------------------------------------------------------------------------------------------------
组件化开发&根组件
1.组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的结构，样式，行为
   好处：便于维护，利于复用->提升开发效率
一个完整的页面可以拆分成头部组件，导航组件，主体组件，底部组件
组件分类：普通组件，根组件。
根组件：整个应用最上层的组件，包裹所有普通小组件
App.vue根组件
------------------------------------------------------------------------------------------------
App.vue文件(单文件组件) 的三个组成部分
1.先装个语法高亮插件(Vetur)
2.三部分组成：
template: 结构(有且只能一个根元素)
script: js 逻辑
style: 样式(可支持less，需要装包)
3.让组件支持less
(1) style 标签，lang="less" 开启less功能
(2) 装包：yarn add less less-loader
eg:
//逻辑部分
<script>
//导出的是当前组件的配置项
//里面可以提供data(特殊) methods computed watch 声明周期八大钩子
export default{
    created(){
        console.log(我是created')
    },
    methods:{
        fn(){
        alert('你好')
     }
   }
}
</script>
<style lang="less">
让style支持less
1.给style 加上 lang="less"
2.安装依赖包 less;less-loader (用于识别less语法; 加载less文件)
   yarn add less less-loader -D(开发依赖)
</style>
注：less-loader其实就是webpack中的加载器
------------------------------------------------------------------------------------------------
普通组件的注册使用
根组件（结构-样式-行为）
1.局部注册：只能在注册的组件内使用
   创建.vue文件(每个.vue文件都有三个组成部分)
   在使用的组件内导入并注册
使用：
     当成html 标签使用`<组件名></组件名>`
注意：
组件名规范->大驼峰命名法，如:HmHeader
eg:
components
   -HmFooter.vue
   -HmHeader.vue
   -HmMain.vue
//导入需要注册的组件
import 组件对象 from '.vue文件路径'
import HmHeader from './components/HmHeader'

export default{
   //局部注册
  components:{
   '组件名'：组件对象,
   HmHeader: HmHeader
 }
}

2025.10.29

如何创建一个vue的空项目？

1. 下载 Node.js

访问 https://nodejs.org/

下载 LTS 版本（推荐 20.x） 

2. 安装

找到下载的 .msi 文件（如 node-v20.18.0-x64.msi）

直接双击运行

按照安装向导操作，使用默认设置即可

3. 验证是否安装成功

node -v

4. 使用vite创建项目

npm create vite@latest

接着依次填写项目名称和项目所用框架 vue

# 安装依赖
npm install
# 启动项目
npm run dev

如果下载速度太慢可以设置国内镜像：

# 设置淘宝镜像
npm config set registry https://registry.npmmirror.com

注：在创建项目的文件夹上输入cmd，切换到指定的文件夹

如果你的node版本是20以上的，可以采用下面更简单的命令

1.npm create vue@latest vite-t3

2.npm install

3.npm run dev

注：

 npm create vite@latest命令 会自动【安装和配置】Vite

 但不会自动安装依赖包到 node_modules

 创建后必须运行 npm install 安装依赖

 然后才能运行 npm run dev 启动项目

感谢大家的点赞和关注，你们的支持是我创作的动力！