Vue
文章平均质量分 51
Vue框架
第一段代码
第一行代码,从开始到精通
展开
-
Vue使用Scoped属性后部分标签设置样式不生效 || /deep/语法报错并且无法启动项目
1 Scoped属性作用当 <style> 标签设置 scoped 属性后,它的 CSS 只作用于当前组件中的元素(本地和全局的概念).情况如下:使用 scoped 后,父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响(所以有时候给子组件设置的属性会发现不起作用)。在vue官方文档的vue-loader中看到如下解决方法:2 解决方案2.1 页面中混用本地和全局样式一个组件中同时原创 2022-04-30 22:19:32 · 3925 阅读 · 0 评论 -
Vue[eslint-rules配置]:解决Vue中 eslint 语法检测报错或报错改成警告 // eslint-disable-next-line to ignore the next line.
Es-lint语法严格,很多时候,在Vue中本身不应该是错的写法,在es-lint下会保证代码的严谨性友好的给一个error错误,如v-for的:key等.解决方法:在package.json中对eslintConfig进行配置,即修改或新增rules值(这个是webpack中设置,只是vue-cli集成了webpack)配置实例如下:(看rules中即可)"eslintConfig": { "root": true, "env": { "node": true原创 2022-04-20 18:31:34 · 6406 阅读 · 0 评论 -
Vue:通过浏览器控制台查看全局data值
Vue中借助data实现了数据的存储和中转,方便了界面的绑定渲染和值使用.一些时候,为了调试程序,我们可能需要通过浏览器来查看data中的值到底目前是一个什么情况,方便调试和查找问题.而现有基于Vue-cli框架和单个页面的Vue在定义时,会导致data获取值方法不相同.尤其是通过Vue-cli创建的,里面的文件都是一个个的组件,如何在控制台中修改,查看组件data里的值??(1)没有或找不到具体的Vue对象发现很多通过Vue-Cli创建的具体页面在定义data后,export时,多半没有对原创 2022-04-20 18:22:55 · 15240 阅读 · 1 评论 -
Vue中Axios发起接口请求出现跨域问题:has been blocked by CORS policy
blocked by CORS policy:Access-Control-Allow-Origin通常指的就是浏览器判断请求跨域问题导致.解决方案:1.前端设置代理的方式:在vue.config.js的配置文件中,配置代理伪装请求的方式,解决跨域:详细配置和配置属性解释,见代码注释devServer: { port: 9999, // open: true, // 设置代理 proxy: { //配置跨域 '/api': { tar原创 2022-04-15 10:52:17 · 7323 阅读 · 0 评论 -
Vue入门:计算属性computed的基本使用和特性/计算属性缓存/Vue侦听器Watch
在VUE中,对于任何复杂逻辑,我们都应当养成使用计算属性的好习惯!来看一个例子,我们假设页面某个字符在vue模版下渲染,并渲染前需要加工,如下:<div id="example"> {{ message.split('').reverse().join('') }} // 对字符切割翻转后重组</div>在上面这个地方,我们发现模板不再是简单的声明式逻辑。我们要必须看一段时间才能意识到,这里是想要显示变量message的翻转字符串。A 基本使用方法..原创 2020-08-13 18:02:55 · 1162 阅读 · 0 评论 -
Vue入门:: this.$emit:Vue父子组件传值(子父之间的通信)和splice()方法的用法
vue中子组件跟父组件通信需要使用this.$emit(),我们先来回顾一下,父组件和子组件的通讯使用什么呢?a.父组件向子组件传值:通过v-bind:的形式进行数据的传递(可直接简写为冒号) 然后子组件 使用props来接收如:// 父组件<todo-item v-bind:item="item" v-bind:index="index" v-for="(item,index) in list"></todo-item>//原创 2020-08-12 17:19:03 · 5598 阅读 · 0 评论 -
Vue入门:自定义组件(全局组件/局部组件/props/v-bind知识点)
0 组件组件是可复用的 Vue 实例,且带有一个名字.下面就是一个典型的全局组件例子,组件的名字是<button-counter>。// 定义一个名为 button-counter 的新组件Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You c.原创 2020-08-11 18:46:55 · 1509 阅读 · 0 评论 -
Vue入门:Vue常用的基本事件(v-for/v-on/v-model),实现Todo List项目为例
1 v-for:Vue循环取数v-for这里已ul->li 循环显示多个li数据为例.<body> <div id="app"> <input type="text" /> <input type="button" value="提交"> <ul> <li v-for="item in list">{{item}}</li>原创 2020-08-11 17:08:56 · 513 阅读 · 0 评论 -
Vue入门:Hello World
1 Vue安装Vue不支持IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。下载:https://cn.vuejs.org/v2/guide/installation.html2 第一个Vue实例:hello world<!DOCTYPE html><html lang="en"> <head> <meta chars..原创 2020-08-11 15:59:36 · 846 阅读 · 0 评论