vue知识点

最新推荐文章于 2023-04-14 09:46:45 发布

努力学习前端的77

最新推荐文章于 2023-04-14 09:46:45 发布

阅读量159

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_36545813/article/details/110641434

版权

vue 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

vue cmd命令所包含知识点：

清除缓存：

npm cache clean --force

当npm install无效，

需要进行npm cache clean --force命令操作，
如果这样操作不成功的话，去C盘清空一个文件夹：
C/用户/administrator/appdata/Roaming/npm-cache 直接将路径下该文件夹右键删除
再重新npm install

路由配置的两种方式

location.hash=“url”
可以通过hash来改变href，但页面不发生刷新
history.pushState({},’’,‘url’)
也可以通过html的history改变路由且不刷新页面
replaceState()
go()
back()
forward()

安装vue-router:

npm install vue-router --save
添加–save是因为项目运行时也需要依赖路由

document.title

document.titile=“首页” 可以改变当前页的网址上的文字描述

学会使用StackOverflow和GitHub提问

在vue3项目中使用scss:

npm install sass-loader --save-dev
npm install node-sass --save-dev

https://segmentfault.com/a/1190000023737670

全局安装vue3脚手架：

npm i -g @vue/cli

vue3 通过vite初始化项目：学习vue3.0，先从搭建环境开始

yarn/npm create vite-app vue3project

一步直接创建项目。

vue add vue-next 让vue支持3.0

在vscode给vue文件创建一个模板页

=模块化开发====

1 为什么前端要做模块化开发

避免多人开发时变量重名等问题

2 模块化开发的概念

早期的模块化开发的实现，是通过匿名函数，使得多人开发时变量重名不会影响整体项目。同时将需要全局使用的变量或者函数通过return方式暴露出去–导出。这样就可以在其他位置直接使用–导入。

3 常见的模块化规范有：CommonJS, AMD, CMD, ES6的Modules

模块化开发的关键就是导出和导入的操作。

===webpack的作用/安装和使用/配置
webpack是用来模块化开发的工具。除了支持模块化开发，还可以进行打包，压缩，合并等功能。

1.1webpack安装和使用

vue脚手架 vue cli=====

1 脚手架工具的作用：

帮助完成项目的代码目录结构，项目结构和部署，热加载，代码单元测试等功能。

vue cli俗称vue项目脚手架，可以快速搭建vue开发环境以及对应的webpack配置。所以使用vue cli需要先安装node(因为webpack的使用需要先安装node，然后才能使用npm—npm为node自带的)

安装node：
直接在官网下载安装：http://nodejs.cn/download/
检测安装的node版本：
node环境要求版本 >= 8.9
什么是NPM？node package manager
npm是一个nodejs包管理和分发工具，已经成为非官方的发布node模块的标准

国内直接使用npm的官方镜像非常慢，所以推荐使用淘宝npm镜像。
npm install -g cnpm --registry=https://registry.npm.taobao.org

一般org网址都是非营利性的。com结尾的网址是营利性的

安装vue cli3版本，既可以使用3版本，也可以使用2版本。所以直接安装3版本cli就好了。

npm install -g @vue/cli   安装vue cli3
cli3版本下创建vue项目：
vue create projectname

如果按照3版本后想要使用2.x旧版本。可以通过命令直接拉取旧版本
npm install -g @vue/cli-init
cli2版本下创建vue项目：
vue init webpack projectname

runtime compiler / runtion only的区别========

============vue所包含知识点：

1 input/button具有特别的监听事件

input有个特有的动态监听事件，用来监听表单数据value的变化。v-on:input/@input
当input表单内数据value发生变化时会触发:input监听事件

button也有特有的监听事件

2 浏览器的event对象

cli(event) {
  //@click="cli" 当调用方法不传参不加括号时，会自动调用浏览器产生的event对象
  console.log(event);
},
cli0(val,event) {
  //@click="cli0(123,$event)" 当需要调用浏览器的event对象又需要传参时。event+$符号
  console.log(val);
  console.log(event);
},

3 v-model实现数据双向绑定的原理

v-model实现数据双向绑定的原理：
v-model实际上使得vue做了两步操作：

1.v-bind  model--->view
2,input的特有监听事件@input     view--->model

4 data() { return {} }

为什么vue在设计的时候data是一个函数，而不是直接一个对象？
因为对象return的是同一片内存空间。这样会导致组件在复用时，所有复用组件使用同一片内存地址。导致数据紊乱。
data必须是一个函数。每调用一个组件实例，就会调用一个data函数。而函数return的是一片新的内存地址。这样使得所有复用的组件之间互不影响。

组件化开发：========

5 父子组件之间传值

++ 5.1 父组件向子组件中传值：

