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:

我是标签

   

       

{{msg}}

   

   
   
   
Vue指令 v-for
1.作用：基于数据循环，多次渲染整个元素 ->数组，对象，数字......
2.遍历数组语法：
   v-for="(item,index) in 数组"
   item代表每一项，index代表下标
   v-for里面的两个参数是可以根据需求来删除参数
   省略index: v-for="item in 数组"
 eg:
     

     

这是一个标题

       

           
• 
                  {{item}}
             

       

     

     
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:
   
   
由于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,有这个类，否则没有这个类

    适用场景：一个类名，来回切换
2.数组->数组中所有的类，都会添加到盒子上，本质就是一个class列表

    使用场景：批量添加或删除类
2.操作style
语法：style="样式对象"

eg:
     

         

     注：css对象中不能出现-，所以可以使用' '或驼峰命名法(backgroundColor)
     

使用场景：某个具体属性的动态设置
v-modal 应用于其他表单元素
常见的表单元素都可以用v-modal绑定关联->快速获取或设置表单元素的值
它会根据<<控件类型>>自动选取正确的方法来更新元素
输入框 input:text ->value
文本域 textarea ->value
复选框 input:checkbox ->checked
单选框 input:radio ->checked
下拉菜单 select ->value
注：
    前置理解：
      1.name: 给单选框加上 name 属性可以分组->同一组互相会互斥
      2.value:给单选框加上 value 属性，用于提交给后台数据(一般是一种标识)
eg:
    性别：
       男
       男
       


     前置理解：
       1.option 需要设置value 值，提交给后台
       2.select 的 value 值，关联了选中的option 的value 值
       3.在控制台中就可以选中对应的select进行修改
  eg:
      所在城市：
       
            北京
            上海
            成都
            南京
       
计算属性：
概念：基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算
语法：
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模版文件)
       

         //在工程化开发模式中：这里不再直接编写模版语法，通过App.vue 提供结构渲染
       

    -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:
//逻辑部分


注：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
 }
}

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