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 . router this. routerthis.route
this.
r
o
u
t
e
r
指
的
时
n
e
w
V
u
e
的
实
例
对
象
t
h
i
s
.
router 指的时newVue的实例对象 this.
router指的时newVue的实例对象this.router.push/this.
r
o
u
t
e
r
.
r
e
p
l
a
c
e
t
h
i
s
.
router.replace this.
router.replacethis.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