一、Vue版本管理

1. 查看可安装的版本：npm view vue versions --json
2. 安装最新版本(V3.2.45)：npm install vue
3. 安装指定版本(V3.2.45)：npm install vue@3.2.45
4. 查看已安装版本：npm list vue
5. 卸载已安装的版本： npm uninstall vue

二、Vite版本管理

1. 查看可安装的版本： npm view vite versions --json
2. 安装最新版本(V3.2.4): npm install -g vite
3. 安装指定版本(V3.2.3): npm install -g vite@3.2.3
4. 查看已安装的版本： npm list vite
5. 卸载已安装的版本： npm uninstall -g vite

三、vue-cli版本管理(V3.0.0以下)

1. 查看可安装的版本：npm view vue-cli versions --json
2. 安装最新版本(V2.9.6)：npm install -g vue-cli@latest
3. 安装指定版本(V2.9.5)：npm install -g vue-cli@2.9.5
4. 查看已安装的版本：vue -V
5. 卸载已安装的版本：npm uninstall -g vue-cli

四、vue-cli版本管理(V3.0.0及其以上)

1. 查看可安装的版本：npm view @vue/cli versions --json
2. 安装最新版本(V5.0.8)： npm install -g @vue/cli
3. 安装指定版本(V5.0.7) ： npm install -g @vue/cli@5.0.7
4. 查看已安装版本： vue -V
5. 卸载已安装版本： npm uninstall -g @vue/cli

注释：
1.Vite仅可用于Vue3;
2.Vue-cli: v4.5以下的版本对应的是Vue2; v4.5及其以上的版本对应的是Vue3,当然在创建项目时也可选择Vue2。

五、Vue基础知识

一、npm创建项目的方式(vue3)

• 1.实现闪电般的冷服务启动：
  创建项目：cnpm init @vitejs/app projectName
  安装依赖：cnpm install
  运行项目：cnpm run dev

• 2.使用create创建项目：
  创建项目：vue create [options] projectName
  运行项目：cnpm run serve

• 3.使用ui网页可视化工具创建项目：
  创建项目：vue ui

• 4.使用webpack创建项目
  搭建桥接工具以让vue3使用init：npm i -g @vue/cli-init
  创建项目：vue init webpack projectname
  运行项目：cnpm run dev

• 5.删除依赖并重装依赖
  rimraf node_modules
  rimraf package-lock.json
  npm install

二、vue中的语法

插值语句

• 1.文本插值：

  {{ TextMessage }}

  
  一次性文本插值：

  值不会动态改变：{{ TextMessage }}

• 2.html插值(插入html代码)：

  html插值测试:

• 3.属性插值：
  

  
  
  测试动态属性的缩写

• 5.插入表达式(不能插入语句或条件控制流)：
  正确插入：

  {{ 5+5 }}
  {{ ok ? true : false }}
  
  
  错误插入：
  {{ var a = 8 }}
  或
  {{ if(ok){ return true } }}

• 6.指令插值(指令作用的元素与数据挂载的元素不能相同，否则无效果)：
  

  测试指令插值

  : v-show指令将根据表达式的值决定是否显示元素
  

  测试指令插值

  : v-if单独用根据绑定的bshow决定是否显示当前P标签，必须添加到一个元素上，若有多个元素则可添加到template上
  
• {{ site.text }}
• : v-for根据绑定的数组sites遍历其数组中的元素
  

  测试点击事件

  : v-on:用于监听Dom事件
  <p @click="doSomething>测试监听事件的缩写: @[event]监听事件的缩写
  : v-model常用于input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定
  <a href=‘https://www.baidu.com/’ @click.prevent=‘myClick’>不会跳转到百度: .prevent修饰符使用户自定义的函数，屏蔽浏览器的默认行为

判断语句

• 1.条件判断语句
  v-if：该指令单独使用时则表示根据表达式的值判断是否显示该元素；和v-else或v-else-if搭配一起使用时则表示条件判断
  v-else-if、v-else: 必须在v-if指令之后使用该指令