props:['变量1','变量2','变量3'];//最基础的写法，数组类型，不推荐
props:{//对象类型，推荐。可以对传过来的值进行类型审核和简单验证，同时也方便阅读和简单维护
    propA:Number,//基础的类型检查
    propB:[String,Number],//多个可能的类型
    propC:{//必填的字符串
        type: String,
        required:true
    },
    propD:{//带默认值的数字类型
        type:Number,
        default:100
    },
    propE:{//带默认值的对象
        type:Object,
        default:function() {//Object or Array的默认值是一个函数
            return { msg:'hi' }
        }
    },
    propF:{//自定义验证函数
        validator:function(value) {
            //这个值必须匹配下列字符串中的一个
            return ['','',''].indexOf(value) !== -1;//返回值true or false 
            //arr.indexOf(item) 判断数组arr中是否包含元素item。如果不包含则返回-1
        }
    }
}

++ 5.2 子组件向父组件传值：

在子组件中使用this.$emit(‘func’,value)

在父组件调用子组件时:
<son @func="sonhappen"/>
methods:{
    sonhappen(value) {
        //注意，父组件中此处接收的值都是string类型。
        console.log(value)
    }
}

6 父子组件之间的访问

++父组件直接访问子组件：

this.$children：   数组类型  一般不使用$children来拿子组件数据。而是使用$refs
    可以访问父组件的所有子组件对象，包括子组件的子组件；可以访问子组件的所有数据。
this.$refs:  对象类型  好像行不通啊？？
    <son ref="name" />
    this.$refs.name可以访问到son子组件的所有数据。name会作为子组件对象的key值。

++子组件访问父组件：

this.$parent：可以在子组件中访问到父组件对象。一般开发中不使用。会影响组件的独立性。
this.$root：可以在子组件中访问根组件即vue实例对象

7 v-bind

v-bind不支持驼峰写法
v-bind:cInfo="info"   这样写会出现值传递失败的情况  需要改成v-bind:c-info="info"

8 计算属性

计算属性存在缓存。在多次调用时，由于存在缓存，只会执行一次。
与methods的区别：methods调用几次执行几次

9 插槽 slot

插槽的作用：为了让组件具有可扩展性。

9.1基本插槽的使用：

在自定义的组件中使用<slot></slot>。可以在插槽内填入默认内容。
在引用组件时，可以在组件内直接填入内容。就可以替换子组件内插槽的默认内容。

9.2具名插槽的使用：

一个子组件内可能存在多个插槽，当引用子组件时，可能只希望替换其中某一个插槽的内容。这时候就可以使用具名插槽。即给每个slot一个特有的name属性值。

    在子组件中：
        <slot name="left"></slot>
        <slot name="center"></slot>
        <slot name="right"></slot>
    在父组件中引用子组件时：
        <son><div slot="center">我要把son组件内的center插槽内容替换掉</div></son>

9.3作用域插槽：

—有个需求：子组件中包含一个数组数据。需要在不同的位置进行展示。有的地方水平展示，有点地方纵列展示，有的位置直接显示一个数组。希望父组件告知子组件具体如何展示。

—以上需求就可以使用作用域插槽。展示数据由子组件提供。但展示方式由父组件决定。
—所以需要先在父组件中拿到子组件的数据：
1,在子组件中将子组件的数据绑定到abc： [abc可以随意更改成你喜欢的名字]

        在son组件中：
         <div>
             <slot :abc="sondata">
                 子组件默认展示
             </slot>
         </div>

2，在父组件中引用子组件son时，使用拿到子组件数据： slot.abc就是从子组件获取到的数据

        <son>
            <template slot-scope="slot">
                <span v-for="item in slot.abc"></span>
            </template>
        </son>

10 this. $r o u t e r t h i s .$ route

this. $r o u t e r 指的时 n e w V u e 的实例对象 t h i s .$ router.push/this. $r o u t e r . r e p l a c e t h i s .$ route 指的是当前活跃状态下的路由对象
{ path:’/user/:abc’,component:user } this.$route.params.abc

11 所有的组件都继承自vue类的原型

所以通过Vue.prototype.自定义的方法和变量，整个vue项目中的所有组件都可以使用变量或方法

12 全局导航守卫

https://blog.csdn.net/qq_36545813/article/details/109510815

13 router-view是VueRouter的组件。

13 keep-alive是vue内置的组件，

可以使被包含的组件保留状态，或避免重新渲染；
被包裹在keep-alive里面的组件，所有路径匹配到的视图组件都会被缓存。

keep-alive有两个非常重要的属性，开发者可以自由定义哪些组件需要被缓存，哪些组件需要被重复创建和销毁【一般存在每次进入路由都需要重新更新的情况】
–inclue属性：只有相匹配的组件才会被缓存–字符串或正则
–exclue属性：任何相匹配的组件都不会被缓存–字符串或正则
比如app.vue下有a b c 3个组件，且全部都被keep-alive包裹，但我需要每次切换到组件C时都重新创建。
可以这样操作： c是组件的name值。如果需要排除多个组件，使用逗号分隔就好，需要注意的是不能多添加空格，否则会出错

