【vue采坑之——vue里面渲染html 并添加样式】的更多相关文章

vue采坑之——vue里面渲染html 并添加样式

在工作中,有次遇到要把返回的字符串分割成两部分,一部分用另外的样式显示. 这时候,我想通过对得到字符串进行处理,在需要特别样式的字符串片段用html标签(用的span)包裹起来再通过变量绑定就好了.不过此时绑定变量的vue指令要用v-html. 测试方案的过程很顺利.不过后面单独为自动添加的标签(span)设定需要的css样式时(直接在vue单页面的css区域加的样式),并没有起作用,浏览器检查元素style特性也没有看到设定的属性.这就很头大了.无奈,去网上去搜搜看有没有别人可以借鉴的经验,没…

VUE 采坑之旅-- Mint-ui 按需引入报出Module build failed: Error: Couldn't find preset "es2015" relative to directory "C:\\phpStudy\\PHPTutorial\\WWW\\text\\vuep\\vue-demo"

首先按照mint-ui的文档中按需引入的要求,先执行 npm install babel-plugin-component -D 然后,将.babelrc文件替换了,但是后来我又将其改了(采坑过程我也改来改去),下面附图: 接着运行,报错: 说是没有安装es2015,然后安装cnpm install babel-preset-es2015 --save-dev 然后运行: 说是没有找到mint-ui的文件,还需要安装,cnpm i mint-ui --save-dev 然后再运行,成了: 后来又…

vue采坑一：全局API

Vue.set Vue.set( target, key, value ),target不能是 Vue 实例,或者 Vue 实例的根数据对象,因为源码中做了如下判断: var ob = (target).__ob__; if (target._isVue || (ob && ob.vmCount)) { "development" !== 'production' && warn( 'Avoid adding reactive properties to…

vue 采坑

1.ref 在父组件中访问子组件实例,或者直接操作DOM元素时需要ref <input ref="ipt"> 通过this.$refs.ipt 得到此input $refs是非响应式的,不应该在模板中做数据绑定 2.自定义事件 $on  $emit <!--使用v-on在html中监听--><my-component v-on:test="callbackFun"></my-component><script&g…

vue采坑及较好的文章汇总

1:父子组件传动态传值 https://www.cnblogs.com/daiwenru/p/6694530.html  -----互传数据基本流程 https://blog.csdn.net/qq_36735409/article/details/79697192--------props驼峰接收,父组件中划线 2:Vue.nextTick 3: v-model对应变量值a要处理成指定格式提交数据库,提交的时候需要对a进行深copy得到b然后在处理成指定格式,否则双向数据绑定原理vue会报错.…

vue采坑记录

1.项目在浏览器运行的时候没有ico图标 <link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico">favicon.ico必须放在static中,放在其他地方都不行!…

vue踩坑记录:[Vue warn]: $attrs is readonly.

今天在用element-ui的DatePicker日期选择器的时候,发现每当点击一次这个组件,控制台就会报警告`[Vue warn]: $attrs is readonly`,但是也不影响实际操作效果.网上搜了一圈后,发现是使用的vue与vue-tempalte-compiler的版本不一致造成的.当时使用的vue是最新版本2.6.10,而vue-template-compiler版本是2.5.21. **解决方法:** 降低vue的版本至2.5.21. `npm uninstall vue`…

vue踩坑之路--点击按钮改变div样式

有时候,我们在做项目的时候,想通过某个按钮来改变某个div样式,那么可以通过以下代码实现: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <…

vue踩坑：vue+ element ui 表单验证有值但验证失败。

一.如图:有值但是验证失败 二. <el-form :model="form" :rules="rules"> <el-form-item label="数据模板" prop="template" > <el-col :span="20"> <el-input type="textarea" v-model="form.template…

vue项目打包采坑

1. vue项目打包采坑 1.1. vue运行报错error:Cannot assign to read only property 'exports' of object '#' 这个错误我是在打包完部署到nginx上才会报的,在本地环境可以正常运行,真坑: 网上的资料说的报错原因是export和import不兼容啥的,经过我实际测试修改,问题出在使用export导出方法的js中,import了里面包含module.exports的js,这是两种不同的表达式,作用相同,但不能一起存在:网上的方…