![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
月亮的-影子
努力学习,相信未来
展开
-
Vue的简单整合
Vue的简单整合做了两次狂神老师的Vue项目,现在总结一下。可能会遇到的问题:没有安装好环境,包啊之类的千万不要点npm audit fix --force这个上次点了之后webpack server就不生效了如果发现页面错误,很有可能就是传参出问题,或者是拼写的字符串写错了还有一个坑就是axios的下载,可能npm audit fix之后还会报错,但是没关系,直接用就好了,只要下载完就可以了,可以fix一下,然后直接用。这里是整合版:跟之前很像,但是比较完整的。现在给出步骤:还是原创 2021-02-04 11:20:00 · 646 阅读 · 0 评论 -
Vue路由钩子
Vue路由钩子beforeRouteEnter(to,from,next)这个就是其中一个路由钩子,相当于是拦截器,to是相当于request,from相当于是response,next就是跳转的意思。通常可以使用next(vm=>{xxx})来获取vm方法里面的数据,也就是可以使用组件里面的方法。所以我们就可以根据这个调用,可以在方法里面使用axios来请求别的资源.在这代码(Profile.vue)<template> <div> <h1>个原创 2021-02-03 19:36:50 · 327 阅读 · 0 评论 -
Vue的参数传递和重定向
Vue的参数传递和重定向参数传递这个地方比较麻烦,直接给步骤理清一下思路首先要确定在Header.vue里面的组件’个人信息’,写入传递参数:to="{name:xxx ,params:{xx:xx}}"然后需要在index.js里面文件在路由的路径上表明可以接收参数:xx然后需要在接收参数的组件Profile.vue声明可以接收参数,接收参数有两种方式,第一种$route.params.xxx,第二种就是组件接收参数的属性props:[xx,xx],但是需要在路由上面声明可以接收参数props:原创 2021-02-03 17:40:34 · 653 阅读 · 0 评论 -
路由嵌套
路由嵌套(前提是要构建过Vue与ElmentUI上一篇文章)路由嵌套其实也不难,其实就像是组件搭积木一样,我们把小路由放在大路由上面就可以了。然后重新搭建一下Header也就是首页(老师里面的Main文件)代码(Header.vue)<template> <el-container style="height: 500px; border: 1px solid #eee"> <el-aside width="200px" style="background-c原创 2021-02-03 17:08:11 · 53 阅读 · 0 评论 -
Vue与elementUI
Vue与elementUI(狂神老师的案例)在这之前先对一些常见命令做一个总结:npm install moduleName:安装模块到项目目录下npm install -g moduleName:-g就是把模块安装到全局,具体看npm config prefix的位置npm install --save moduleName:–save把模块安装到项目目录下,并在package文件的依赖节点写入依赖 简写-Snpm install --save-dev moduleName:这个就相当于在原创 2021-02-03 16:39:06 · 264 阅读 · 0 评论 -
Vue-router
Vue-router使用Vue-Router的首先需要下载相关的包,在命令行执行npm install vue-router --save-dev来下载。接下来讲一下步骤首先创建一些组件,然后写一些内容在上面的template然后创建router文件夹,创建一个index.js文件,这个文件是用于加载和启动路由的,可能会遇到问题就是忘了加上Vue.use(VueRouter),然后main.js就无法生效在main.js里面导入路由所在的文件,并且在Vue对象上面加上router这个属性,负责加原创 2021-02-03 15:15:32 · 75 阅读 · 0 评论 -
webpack打包
webpack打包(前提是下载好nodejs,而且下载了moudle,初始化了项目)首先在命令行执行npm install webpack -g然后就执行 npm install webpack-cli -g然后打开项目,创建一个文件夹,两个js文件,一个输出exports,一个输入require并且执行输出的js文件里面的对外开放的方法创建webpack.config.js,一定要是这个名字,不然会报‘can’t resolve ‘’./src’’ in xxx这个错。最后在idea的命令行原创 2021-02-03 12:53:11 · 136 阅读 · 0 评论 -
Vue-cli安装
Vue-cli安装(去到命令行,下载nodejs之后它会自动加入到路径)首先需要去官网下载nodejs然后把npm -v来查看一下是否下载成功执行npm install cnpm -g来下载moudle然后找一个文件存放第一个vue-cli项目,执行命令npm init wbpack (随便取个名字)myvue,然后全部选no,默认就回车。然后进入myvue也就是你创建的项目,然后npm install配置环境,就像是maven导jar包那样最后在项目的命令行执行npm run dev开启项原创 2021-02-03 10:29:28 · 55 阅读 · 0 评论 -
Vue自定义事件内容分发
Vue自定义事件内容分发这个案例也是狂神老师的。现在说一下这个this.emit(′方法′,′参数′),这个触发自定义事件,而自定义事件需要在组件的头上面写v−on:命名(′想要调用的方法′)。看上去非常复杂,其实不然,多练习几次会发现,只需要注意props的参数,方法参数的添加,写好方法名就可以了。其实它只不过就是组件调用vue里面的方法删除数据罢了,通过视图的一个小操作,相当于是给Vue.component和Vue对象做一个连接,也就是这个v−on就是一个连接,而emit('方法','参数'),这个原创 2021-02-02 20:16:35 · 316 阅读 · 0 评论 -
Vue的slot
Vue的slot这里的slot可以动态的绑定然后把模板插入。但是语法非常复杂,需要多次联系,但是有一个点要记住就是每次传进component的参数一定要一一对应比如 props:[‘xxx’],那么我们在引用这个component的时候就一定要传入xxx=“值”代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</t原创 2021-02-02 18:21:28 · 92 阅读 · 1 评论 -
计算属性
计算属性关于计算属性其实类似于mybatis里面的缓存,而且它是一个属性。我们可以在vue对象里面创建methods方法,同时也可以创建computed方法,而computed里面的方法也可以是属性,如果方法里面的属性被改动的话,缓存就会刷新。而methods里面无论属性是否改动,他都会刷新,因为它并没有缓存。代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2021-02-02 17:52:04 · 58 阅读 · 0 评论 -
axios的简单入门
axios的简单入门axios可以发送一个异步请求,类似于ajax,但是vue里面更推荐使用axios。但是axios的语法需要注意,它是一个连接式的编程。使用步骤:1.引入vue和axios的文件2.写dom元素,然后用vue对象绑定3.通过axios来请求资源和数据,其中使用vue中的data()方法来接收数据,mounted()来做异步请求代码:<!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org原创 2021-02-02 17:35:10 · 94 阅读 · 0 评论 -
Vue的组件
Vue的组件Vue的组件其实就是一个我们自定义的标签,然后使用vue里面的模板对象来输出html样式的语句。这么讲有点抽象直接给出例子,但是需要注意的是v-bind:后面跟着的可以理解为是参数键值对,然后{{xx}}这个就像是Map里面的get方法。我们通过Vue对象来绑定Dom元素,然后通过v-bind来绑定数据输出的位置,v-for来循环遍历输出数据数组。代码:<!DOCTYPE html><html lang="en"><head> <me原创 2021-02-02 16:57:25 · 52 阅读 · 0 评论 -
Vue双向绑定
双向绑定其实双向绑定也不难,意思就是无论view和model任意一个改变了,都会影响对方的值。我们可以使用v-model来实现绑定注意问题:select的绑定是要绑定在标签而不是绑定在上的代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https原创 2021-02-02 16:38:58 · 47 阅读 · 0 评论 -
Vue的基本语法
Vue的基本语法1.v-bind绑定数据,让数据在这里输出,这里别忘了需要命名空间2.v-for循环遍历3.v-if、v-else-if、v-else判断语句代码(test)<!DOCTYPE html><html lang="en" xmlns:v-if="http://www.w3.org/1999/xhtml" xmlns:v-for="http://www.w3.org/1999/xhtml"><head> <m原创 2021-02-02 16:04:34 · 58 阅读 · 0 评论