<!-- vue组态实现矩形在画布内移动： -->
<template>
    <div
    id="test"
    @mousemove="get"
    :style="{'left':fastartLeft+'px','top':fastartTop+'px'}">
        <h1>测试vue组态--实现移动和拖拽</h1>
        <p>鼠标坐标：</p>
        <p>{{left}}</p>
        <p>{{top}}</p>
        <p>移动元素的坐标</p>
        <p>{{positionx}}</p>
        <p>{{positiony}}</p>
        <div 
        id="son"
        @mousedown="move" 
        :style="{'left':positionx+'px','top':positiony+'px'}">
            <p>元素可移动</p>
        </div>
    </div>
</template>
<script>
export default {
  name: 'test',//在画布内移动矩形   https://blog.csdn.net/weixin_39090097/article/details/82385986?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-8.compare&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-8.compare
  data () {
      return {
          left:0,//鼠标坐标
          top:0,
          fastartTop:100,//父盒子初始位置
          fastartLeft:300,
          positionx:0,//移动元素初始位置
          positiony:0
      }
  },
  methods: {
      get(e) {
        this.left = e.clientX;
        this.top = e.clientY;
      },
      move(e) {
          let odiv = e.target;//获取目标元素
          let x = e.clientX - odiv.offsetLeft;//鼠标相对点击元素的位置=鼠标位置-元素相对外层元素的位置
          let y = e.clientY - odiv.offsetTop;
          console.log(odiv.offsetLeft,odiv.offsetTop);
          document.onmousemove = (ev) => {//当画布被点击并且鼠标按下后在画布上发生移动时，
              let left = ev.clientX - x;//获取拖拽元素的位置
              let top = ev.clientY - y;
            //   this.positionx = left;
            //   this.positiony = top;
              //将拖拽元素放到当前位置
              if(left <= 0) {
                  left = 0;
              }
              else if(left >= document.documentElement.clientWidth - odiv.offsetWidth) {
                  left = document.documentElement.clientWidth - odiv.offsetWidth;
              }
              if(top <= 0) {
                  top = 0;
              }
              else if(top >= document.documentElement.clientHeight - odiv.offsetHeight) {
                  top = document.documentElement.clientHeight - odiv.offsetHeight;
              }
              this.positionx = left;
              this.positiony = top;
          }
          document.onmouseup = (en) => {
              document.onmousemove = null;
              document.onmouseup = null;
          }
      }
  }
}
</script>
<style scoped>
#test {
    background: yellowgreen;
    width: 1600px;
    height: 500px;
    color: white;
    position: relative;
    /* top: 100px; */
    /* left: 300px; */
}
#son {
    width: 100px;
    height: 100px;
    background:rgb(248, 160, 160);
    position: absolute;
    /* top: 0; */
    /* left: 0; */
}
</style>

<!-- vue组态实现矩形在画布内拖拽：由8个点来控制矩形的放大缩小 -->

使用vuex

npm i vuex -S
npm i es6-promise -S

使用码云gitee https://blog.csdn.net/qq_36545813/article/details/105673756

在码云新建仓库并第一次将本地代码提交
在控制台：
git comfig --global user.name ‘677’
git config --global user.email ‘1592713356@qq.com’
创建本地git仓库：
mkdir storename
cd storename
git init
touch READEME.md //注意：如果报错touch:无法将’touch’项识别为cmdlet… 安装touch :npm install touch-cli -g 安装后再执行touch READEME.md
git add READEME.md
git commit -m ‘first commit’
git remote add origin https://gitee.com/…
git push -u origin master

引用echarts图表

npm install echarts --save
在引用echarts的组件内import echarts from ‘echarts’
绘制一个图表：
1,准备一个具备宽高的容器：

2,通过echarts.init初始化一个echarts实例： var myPie = echarts.init(document.getElementById(‘pie’))
3,通过setOption方法生成图表：
var option = {}
myPie.setOption(option)

#Vuex中执行完mutations，更新了state后，视图不更新 vuex中state数据是异步渲染的。初始渲染的是state中的默认数据。在渲染时去获取三层表达式中的属性值，此时对象还不存在，获取不到值。这样就会造成，在界面上可以正常打印出值，但是
https://blog.csdn.net/edc3001/article/details/86833558

努力学习前端的77

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue知识点

vue cmd命令所包含知识点：清除缓存：npm cache clean --force当npm install无效，需要进行npm cache clean --force命令操作，如果这样操作不成功的话，去C盘清空一个文件夹：C/用户/administrator/appdata/Roaming/npm-cache 直接将路径下该文件夹右键删除再重新npm install路由配置的两种方式location.hash=“url”可以通过hash来改变href，但页面不发生刷新hi
复制链接

扫一扫