如何解决vue.js组件中template内容不能换行的问题? 5C

sublime环境下,我用vue.js的时候,写一个组件,在template写入内容,代码不能换行,必须在代码写成一整行才不会报错。这样我组件的内容简单的还好,要是写一个复杂的内容的话,调试和日后修改会非常麻烦(所以代码排成一行),问下应该怎么解决?(初学vue,若是常识性弱智表达,大佬勿喷)

6个回答

有es6的语法,看这个符号

`<div></div>` 

就是div外面这个符号

是类似下面的吗

Vue.component('file-infor',{//模型详细信息条目的复用组件
    props:['attribute'],
    template:'\
    <div class="tc-form-li">\
        <label for="">{{attribute[0]}}:</label>\
        <div class="tc-input disabled"><input type="text" :value="attribute[1]" disabled="disabled"></div>\
    </div>\
    \ '
});

我感觉你的问题不是换行 是组件必须要有一个根节点 就是先写一个容器 比如div 所有的内容都在这个容器中写

楼上说的根节点问题很有可能哦,报错也可能是编辑器的语法检查设置没弄好,或者你的ESlint配置没弄好

用反字符号,就是感叹号键左边的那个

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
Vue.js 关于Vue.js中样式引入问题
``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue.js组件</title> </head> <body> <div id="app"> <counter heading="完美极了" bgcolor="green"></counter> <counter heading="糟糕透了" bgcolor="red"></counter> </div> <template id="mycounter"> <div class=""> <h1>{{ heading }}</h1> <button type="button" name="button" @click="plus" style="background:{{ bgcolor }}">赞赞赞{{ count }}</button> </div> </template> <script src="vue.js" type="text/javascript"></script> <script type="text/javascript"> Vue.component("counter",{ template:"#mycounter", data:function(){ return { count : 0}; }, props:["heading","bgcolor"], methods : { plus : function(){ this.count += 1; } } }); new Vue({ el : "#app" }); </script> </body> </html> ``` 上面的代码中 <button type="button" name="button" @click="plus" style="background:{{ bgcolor }}">赞赞赞{{ count }}</button> 这一行报错,报错信息为: Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div style="{{ val }}">, use <div :style="val">. 改为: <button type="button" name="button" @click="plus" v-bind:style="background:{{ bgcolor }}">赞赞赞{{ count }}</button> 后仍然报错! 请问大家,这里应该怎么正确引入父组件传过来的bgcolor作为button的背景色?
Vue2.0使用ElementUI的组件报错
问题截图: ![图片说明](https://img-ask.csdn.net/upload/201903/29/1553828313_461442.png) 问题描述: 编译工具webstorm,使用npm命令 dev运行项目报错。 搭建过程: 按照官方教程执行了 1.使用命令安装element组件 ``` npm i element-ui -S ``` 2.安装babel组件 ``` npm install babel-plugin-component -S ``` 3.main.js引用 ``` import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.config.productionTip = false Vue.use(ElementUI); ``` 4.页面中使用element组件 ``` <template> <div>2</div> <el-row> <el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el-button type="success">成功按钮</el-button> <el-button type="info">信息按钮</el-button> <el-button type="warning">警告按钮</el-button> <el-button type="danger">危险按钮</el-button> </el-row> </template> ``` .babelrc文件修改后报错,es2015,安装后无法使用,还原成系统默认配置。 以下为相关文件的具体内容: package.json ``` { "name": "vuetest3", "version": "1.0.0", "description": "A Vue.js project", "author": "811204266@qq.com <123456>", "private": true, "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "unit": "jest --config test/unit/jest.conf.js --coverage", "e2e": "node test/e2e/runner.js", "test": "npm run unit && npm run e2e", "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs", "build": "node build/build.js" }, "dependencies": { "axios": "^0.18.0", "babel-polyfill": "^6.26.0", "vue": "^2.5.2", "vue-router": "^3.0.1" }, "devDependencies": { "autoprefixer": "^7.1.2", "babel-core": "^6.22.1", "babel-eslint": "^8.2.1", "babel-helper-vue-jsx-merge-props": "^2.0.3", "babel-jest": "^21.0.2", "babel-loader": "^7.1.1", "babel-plugin-component": "^1.1.1", "babel-plugin-dynamic-import-node": "^1.2.0", "babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0", "babel-plugin-transform-runtime": "^6.22.0", "babel-plugin-transform-vue-jsx": "^3.5.0", "babel-preset-env": "^1.3.2", "babel-preset-es2015": "^6.24.1", "babel-preset-stage-2": "^6.22.0", "babel-register": "^6.22.0", "chalk": "^2.0.1", "chromedriver": "^2.27.2", "copy-webpack-plugin": "^4.0.1", "cross-spawn": "^5.0.1", "css-loader": "^0.28.0", "eslint": "^4.15.0", "eslint-config-standard": "^10.2.1", "eslint-friendly-formatter": "^3.0.0", "eslint-loader": "^1.7.1", "eslint-plugin-import": "^2.7.0", "eslint-plugin-node": "^5.2.0", "eslint-plugin-promise": "^3.4.0", "eslint-plugin-standard": "^3.0.1", "eslint-plugin-vue": "^4.0.0", "extract-text-webpack-plugin": "^3.0.0", "file-loader": "^1.1.4", "friendly-errors-webpack-plugin": "^1.6.1", "html-webpack-plugin": "^2.30.1", "jest": "^22.0.4", "jest-serializer-vue": "^0.3.0", "nightwatch": "^0.9.12", "node-notifier": "^5.1.2", "optimize-css-assets-webpack-plugin": "^3.2.0", "ora": "^1.2.0", "portfinder": "^1.0.13", "postcss-import": "^11.0.0", "postcss-loader": "^2.0.8", "postcss-url": "^7.2.1", "rimraf": "^2.6.0", "selenium-server": "^3.0.1", "semver": "^5.3.0", "shelljs": "^0.7.6", "uglifyjs-webpack-plugin": "^1.1.1", "url-loader": "^0.5.8", "vue-jest": "^1.0.2", "vue-loader": "^13.3.0", "vue-style-loader": "^3.0.1", "vue-template-compiler": "^2.5.2", "webpack": "^3.6.0", "webpack-bundle-analyzer": "^2.9.0", "webpack-dev-server": "^2.9.1", "webpack-merge": "^4.1.0" }, "engines": { "node": ">= 6.0.0", "npm": ">= 3.0.0" }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ] } ``` 页面文件home.vue ``` <template> <div>2</div> <el-row> <el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el-button type="success">成功按钮</el-button> <el-button type="info">信息按钮</el-button> <el-button type="warning">警告按钮</el-button> <el-button type="danger">危险按钮</el-button> </el-row> </template> <script> export default { name: 'home', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script> <style scoped> </style> ``` main.js ``` // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.config.productionTip = false Vue.use(ElementUI); /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' }) ``` router/index.js ``` import Vue from 'vue' import Router from 'vue-router' import Home from '@/page/Home' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Home', component: Home } ] }) ```
vue 引入外部组件的正确写法应该是怎样的
正确应该怎么写??我自己琢磨的,怎么写怎么错。。网上没有入门的说明,只有入门后的一堆说明。。 ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <runoob></runoob> </div> <script> import runoob from './js/test.vue'; //引用 // 创建根实例 new Vue({ el: '#app', components:{ 'runoob':runoob } }) </script> </body> </html> `` 外部组件test.vue` ```<template> <h1>自定义组件!</h1> </template> <script> export default { name: "runoob" } </script> <style> </style> ```
怎么让vue组建里的template换行不报错,我用的是visual studio code英文版
![图片说明](https://img-ask.csdn.net/upload/202002/16/1581823312_300556.png)
关于 vue 父子组件之间的通信问题
请各位大神帮我看看问题在哪里,不知道为啥传值失败了,小弟初学前端,功力太浅,望各位大神指教! 这是 html 部分: ![图片说明](https://img-ask.csdn.net/upload/201907/23/1563870679_740417.png) 这是 js 部分: ![图片说明](https://img-ask.csdn.net/upload/201907/23/1563870839_855272.png) 多谢各位大神! ---------------------------------------更新线--------------------------------- 这是源代码: ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <div> <input v-model="parentMsg"> <br> <child v-bind:message="parentMsg" @fromChild="change"></child> </div> </div> <script> // 注册 Vue.component('child', { // 声明 props props: ['message'], // 同样也可以在 vm 实例中像 “this.message” 这样使用 template: '<span @click="toParent">{{ message }}</span>', methods: { toParent: function () { this.$emit('fromChild', '子向父传值,改变父的值。'); console.log("It has worked!"); } } }) // 创建根实例 new Vue({ el: '#app', data: { parentMsg: '父组件内容' }, methods: { change: function (msg) { this.parentMsg = msg; console.log(msg);//没有结果,控制台没报错。 } } }) </script> </body> </html> ```
关于Vue自定义组件的错误
``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="vue.js" type="text/javascript"></script> </head> <body> <div id="app"> <fuqin></fuqin> </div> <template id="t1"> <div> 父组件, {{attr}} <erzi></erzi> </div> </template> <template id="t2"> <div> 子组件, {{attr1}} </div> </template> <script type="text/javascript"> var vm=new Vue({ el:'#app', components:{ "fuqin":{ template:"#t1", data(){ return{ attr:"父组件的数据" } } }, components:{ 'erzi':{ template:"#t2", data(){ return{ attr1:"子组件的数据" } } } } } }); </script> </body> </html> ``` 大佬帮我看看哪错了 这里是报错: [Vue warn]: Unknown custom element: <erzi> - did you register the component correctly? For recursive components, make sure to provide the "name" option. found in ---> <Fuqin> <Root>
Vue.js怎么嵌套后,页面渲染失败?求解答
``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> <script src="node_modules/vue-router/dist/vue-router.js"></script> <style> .router-link-active { font-size: 20px; color: red; } </style> </head> <body> <div id="box"> <ul> <li> <router-link to='/home'>主页</router-link> </li> <li> <router-link to='/news'>新闻</router-link> </li> </ul> <!--路由配置的组件将会渲染在这里--> <div> <router-view></router-view> </div> </div> <template id="home"> <h3>我是主页</h3> <div> <ul> <li> <router-link to='/home/login'>登陆</router-link> </li> <li> <router-link to='/home/resgist'>注册</router-link> </li> </ul> </div> <h2>{{$route.params.id}}</h2> <div> <router-view></router-view> </div> </template> <template id="news"> <div> <h3>我是新闻</h3> <ul> <li> <router-link to='/news/detail'>详细</router-link> </li> </ul> </div> <div> <router-view></router-view> </div> </template> <template id="login"> <div> <p>请登录</p> </div> <div> <router-view></router-view> </div> </template> <template id="resgist"> <div> <p>请注册</p> </div> <div> <router-view></router-view> </div> </template> <template id="detail"> <div> <!-- <h2>Details:{{$route.params.id}}</h2>--> </div> <div> <router-view></router-view> </div> </template> </body> <script> var Home = { template: '#home' }; var News = { template: '#news' }; var Login = { template: '#login' } var Resgist = { template: '#resgist' } var Detail = { template: '#detail' } //创建router实例 var router = new VueRouter({ routes: [ { path: '/home/:id', component: Home, children: [ {path: 'login', component: Login}, {path: 'resgist', component: Resgist} ] }, { path: '/news/:id', component: News, children: [ {path: 'detail', component: Detail} ] } ] }); //创建和挂载根实例 var app = new Vue({ router: router }).$mount('#box'); </script> </html> ```
创建vue组件过程中,无错误提示,却显示不出
在浏览器控制台,都没提示错误,但是页面中为什么显示不出 ``` <body> <div id="app"> <my-com></my-com> </div> <script> var Com1 = Vue.extend({ template: '<div><h3>这是</h3></div>' }) Vue.component("my-com", Com1) var vm = new Vue({ el:'', data: {}, methods: {}, }); </script> </body> ```
(请教0.0)vue中开发环境中资源引用和打包后的资源引用
## vue中开发环境中资源引用和打包后的资源引用 我的问题如下: 首先上我的工程结构![图片说明](https://img-ask.csdn.net/upload/201901/08/1546915599_87186.png) ## # 1.第一个问题 在backMusic组件中引用static中的img文件里的图片需要../../../static/img/****来引用,但是为什么引用audio的音频是只需要./static/audio/****就行呢,我试过用引用音乐的方式来拿图片,就报错了!我很迷惑,这是我的第一个问题 ## # 2.第二个问题 打包上传服务器时我设置了 assetsPublicPath: './', 这个属性含义是不是会把我<template>标签中关于资源路径引用地址全部替换为./static/******(比如../../../static/img/****替换为./static/img/*****),我不知道这样理解对不对。还有我发现如果我在<template>标签中直接写死的路径打包后他会替换,但是如果是在下面<script>标签中动态添加的,他就不会替换!这个问题要怎么解决呢?
vue项目如何使用render函数写一个类似组件模版的递归组件?
如下是我用emelent-ui组件写的一个导航组件。由于有多个子级菜单,这里使用了递归。 **首先,父组件是如下这样的** ``` <template> <el-menu background-color="#303133" text-color="#C0C4CC" active-text-color="#409EFF" class="el-menu" :collapse="true" > <navs :asideNav="asideNav"></navs> </el-menu> </template> <!-- :collapse="false" --> <script> import Navs from './components/Navs' export default { name: 'AsideNav', components: { Navs }, props: { asideNav: Array } } </script> <style lang="stylus" scoped> .el-menu--collapse>div>.el-menu-item span, .el-menu--collapse>div>.el-submenu>.el-submenu__title span height: 0 width: 0 overflow: hidden visibility: hidden display: inline-block .el-menu--collapse>div>.el-menu-item .el-submenu__icon-arrow, .el-menu--collapse>div>.el-submenu>.el-submenu__title .el-submenu__icon-arrow display: none; .el-menu border: none .el-menu:not(.el-menu--collapse) { width: 200px } ul color: #fff </style> ``` **子组件是如下这样的** ``` <template> <div> <el-submenu v-for="item of asideNav" :key="item.url" :index="item.url" v-if="item.son"> <template slot="title"> <i class="iconfont">{{item.icon}}</i> <span slot="title">{{item.name}}</span> </template> <navs :asideNav="item.son"></navs> // 递归自调用 </el-submenu> <el-menu-item v-else :index="item.url"> <i class="iconfont">{{item.icon}}</i> <span slot="title">{{item.name}}</span> </el-menu-item> </div> </template> <script> import Navs from './Navs' export default { name: 'Navs', components: { Navs }, props: { asideNav: Array // 父组件传递过来的json数据 } } </script> <style lang="stylus" scoped> </style> ``` 以上代码实际上已经解决了我要实现的无限级导航的要求,但有一个小bug。我这样写完以后,由于子组件模版内的根元素必须有一个div,所以导致emelent-ui导航模版在收缩的时候会出现一点点小问题,以至于我必须得修改css才能修正bug。后来想到可以使用render函数来重写一个模版组件、但由于我技术不娴熟,练了两天,只懂个皮毛。写完以后各种报错。 **如下是我用我勤劳的小双手写的带错误的render函数模版** ``` export default { props: { myData: Array }, render(createElement) { let data = this.myData let ret = [] return data.map(item => { if (item.son) { // console.log(item.son) return createElement('el-submenu', { attrs: {index: item.url} }, [ createElement('template', { slot: 'title' }, [ createElement('i', { attrs: {'class': 'iconfont'} }, [item.icon]), createElement('span', { attrs: {slot: 'title'} }, [item.name]) ]) ]) } else { return createElement('el-menu-item', { attrs: {index: item.url} }, [ createElement('i', { attrs: {'class': 'iconfont'} }, [item.icon]), createElement('span', { attrs: {slot: 'title'} }, [item.name]) ]) } }) } } ``` 写完这个控制台抛出了个错误,提示我 ![图片说明](https://img-ask.csdn.net/upload/201908/04/1564919266_485602.png) 归根究底,技术有限,实在是搞的头大,希望大佬根据我写的组件模版,帮我用render函数写一个模版出来。供我学习,参考,使用。感激不尽!!!
vue的<component>怎么动态获取绑定的多个组件的props的值
vue的<component>怎么动态获取绑定的多个组件的props的值?这是一个tab切换的demo,三个切换按钮,点击切换对应的组件显示。新手一枚,这么写在选中组件1没选中的另外两个组件的情况下总显示caseconts2="[object Object],[object Object],[object Object],[object Object]"和caseconts2="[object Object],[object Object],[object Object],[object Object]" ``` <div class="casetabs"> <ul class="clearfloat"> <li @click="toggleTabs(index,tab.view)" v-for="(tab,index) in casetabs" :class="{case_on:case_on==index}">{{ tab.type }}</li> </ul> </div> <component :is="currentView" :caseconts1="caseconts1" :caseconts2="caseconts2" :caseconts3="caseconts3"></component> ``` ``` Vue.component("case1", { template: `#casecont`, props: ['caseconts1'], data() { return { }, } } }) Vue.component("case3", { template: `#casecont`, props: ['caseconts1'], data() { return { }, } } }) Vue.component("case2", { template: `#casecont`, props: ['caseconts1'], data() { return { }, } } }) ``` caseconts1,caseconts2,casecont3是json获取的 ``` var app = new Vue({ el: '#dre', data: { casetabs: [ { type: '最新案例', view: 'case1' }, { type: '热门案例', view: 'case2' }, { type: '经典案例', view: 'case3' } ], caseconts1:[], caseconts2:[], caseconts3:[], }, mounted: function () { this.$nextTick(function () { app.cartView(); }) }, methods: { cartView: function () { var _this = this; this.$http.get("data/index.json", { "id": 123 }).then(function (response) { _this.caseconts1 = response.data.result.caseconts1; _this.caseconts2 = response.data.result.caseconts2; _this.caseconts3 = response.data.result.caseconts3; }); ``` ![图片说明](https://img-ask.csdn.net/upload/201906/14/1560485189_69296.png)
有关Vue的问题 怎么有选择性的挂载组件
现在有一个需求, 父组件给子组件传值 子组件通过值来判断在<template></template>挂在什么组件,比如一个页面要有input,button,select就可以在父组件显示出来
萌新求教Vue组件里的:和@有什么作用
比如下面这段教程里的代码 ``` <div id="root"> <div> <input type="text" v-model="inputValue"> <button @click="handleSubmit">提交</button> </div> <ul> <todo-item v-for="(item ,index) of list" :key="index" :content="item" :index="index" @delete='handleDelete' ></todo-item> </ul> </div> <script> Vue.component('todo-item',{ props: ['content','index'], //接收从外部传递进来的content属性 template:'<li @click="handleDeleteItem">{{content}}</li>', methods:{ handleDeleteItem:function(){ this.$emit('delete',this.index); } } }) new Vue({ el:"#root", data:{ inputValue:'', list:[] }, methods:{ handleSubmit:function(){ this.list.push(this.inputValue); this.inputValue=''; }, handleDelete:function(index){ this.list.splice(index,1); } } }) </script> ``` 请问第八行开始的:key之类的还有下面的@delete有什么作用,相互之间有什么关系
请问各位大神,如下Vue的代码中为何这个局部组件无法使用??
代码如下: <body> <div id="app"> <localcom></localcom> </div> <script src="../node_modules/vue/dist/vue.js"></script> <script> //定义局部组件 const localcom = { template:"<button @click='msg++'>{{msg}}</button>", data(){ return{ msg:0 } } }; const app = new Vue({ el:"#app", comments:{ localcom } }); </script> </body> console中报错为 [Vue warn]: Unknown custom element: <localcom> - did you register the component correctly? For recursive components, make sure to provide the "name" option. 请各位大佬帮忙查看一下哪里有问题
vue两个导航组件之间传值或者相应的解决办法,在线等求告知。
废话不多说,先把项目截图贴出来。![图片说明](https://img-ask.csdn.net/upload/201902/27/1551231703_57131.png) 这是首页跳转进来之后 Layout组件代码如下。 ```<template> <el-container> <el-aside width="90px"> <layout-nav></layout-nav> </el-aside> <el-container> <el-main> <router-view></router-view> </el-main> </el-container> </el-container> </template> ``` 左侧菜单除了概述的页面不含子菜单,红包和设置页面含红包和设置的子菜单,继承的Layout-main组件, ![图片说明](https://img-ask.csdn.net/upload/201902/27/1551233687_188325.png) Layout-main代码如下 ``` <template> <el-container class="layout-main"> <model-nav></model-nav> <el-main class="layout-container"> <router-view></router-view> </el-main> </el-container> </template> ``` Layout-nav代码如下 ``` <el-menu class="el-menu" default-active="2" :key="i" v-for="(items,i) in this.$router.options.routes" v-if="items.hidden !==true&&items.children[0]"> <el-menu-item v-for="(item,i) in items.children" :index="item.path" :key="i"> <template slot="title"> <router-link :to="item.path"> <i class="el-icon-info"></i> {{item.meta.title}} </router-link> </template> </el-menu-item> </el-menu> ``` 路由文件如下 ``` export default new Router({ routes: [ {path: '/hello', name: 'HelloWorld', component: HelloWorld, hidden: true}, {path: '/login', component: () => import("@/views/login/index"), hidden: true}, {path: '/404', component: () => import("@/views/404"), hidden: true}, { path: "/", component: Layout, redirect: "/dashboard", name: "Layout", meta: {title: "首页"}, children: [ { path: "/dashboard", name: "dashboard", component: () => import("@/views/dashboard/index"), meta: {title: "概述"} }, { path: "/redpack", component: Layoutmain, redirect: "/redpack/index", meta: {title: "红包"}, children: [ {path: 'index', component: () => import("@/views/redpack/index"), meta: {title: "数据统计"}}, { path: 'lgroup', name: 'lgroup', component: () => import("@/views/redpack/lgroup"), meta: {title: "分组管理"} }, { path: 'edit', name: 'edit', component: () => import("@/views/redpack/edit"), meta: {title: "编辑"} }, ] }, { path: "/setting", component: Layoutmain, redirect: "/setting/index", meta: {title: "设置"}, children: [ {path: 'index', component: () => import("@/views/setting/index"), meta: {title: "设置"}}, ] } ] }, ] }) ``` 在Layout-nav中我已经循环遍历出了一级菜单,如何在点击进入一级菜单之后,进入二级菜单时,在model-nav中显示对应的二级菜单呢,路由传值吗?传值我试了把其相应的children传递不成功。小弟初来乍到,求解决方案。 model-nav是另外一个组件,因为我没有获得到数据,无法遍历,代码如下: ``` <template> <el-menu default-active="2" class="left-menu" > <el-menu-item index="1" class="left-menu-head"> 红包 </el-menu-item> <el-menu-item index="2"> <template slot="title"> <router-link to="/redpack/index"> <span>数据统计</span> </router-link> </template> </el-menu-item> <el-menu-item index="3"> <template slot="title"> <router-link to="/redpack/index"> <span>参数设置</span> </router-link> </template> </el-menu-item> <el-menu-item index="4"> <template slot="title"> <router-link to="/redpack/lgroup"> <span>分组管理</span> </router-link> </template> </el-menu-item> <el-menu-item index="5"> <template slot="title"> <router-link to="/user"> <span>批次管理</span> </router-link> </template> </el-menu-item> <el-menu-item index="6"> <template slot="title"> <router-link to="/module"> <span>编码管理</span> </router-link> </template> </el-menu-item> <el-menu-item index="7"> <template slot="title"> <router-link to="/admin/user2"> <span>扫码日志</span> </router-link> </template> </el-menu-item> </el-menu> </template> ```
vue-loader安装后在.vue里的<style></style>里面写样式就报错?
提问:请问下,vue-loader也安装了为何在.vue的style标签了 还是不能写样式呢?webpack4,使用webpack-dev-server命令打包时就报错.应该如何解决? 我已经尝试卸载vue-loader重新安装,删除node-modules重新跑环境,但并没有解决掉.难到是某个加载器的版本的问题吗? main.js ``` import Vue from 'vue'; import app from './App.vue'; import { Header } from 'mint-ui'; Vue.component(Header.name, Header); var vm=new Vue({ el:'#app', render:c=>c(app) }); ``` App.vue ``` <template> <div class="box"> <!--header--> <mt-header fixed title="固定在顶部"></mt-header> <!--body--> <!--foot--> <h1>这是 App 组件</h1> </div> </template> <script> </script> <style lang="sass" scoped> .box{ padding-top:40px; } </style> ``` package.json ``` "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-plugin-component": "^0.10.1", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-env": "^1.6.1", "babel-preset-stage-0": "^6.24.1", "css-loader": "^0.28.7", "file-loader": "^1.1.5", "html-webpack-plugin": "^2.30.1", "less": "^2.7.3", "less-loader": "^4.0.5", "node-sass": "^4.5.3", "sass-loader": "^6.0.6", "style-loader": "^0.19.0", "url-loader": "^0.6.2", "vue-loader": "^13.3.0", "vue-template-compiler": "^2.5.2", "webpack": "^3.8.1", "webpack-dev-server": "^2.9.3" }, "dependencies": { "bootstrap": "^3.3.7", "mint-ui": "^2.2.9", "vue": "^2.5.2", "vue-router": "^3.0.1" } } ``` 错误提示: ``` ERROR in ./node_modules/css-loader!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped": true,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?indentedSyntax!./node_modules/vue-loader/lib/selector .js?type=styles&index=0!./src/App.vue Module build failed: .box{ ^ Invalid CSS after ".box{": expected "}", was "{" in F:\vuetest\day7\src\App.vue (line 19, column 6) @ ./node_modules/vue-style-loader!./node_modules/css-loader!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":" data-v-7ba5bd90","scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?indentedSyntax!./node_modul es/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-331 13:3-17:5 14:22-339 @ ./src/App.vue @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/main.js
router-link问题:组件内容也 变成了可点击的链接
**html** ``` <div id="app"> <router-link to="/account">account</a> <router-view><router-view> </div> <template id="acc"> <div> <h1>这是Account组件</h1> <router-link to="/account/login">登录</a> <router-link to="/account/register">注册</a> <router-view></router-view> </div> </template> <template id="log"> <div> <h1>Login组件</h1> </div> </template> <template id="reg"> <div> <h1>Register组件</h1> </div> </template> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.js"></script> <script src="new_file.js" type="text/javascript" charset="utf-8"></script> ``` **js** ``` var account = { template:"#acc" } var login = { template:"#log" } var register = { template:"#reg" } var router = new VueRouter({ routes:[ // 此处就用组件模板名称,不能用组件名称 { path:'/account',component:account, children:[ { path:'/account/login',component:login }, { path:'/account/register',component:register } ] } ] }) new Vue({ el:'#app', router }) ``` ![图片说明](https://img-ask.csdn.net/upload/201903/26/1553569214_458205.png)
vue插槽 prop 是 undefined 的时候,定义后备内容出错是为什么?求大佬举个例子
官方描述: 定义后备内容,用于插槽 prop 是 undefined 的情形: ``` <current-user v-slot="{ user = { firstName: 'Guest' } }"> {{ user.firstName }} </current-user> ``` 我写的: ``` //父组件 <myvue v-slot="{user={firstName:'sdad'}}"> xx{{user.firstName}} </myvue> //子组件 <template> <div> <slot v-bind:user="users"></slot> </div> </template> <script> export default { name: 'myvue', props:["user"], data(){ return{ users:{ firstName:undefined, lastName:'lastname' } } } } </script> ``` 然后不知道为什么报错了: ``` Failed to compile. ./src/App.vue Module Error (from ./node_modules/eslint-loader/index.js): error: Parsing error: Line 1: Unexpected token > 1 | 0({user={firstName:'sdad'}}) | ^ (vue/no-parsing-error) at src\App.vue:3:22: 1 | <template> 2 | <div id="app"> > 3 | <myvue v-slot="{user={firstName:'sdad'}}"> | ^ 4 | xx{{user.firstName}} 5 | </myvue> 6 | <img alt="Vue logo" src="./assets/logo.png"> 1 error found. ```
Vue点击事件无效:Invalid handler for event "click": got undefined
描述: 定义了单击事件,但是使用Vue组件生成的标签就检测不到单击的方法,并报错:Invalid handler for event "click": got undefined 把标签放到外面可以正常使用,使用Vue组件生成后就报错,而且msg这个也找不到了 请问该如何处理?以下是全部代码 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id="container"> <div id="navbar_left"> <pr></pr> </div> </div> <script> Vue.component("pr",{ name:"pr", template:"<p @click='this.toggle'>{{msg}}</p>", data(){ return{ open:true } } }); var app = new Vue({ el:"#navbar_left", data:{ msg:"hello world", }, methods:{ toggle(){ this.open = !this.open } }, }); </script> </body> </html> ```
终于明白阿里百度这样的大公司,为什么面试经常拿ThreadLocal考验求职者了
点击上面↑「爱开发」关注我们每晚10点,捕获技术思考和创业资源洞察什么是ThreadLocalThreadLocal是一个本地线程副本变量工具类,各个线程都拥有一份线程私有的数
程序员必须掌握的核心算法有哪些?
由于我之前一直强调数据结构以及算法学习的重要性,所以就有一些读者经常问我,数据结构与算法应该要学习到哪个程度呢?,说实话,这个问题我不知道要怎么回答你,主要取决于你想学习到哪些程度,不过针对这个问题,我稍微总结一下我学过的算法知识点,以及我觉得值得学习的算法。这些算法与数据结构的学习大多数是零散的,并没有一本把他们全部覆盖的书籍。下面是我觉得值得学习的一些算法以及数据结构,当然,我也会整理一些看过...
《奇巧淫技》系列-python!!每天早上八点自动发送天气预报邮件到QQ邮箱
此博客仅为我业余记录文章所用,发布到此,仅供网友阅读参考,如有侵权,请通知我,我会删掉。 补充 有不少读者留言说本文章没有用,因为天气预报直接打开手机就可以收到了,为何要多此一举发送到邮箱呢!!!那我在这里只能说:因为你没用,所以你没用!!! 这里主要介绍的是思路,不是天气预报!不是天气预报!!不是天气预报!!!天气预报只是用于举例。请各位不要再刚了!!! 下面是我会用到的两个场景: 每日下
面试官问我:什么是消息队列?什么场景需要他?用了会出现什么问题?
你知道的越多,你不知道的越多 点赞再看,养成习惯 GitHub上已经开源 https://github.com/JavaFamily 有一线大厂面试点脑图、个人联系方式,欢迎Star和完善 前言 消息队列在互联网技术存储方面使用如此广泛,几乎所有的后端技术面试官都要在消息队列的使用和原理方面对小伙伴们进行360°的刁难。 作为一个在互联网公司面一次拿一次Offer的面霸,打败了无数
8年经验面试官详解 Java 面试秘诀
    作者 | 胡书敏 责编 | 刘静 出品 | CSDN(ID:CSDNnews) 本人目前在一家知名外企担任架构师,而且最近八年来,在多家外企和互联网公司担任Java技术面试官,前后累计面试了有两三百位候选人。在本文里,就将结合本人的面试经验,针对Java初学者、Java初级开发和Java开发,给出若干准备简历和准备面试的建议。   Java程序员准备和投递简历的实
究竟你适不适合买Mac?
我清晰的记得,刚买的macbook pro回到家,开机后第一件事情,就是上了淘宝网,花了500元钱,找了一个上门维修电脑的师傅,上门给我装了一个windows系统。。。。。。 表砍我。。。 当时买mac的初衷,只是想要个固态硬盘的笔记本,用来运行一些复杂的扑克软件。而看了当时所有的SSD笔记本后,最终决定,还是买个好(xiong)看(da)的。 已经有好几个朋友问我mba怎么样了,所以今天尽量客观
程序员一般通过什么途径接私活?
二哥,你好,我想知道一般程序猿都如何接私活,我也想接,能告诉我一些方法吗? 上面是一个读者“烦不烦”问我的一个问题。其实不止是“烦不烦”,还有很多读者问过我类似这样的问题。 我接的私活不算多,挣到的钱也没有多少,加起来不到 20W。说实话,这个数目说出来我是有点心虚的,毕竟太少了,大家轻喷。但我想,恰好配得上“一般程序员”这个称号啊。毕竟苍蝇再小也是肉,我也算是有经验的人了。 唾弃接私活、做外
大学四年自学走来,这些珍藏的「实用工具/学习网站」我全贡献出来了
知乎高赞:文中列举了互联网一线大厂程序员都在用的工具集合,涉及面非常广,小白和老手都可以进来看看,或许有新收获。
《阿里巴巴开发手册》读书笔记-编程规约
Java编程规约命名风格 命名风格 类名使用UpperCamelCase风格 方法名,参数名,成员变量,局部变量都统一使用lowerCamelcase风格 常量命名全部大写,单词间用下划线隔开, 力求语义表达完整清楚,不要嫌名字长 ...
Python爬虫爬取淘宝,京东商品信息
小编是一个理科生,不善长说一些废话。简单介绍下原理然后直接上代码。 使用的工具(Python+pycharm2019.3+selenium+xpath+chromedriver)其中要使用pycharm也可以私聊我selenium是一个框架可以通过pip下载 pip install selenium -i https://pypi.tuna.tsinghua.edu.cn/simple/ 
阿里程序员写了一个新手都写不出的低级bug,被骂惨了。
你知道的越多,你不知道的越多 点赞再看,养成习惯 本文 GitHub https://github.com/JavaFamily 已收录,有一线大厂面试点思维导图,也整理了很多我的文档,欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。 前前言 为啥今天有个前前言呢? 因为你们的丙丙啊,昨天有牌面了哟,直接被微信官方推荐,知乎推荐,也就仅仅是还行吧(心里乐开花)
Java工作4年来应聘要16K最后没要,细节如下。。。
前奏: 今天2B哥和大家分享一位前几天面试的一位应聘者,工作4年26岁,统招本科。 以下就是他的简历和面试情况。 基本情况: 专业技能: 1、&nbsp;熟悉Sping了解SpringMVC、SpringBoot、Mybatis等框架、了解SpringCloud微服务 2、&nbsp;熟悉常用项目管理工具:SVN、GIT、MAVEN、Jenkins 3、&nbsp;熟悉Nginx、tomca
Python爬虫精简步骤1 获取数据
爬虫的工作分为四步: 1.获取数据。爬虫程序会根据我们提供的网址,向服务器发起请求,然后返回数据。 2.解析数据。爬虫程序会把服务器返回的数据解析成我们能读懂的格式。 3.提取数据。爬虫程序再从中提取出我们需要的数据。 4.储存数据。爬虫程序把这些有用的数据保存起来,便于你日后的使用和分析。 这一篇的内容就是:获取数据。 首先,我们将会利用一个强大的库——requests来获取数据。 在电脑上安装
Python绘图,圣诞树,花,爱心 | Turtle篇
1.画圣诞树 import turtle screen = turtle.Screen() screen.setup(800,600) circle = turtle.Turtle() circle.shape('circle') circle.color('red') circle.speed('fastest') circle.up() square = turtle.Turtle()
作为一个程序员,CPU的这些硬核知识你必须会!
CPU对每个程序员来说,是个既熟悉又陌生的东西? 如果你只知道CPU是中央处理器的话,那可能对你并没有什么用,那么作为程序员的我们,必须要搞懂的就是CPU这家伙是如何运行的,尤其要搞懂它里面的寄存器是怎么一回事,因为这将让你从底层明白程序的运行机制。 随我一起,来好好认识下CPU这货吧 把CPU掰开来看 对于CPU来说,我们首先就要搞明白它是怎么回事,也就是它的内部构造,当然,CPU那么牛的一个东
破14亿,Python分析我国存在哪些人口危机!
2020年1月17日,国家统计局发布了2019年国民经济报告,报告中指出我国人口突破14亿。 猪哥的朋友圈被14亿人口刷屏,但是很多人并没有看到我国复杂的人口问题:老龄化、男女比例失衡、生育率下降、人口红利下降等。 今天我们就来分析一下我们国家的人口数据吧! 更多有趣分析教程,扫描下方二维码关注vx公号「裸睡的猪」 即可查看! 一、背景 1.人口突破14亿 2020年1月17日,国家统计局发布
听说想当黑客的都玩过这个Monyer游戏(1~14攻略)
第零关 进入传送门开始第0关(游戏链接) 请点击链接进入第1关: 连接在左边→ ←连接在右边 看不到啊。。。。(只能看到一堆大佬做完的留名,也能看到菜鸡的我,在后面~~) 直接fn+f12吧 &lt;span&gt;连接在左边→&lt;/span&gt; &lt;a href="first.php"&gt;&lt;/a&gt; &lt;span&gt;←连接在右边&lt;/span&gt; o
在家远程办公效率低?那你一定要收好这个「在家办公」神器!
相信大家都已经收到国务院延长春节假期的消息,接下来,在家远程办公可能将会持续一段时间。 但是问题来了。远程办公不是人在电脑前就当坐班了,相反,对于沟通效率,文件协作,以及信息安全都有着极高的要求。有着非常多的挑战,比如: 1在异地互相不见面的会议上,如何提高沟通效率? 2文件之间的来往反馈如何做到及时性?如何保证信息安全? 3如何规划安排每天工作,以及如何进行成果验收? ......
作为一个程序员,内存和磁盘的这些事情,你不得不知道啊!!!
截止目前,我已经分享了如下几篇文章: 一个程序在计算机中是如何运行的?超级干货!!! 作为一个程序员,CPU的这些硬核知识你必须会! 作为一个程序员,内存的这些硬核知识你必须懂! 这些知识可以说是我们之前都不太重视的基础知识,可能大家在上大学的时候都学习过了,但是嘞,当时由于老师讲解的没那么有趣,又加上这些知识本身就比较枯燥,所以嘞,大家当初几乎等于没学。 再说啦,学习这些,也看不出来有什么用啊!
别低估自己的直觉,也别高估自己的智商
所有群全部吵翻天,朋友圈全部沦陷,公众号疯狂转发。这两周没怎么发原创,只发新闻,可能有人注意到了。我不是懒,是文章写了却没发,因为大家的关注力始终在这次的疫情上面,发了也没人看。当然,我...
这个世界上人真的分三六九等,你信吗?
偶然间,在知乎上看到一个问题 一时间,勾起了我深深的回忆。 以前在厂里打过两次工,做过家教,干过辅导班,做过中介。零下几度的晚上,贴过广告,满脸、满手地长冻疮。   再回首那段岁月,虽然苦,但让我学会了坚持和忍耐。让我明白了,在这个世界上,无论环境多么的恶劣,只要心存希望,星星之火,亦可燎原。   下文是原回答,希望能对你能有所启发。   如果我说,这个世界上人真的分三六九等,
为什么听过很多道理,依然过不好这一生?
记录学习笔记是一个重要的习惯,不希望学习过的东西成为过眼云烟。做总结的同时也是一次复盘思考的过程。 本文是根据阅读得到 App上《万维钢·精英日课》部分文章后所做的一点笔记和思考。学习是一个系统的过程,思维模型的建立需要相对完整的学习和思考过程。以下观点是在碎片化阅读后总结的一点心得总结。
B 站上有哪些很好的学习资源?
哇说起B站,在小九眼里就是宝藏般的存在,放年假宅在家时一天刷6、7个小时不在话下,更别提今年的跨年晚会,我简直是跪着看完的!! 最早大家聚在在B站是为了追番,再后来我在上面刷欧美新歌和漂亮小姐姐的舞蹈视频,最近两年我和周围的朋友们已经把B站当作学习教室了,而且学习成本还免费,真是个励志的好平台ヽ(.◕ฺˇд ˇ◕ฺ;)ノ 下面我们就来盘点一下B站上优质的学习资源: 综合类 Oeasy: 综合
如何优雅地打印一个Java对象?
你好呀,我是沉默王二,一个和黄家驹一样身高,和刘德华一样颜值的程序员。虽然已经写了十多年的 Java 代码,但仍然觉得自己是个菜鸟(请允许我惭愧一下)。 在一个月黑风高的夜晚,我思前想后,觉得再也不能这么蹉跎下去了。于是痛下决心,准备通过输出的方式倒逼输入,以此来修炼自己的内功,从而进阶成为一名真正意义上的大神。与此同时,希望这些文章能够帮助到更多的读者,让大家在学习的路上不再寂寞、空虚和冷。 ...
雷火神山直播超两亿,Web播放器事件监听是怎么实现的?
Web播放器解决了在手机浏览器和PC浏览器上播放音视频数据的问题,让视音频内容可以不依赖用户安装App,就能进行播放以及在社交平台进行传播。在视频业务大数据平台中,播放数据的统计分析非常重要,所以Web播放器在使用过程中,需要对其内部的数据进行收集并上报至服务端,此时,就需要对发生在其内部的一些播放行为进行事件监听。 那么Web播放器事件监听是怎么实现的呢? 01 监听事件明细表 名
3万字总结,Mysql优化之精髓
本文知识点较多,篇幅较长,请耐心学习 MySQL已经成为时下关系型数据库产品的中坚力量,备受互联网大厂的青睐,出门面试想进BAT,想拿高工资,不会点MySQL优化知识,拿offer的成功率会大大下降。 为什么要优化 系统的吞吐量瓶颈往往出现在数据库的访问速度上 随着应用程序的运行,数据库的中的数据会越来越多,处理时间会相应变慢 数据是存放在磁盘上的,读写速度无法和内存相比 如何优化 设计
Linux 命令(122)—— watch 命令
1.命令简介 2.命令格式 3.选项说明 4.常用示例 参考文献 [1] watch(1) manual
Linux 命令(121)—— cal 命令
1.命令简介 2.命令格式 3.选项说明 4.常用示例 参考文献 [1] cal(1) manual
记jsp+servlet+jdbc实现的新闻管理系统
1.工具:eclipse+SQLyog 2.介绍:实现的内容就是显示新闻的基本信息,然后一个增删改查的操作。 3.数据库表设计 列名 中文名称 数据类型 长度 非空 newsId 文章ID int 11 √ newsTitle 文章标题 varchar 20 √ newsContent 文章内容 text newsStatus 是否审核 varchar 10 news...
Python新型冠状病毒疫情数据自动爬取+统计+发送报告+数据屏幕(三)发送篇
今天介绍的项目是使用 Itchat 发送统计报告 项目功能设计: 定时爬取疫情数据存入Mysql 进行数据分析制作疫情报告 使用itchat给亲人朋友发送分析报告(本文) 基于Django做数据屏幕 使用Tableau做数据分析 来看看最终效果 目前已经完成,预计2月12日前更新 使用 itchat 发送数据统计报告 itchat 是一个基于 web微信的一个框架,但微信官方并不允
相关热词 c#时间格式化 不带- c#替换字符串中指定位置 c# rdlc 动态报表 c# 获取txt编码格式 c#事件主动调用 c#抽象工厂模式 c# 如何添加类注释 c# static块 c#处理浮点数 c# 生成字母数字随机数
立即提问