Vue
关注
分享
扫一扫
DangR-Jisoo
Web Sport Cook Music History
展开
-
vue安装less报错解决方案
最近想在Vue项目中使用less，想着应该很简单，直接npm install less就行了嘛，但是下载很顺利，在代码中加入less却编译出错了，原因是less的版本与less-loader版本的问题下面是我的使用步骤：然后就在控制台下载less与less-loader接着在package.json里配置文件里查看检查一下有没有安装成功，发现已经成功安装了下来就开始写less代码但是终端却报错了…由于less和less-loader是手动安装的，实在找不到解决方法，所以我就用vue-u原创 2021-09-03 17:30:07 · 964 阅读 · 0 评论 -
vue ui的安装及使用
vue ui是什么？简单来说，vue ui是一个可视化图形界面，方便你去创建、更新和管理vue项目，包括下载router，vuex，axios，elementui等插件，配置好一些属性以及依赖关系，方便我们使用，我个人第一次接触它就感觉非常非常非常智能和强大配置步骤安装Vue CLI，因为vue ui是在Vue CLI基础上封装的npm install -g @vue/cli打开C:\Users*xxxx*\AppData\Roaming\npm，看看有没有下图框出的文件将C:\Use原创 2021-09-02 19:14:06 · 36360 阅读 · 11 评论 -
Vue中路由属性以及router-view、router-link的详解
路由属性path 路由跳转所到达的路径namecomponent 路由跳转到所对应的组件redirect 路由重定位，主要设置刚进入页面时显示的组件，属性值为路径redirect:'/index'children 路由嵌套，主要实现路由跳转以及页面局部刷新router-view路由匹配到的组件将显示到此标签<router-view></router-view>router-link此标签实现路由跳转<router-link to="/index"&.原创 2021-09-02 11:37:46 · 4827 阅读 · 0 评论 -
使用idea搭建Vue项目(路由，elementui，axios，vuex)
一. 初始化项目打开idea，点击：文件、New、项目，如下图所示选择：Static Web、Vue.js，点击下一个，如下图所示填写项目名称，以及可以更改项目的存储路径，点击完成，慢慢等待即可项目构建完之后，点击package.json文件，能看到以下红框中的信息，点击箭头所指的按钮即可运行，省去了在终端敲npm run serve运行指令，如下图所示上一步完成之后，以后想运行程序点击下图中的按钮即可，也省去了敲指令的功夫，如下图所示运行完成之后打开页面如下图所原创 2021-09-01 19:32:11 · 5601 阅读 · 4 评论 -
原生Ajax，jQuery封装的Ajax以及axios
原生Ajax，jQuery封装的Ajax以及axios(接口可直接使用)原生Ajax工作原理：通过XmlHttpRequest对象向服务器发异步请求，从服务器获得数据，然后用 javascript 来操作DOM更新页面请求方式：get / post，在这里get与post的区别不做说明了，直接展示两种代码getvar xhr=new XMLHttpRequest()xhr.open('get','http://192.168.2.52:5000/query_get?name=1',tru原创 2021-08-26 16:16:31 · 347 阅读 · 0 评论 -
怎么在一个组件中使用另外一个.js文件里定义的方法
怎么在一个组件中使用另外一个.js文件里定义的方法有时候给一个组件里的某些标签定义某些方法，会使代码量变多，可读性不强，如果一个组件里需要定义数种方法，可以把这些方法抽离出来，单独放进一个.js文件里，使用起来也比较方便，代码简单且可读性强例如现在有以下需求：当输入用户名之后判断用户名是否符合"3-12位数字、字母、下划线"的规范，无疑要用到正则表达式，且当鼠标在input输入框之外点击时判断，无疑要用到@blur事件。如果我们在组件内部定义方法，代码如下：<template> &原创 2021-04-09 14:39:47 · 338 阅读 · 0 评论 -
Vue开发规范——目录结构
/dist——打包之后的文件夹，此文件夹被发布到真正的服务器上，项目完成之后，执行npm run build会形成此文件夹/public——此目录下的文件并不会被Webpack处理，它们会直接被复制到最终的打包目录，即/dist下，此文件夹里存放一些不会变动的文件，比如项目运行在浏览器时显示的小图标/node_modules——保存npm加载的项目依赖模块，即第三方包所存放的目录，使用npm install可以下载/src——存放源代码/src/api——接口文件目录，即连接服务器..原创 2021-04-06 15:33:14 · 1175 阅读 · 0 评论 -
Vue中的父子组件通信——props和$emit
Vue中的父子组件通信——props和$emit父传子——props子传父——$emit举例——父传子场景：子组件需要得到父组件data中的信息，并将其渲染到页面中<!-- 父组件 --><template> <div id="app"> <child :travel="books"></child><!-- travel是自定义的名字，但是必须跟子组件里props的属性值一样，books为父组件data里定义的值原创 2021-04-01 17:05:23 · 406 阅读 · 0 评论 -
解决Vue项目运行时Uncaught Error: [vue-router] invalid mode: [object History]的问题
前两天写项目时，最终运行发现一个奇怪的问题，浏览器报出这样的错误：[vue-router] invalid mode: [object History]，根据我们的经验，这应该不是组件创建，引用之类的相关问题，由vue-router可以看出是路由配置的问题，而且错误很明显，是mode:'history’的问题，但是当时脑子不太好使，history忘记加引号，这是一个字符串啊！！！问题成功解决！！！...原创 2021-03-10 11:39:27 · 3725 阅读 · 4 评论 -
Vue项目中控制台报错：NavigationDuplicated: Avoided redundant navigation to current location......解决办法
Vue项目中控制台报错：NavigationDuplicated: Avoided redundant navigation to current location…解决办法出现问题的原因控制台报错是因为冗余导航，也就是你在同一个导航上连续重复点击多次造成的，虽然无大碍，但控制台报错还是会令人难受解决办法办法一：在终端上安装npm i vue-router@3.0 -S如果显示上述图片表明安装成功，之后再次运行程序npm run dev，重复点击就不会报错啦办法二：在你创建的项目的route原创 2021-03-07 19:05:37 · 1194 阅读 · 0 评论 -
解决路由跳转时router-view不显示的问题
你可能会遇到点击<router-link>标签至跳转页面，但跳转页面，没有显示的问题，其原因可能是在index.js里创建的vuerouter对象里面的属性书写错误，其属性值是routes而不是routers//App.vue<template> <div id="app"> <router-link to="/home">首页</router-link> <router-link to="/about">关于&原创 2021-03-06 20:41:24 · 4471 阅读 · 2 评论 -
Vue中v-for遍历数组和对象
Vue中v-for遍历数组和对象<body> <div id="app"> <ul> <li v-for="(item,index) in arr">{{index}}.{{item}}</li> </ul> <ul> <!-- 第一种遍历方法 --> <li>{{info原创 2021-03-02 22:52:13 · 1281 阅读 · 0 评论 -
Vue条件指令v-if即v-else的使用
Vue条件指令v-if即v-else的使用Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件当v-if为true时，其所在的元素被渲染，则v-else所在的元素不被渲染举个简单的例子<body> <div id="app"> <h2 v-if="true">{{message}}</h2> <h1 v-else>我是男生</h1> </div>原创 2021-03-02 22:35:09 · 1008 阅读 · 0 评论 -
Vue中v-on的使用
Vue中v-on的使用v-on的介绍作用：绑定事件监听器缩写：@参数：event小案例(点击+数字加一，点击-数字减一)<body> <div id="app"> <h2>{{counter}}</h2> <button @click="add()">+</button>//绑定add()函数 //也可以<button v-on:click="coun原创 2021-03-02 22:14:31 · 696 阅读 · 0 评论 -
Vue中v-bind的使用
Vue中v-bind的使用我们之前学到的指令主要作用是将值插入到模板的内容之中，但是除了内容需要动态来决定之外，某些属性我们也希望动态来绑定，这时，可以使用v-bind指令v-bind指令的作用：动态绑定属性缩写(简写，语法糖)：：(一个冒号)v-bind绑定style 例如：(给h2标签的元素的颜色设置成红色，字体大小设置成50px)<body> <div id="app"> <h2 v-bind:style="{color: red,font原创 2021-03-01 23:12:00 · 443 阅读 · 1 评论 -
Vue中的插值操作及其他指令
Vue中的插值操作及其他指令插值操作<body> <div id="app"> <h2>{{message}}</h2> <h3>{{message+' '+'李银河'}}</h3>//也可以做字符串的拼接 <h4>{{lastName+' '+firstName}}</h4> <h5>{{lastName}} {{fir原创 2021-02-28 20:50:07 · 143 阅读 · 0 评论 -
Vue中的options选项
Vue中的option选项el类型：string(’#app’)或HTMLElement(document.querySelector(’#app’))作用：决定Vue实例会管理哪一个DOMdata类型：Object或Function作用：Vue实例对应的数据对象methods类型：{[key: string]:Function}作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用...原创 2021-02-28 20:35:34 · 1697 阅读 · 0 评论 -
Vue的简单使用及小案例
Vue的简介Vue的安装在官网上下载源码Vue.js，直接在代码中引用<script src="./js/vue.js"></script>Vue的初体验<body> <div id="app"> <h1>{{message}}</h1> <h2>{{name}}</h2> </div> <!-- 引入Vue.js --原创 2021-02-28 20:32:06 · 220 阅读 · 0 评论