• 2.循环语句
  循环遍历数组：v-for=“elem in arrayObj” 遍历数组中的每一个元素值，如果数组中的元素为对象则遍历的是每一个对象
  循环遍历数组：v-for=“(elem, index) in arrayObj” 遍历数组中的每一个元素并带有索引值
  遍历对象属性值：v-for=“attrVal in Obj” 遍历对象Obj中的所有属性值，并不会显示属性名
  遍历对象属性：v-for=“(attrVal, attrName) in obj” 遍历对象Obj中的所有属性名字及其对应的值
  遍历对象并带有索引：v-for=“(attrVal, attrName, index) in Obj” 遍历对象Obj中的所有属性名和值和索引
  遍历整数：v-for=“num in 10” 只会输出[1-10]之间的数并不包含0

组件

• 1.组件：组件可以任意次数的复用
  - 1. 全局组件：
  const app = Vue.createApp({});
  app.component(‘给要注册的组件定义名称’,{
  //组件内容
  template: ‘

  我是组件元素

  ’
  });
  app.mount(‘#DivApp’);

    - 2. 局部组件：
    var myComponentA = {template: '<h1>测试组件</h1>'};
    var myComponentB = {template: '<h2>测试组件</h12>'};
    const app = Vue.createApp({
            components: {
                    'myComponentA': myComponentA,
                    'myComponentB': myComponentB,
            }
    });
    app.mount('#DivApp');
  

• 2. 组件的Props属性
     组件的Props属性：子组件必须显示的声明Props属性，以方便接收父组件传过来的数据
     var myComponentA = {
     props: [‘title’, ‘tom’],
     template: ‘

     测试组件

     ’,
     };
     const app = Vue.createApp({
     components: {
     ‘myComponentA’: myComponentA,
     }
     });
     app.mount(‘#DivApp’);
• 3. 组价的计算属性
     computed: 依赖于缓存,只有当缓存的内容发生变化时才会引起DOM元素的渲染
     Methods: 不依赖于缓存，每次DOM加载都会重新渲染元素

事件处理

    绑定事件：v-on:click="dealFunName", @click="dealFunName"
    同一事件绑定多个处理逻辑函数：@click="dealOneFun($event), dealTwoFun($event)"
    串联事件修饰符：@click.once.left="funName"
    按键修饰符：@keyup.13——只有按键码为13的按键被按下时才会响应
    按键别名修饰符：@keyup.enter,常用按键：enter、tab、delete、esc、space、up、down、left、right
    鼠标按键修饰符：.left、.right、.middle
    系统按键修饰符：.ctrl、.alt、.shift、.meta 
    exact修饰符：精确控制由系统按键修饰符修饰的事件
            eg：@click.ctrl.exact="doFun",有且仅有Ctrl键按下时才会响应
            eg: @click.ctrl="doFun", 无论是否有其它系统修饰键被按下，只要有ctrl键被按下就都会响应该事件
            eg: @click.exact="doFun", 只要在没有系统按键被按下时才会响应

表单

    v-model: 实现双向数据绑定，并且DOM元素的初始值将采用绑定的data数据区的值，而不是元素的默认值
    为输入元素checkbox添加文字说明：
             <input type="checkbox" id="google" value="Google" v-model="checkedNames">
             <label for="google">Google</label>
    v-model默认绑定的值: text 和 textarea 元素使用 value 属性和 input 事件更新value属性；并非采用元素的ID值进行关联
    v-model默认绑定的值：checkbox 和 radio 使用 checked 属性和 change 事件更新checked属性；
    v-model默认绑定的值：select 元素使用 value 属性和 change 事件更新value。
    v-model绑定到复选框的数组： 如果data中的数据绑定到多个复选框，则data中对应变量类型为数组。
    select下拉列表实现单选：<select v-model="selected" name="site">           <option value="www.baidu.com">baidu</option>  </select>
    select下拉列表实现多选：<select v-model="selected" name="site" multiple>  <option value="www.baidu.com">baidu</option>  </select>
    select构建多个选项：<select v-model="selected"><option v-for="elemObj in array" :value="elemObj.attr">{{ elemObj.text}}</option>

    对于radio、checkbox、select:
    v-model：通常默认将这些元素的value属性双向绑定到data中，即字符串类型
    
表单修饰符:
    .lazy：<input v-model.lazy="age">只有当用户输入值并按下回车Enter键后才会执行数据age的更新,不会立马更新
    .number: <input v-model.number="age">若用户输入的是数字将自动把输入值转换为数字类型并赋给age,若输入的不是数字则直接以字符串类型赋给age
    .number: <input v-model.number="age" type="number">限制用户的输入必须为数字，否则不允许用户输入
    .trim:   <input v-model.trim="age"> 自动过滤用户输入首尾的空格

自定义指令

    利用钩子函数自定义两个全局的聚焦指令，该指令会对所有实例有效：
    app = Vue.createApp({});
    app.directive('myOrderOne',{
            mounted(el){
                    el.focus();
            }
    });

    app.directive('myOrderTwo',{
            mounted(el){
                    el.focus();
            }
    });     
    app.mount("#app");
    使用上述自定义的全局指令：
    <input v-myOrderOne>
    <input v-myOrderTwo>


    利用钩子函数注册局部自定义指令：该指令仅对当前实例有效
    const app = {
            data(){
                    return "localOrder";
            },
            directives:{
                    //自定义指令，此处为对象的属性并非一个函数对象，所以不能声明为函数
                    myOrder:{
                         mounted(el) { el.focus(); }   
                    }
            }
    };
    Vue.createApp(app).mounted('#app');
    使用局部指令：<input v-myOrder>

    
    //不使用钩子函数注册全局自定义指令
    app.directive('myOrder', function (el, binding, vnode, prevNode) {
            el.style.backgroundColor = binding.value.color
    });

    钩子函数的参数：
    el: 指令绑定到的元素,用于直接操作DOM元素
    binding: 该参数是一个对象包含以下属性
            instance: 使用指令的组件实例，并非el参数代表的元素
            value: 使用自定义指令时传给自定义指令的值
            oldValue: 仅在 beforeUpdate 和 updated 中可用,值是否已更改都可用。
            arg：参数传递给指令 (如果有)。例如在 v-my-directive:foo 中，arg 为 "foo"。
            modifiers：包含修饰符 (如果有) 的对象。例如在 v-my-directive.foo.bar 中，修饰符对象为 {foo: true，bar: true}。
            dir：一个对像表示自定义指令的函数部分
    vnode：作为 el 参数收到的真实 DOM 元素的蓝图。  
    prevNode：上一个虚拟节点，仅在 beforeUpdate 和 updated 钩子中可用。     

路由

    创建如<a>功能的网页标签： <router-link to="/home">Go to Home </router-link>
    将网页地址和其对应的视图组件进行映射：const routes = [{path:'/home', component: HomeElem},  {path:'/about', component: aboutElem}];
    创建路由实例：VueRouter.createRouter( {history: VueRouter.createWebHashHistory(), routes,} );
    在要显路由视图的地方使用：<router-view>测试数据状态</router-view>;

三、前端开发知识积累

1. 各种库的使用

    sentry: 监控前端框架中的错误信息，用于排查故障
    elements-plus: 前端UI框架库
    babel: 为适应旧的浏览器或兼容性配置，在编译时将ecmascript2015的Vue语言转换为兼容性更好的ES6语言

2. 语法知识积累

    export default  age：在同一个模块中只能导出一个; 在导入时直接import  default age from XXX， 不用对age加括号{}
    export age: 在同一个模块中可以导出多个变量；导入时必须使用import {age} from XXX

    setUp： 可以实现数据的响应式动态显示、以及动态监测变化

    devDependencies与dependencies的区别： 前者是开发环境下使用，后者是开发环境生产环境均能使用；默认将采用dependencies.
    带有@的包表示该包是范围包。如果有一个包是@test/myPlugs那么你可以发布一个@my/myPlugs。如果是无范围的包，且存在一个myPlugs的包，你发布的包名就不能是myPlugs了。

• 2.1 逻辑或运算符用于中文文本：return “sdsdsd” || “未知状态”，只有两个都为空时才返回空字符串，否则返回其中第一个不为空的字符串。
• 2.2 app.config.globalProperties: 每个应用实例都会暴露一个对该应用配置设定的 config 对象，需要在挂载应用前更改这些属性；globalProperties用于注册能够被应用内所有组件实例访问到的全局属性的对象。
• 2.3 在字符串中拼接动态变量使用Esc键下方的间隔键，eg: sdsdsdsd${var}
• 2.4 箭头函数的作用：
  1.箭头函数的语法比函数表达式更简洁。
  2.箭头函数不会创建自己的this，它只会从自己的作用域链向上一层继承this。
  3.简单的函数表达式，内部没有this引用，没有递归，事件绑定，解绑定。
  4.需要调用this，且this指向和上一层作用域链保持一致时。如保证指向vue实例对象。
• 2.5 HTML内容模板元素: 一种用于保存客户端内容机制，页面加载时不会显示，运行是可以通过js实例化。
• 2.6 插槽
  1.插槽的使用方式： v-slot: sotName， 或者j简写为：#sotName。
  2.插槽相当于一个占位符，当页面没有内容显示时会显示插槽内容，组件有内容时不会显示插槽内容。
  3.插槽的声明：此处为插槽显示的内容
• 2.7 为数据添加响应式变化，后台计算然后自动刷新UI值
  reactive: 只能适用于自定义的复杂对象类型，不能用于基本类型；返回一个具有响应式的副本；访问结果中的值时不需要加.value.xxx,直接是.xxx。
  ref: 既可以针对基本数据类型，也可针对复杂对象类型; 返回一个具有响应式的副本；访问响应式状态数据时必须加.value.xxx。
  toRef/toRefs: 适用复杂类型和基本类型；用于复杂类型时并不是副本，而是对源对象的直接引用；toRef是一个个属性手动赋值，toRefs是自动赋值。

3. 路由

• 3.1 创建路由的两种历史模式：createWebHashHistory(), createWebHistory()
• 3.2 路由文件中导入页面组件的方式
  • 3.2.1 普通引入方式：
    先在index.js中文件开头导入页面组件 import myComponent from ‘…/views/MyComponent.vue’，然后再路由对象中注册组件component: myComponent; 该方式会导致在打包index.js文件时，文件会变得很非常大致加载缓慢。
  • 3.2.2 动态导入方式：
    component: ()=> import(‘…/views/MyComponent.vue’)。

4. CSS设置

• 4.1 scoped 设置的组件只对当前组件有效，当前组件内部存在其它组件时，无法控制其它组件内部元素的样式;
  • 4.1.1 在CSS中使用注释：/**/
• 4.2 设置子选择器的元素属性值高于继承的父选择器中元素的属性值：!important; 默认情况下ID选择器的优先级高于类选择器
• 4.3 选择器的使用方式
  :ele: 伪类选择器，依据当前元素状态决定，而不是来自于静态属性; eg: :first-child ，🔗，vistited，:hover:，:active，:focus，:lang
  ::ele: 伪元素选择器，eg: ::first-line，::first-letter，::before，::after
  #ele：选择id为ele的元素
  .ele: 选择所有class属性为ele的元素
  parent > div: 选择父元素下紧接著的第一个子元素并且该子元素标签为div的元素
  parent div：选择父元素下所有标签为div的子元素
  ele1 + ele2: 选择ele1元素其后紧接相邻第一个且中间无其它元素的标签为ele2的元素，还必须具有相同父元素
  ele1 ~ ele2：选择ele1元素之后的所有标签为ele2的元素，且两个元素必须具有相同的父元素
  ele1 ， ele2: 同时对ele1元素和ele2元素进行相同的样式设置