vue

自学vue,看视频写一个新项目，引用了styl格式的css，仿照视频去写，不知道哪里出了问题，styl文件中的样式一直没效果，最后终于找出bug解决了问题 1.安装stylus， npm install stylus -D（注意：命令结尾 -D 即是 --save-dev 的简写形式） 2.安装安装loader， npm install stylus-loader css-loader style-loader -D 3.找到 webpack.base.conf.js 文件，并在其中的 module下 rules中添加配置： 　 { 　　test: /\.css$/, 　　loader: 'style-loader!css-loader!stylus-loader', 　　include: [] } 注意：在组件内部的style标签中，加入 lang="stylus" ， < style lang= "stylus"> < style> 4.在webpack.base.conf.js 文件，找到 module.exports下的resolve，将extensions添加styl，如下图： 接下来就可以使用了，使用方式分两种。一种是在.vue文件的style块中使用，一种是引用.styl文件的形式 注意：如果是伪类设置样式，如：after,

1. vuecli介绍 官网链接： https://cli.vuejs.org/zh/guide/ 2.vueCLI 安装 （前提： Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。可查看官方说明） 使用如下命令安装新版本 npm install -g @vue/cli # OR yarn global add @vue/cli 安装完成之后输入命令vue -V（注意是大写V）或vue --version，即可查看vuecli版本，此处已经安装4.2.3版本 -------------------------------------------------------------------------------------------------------------------------------------------------------------------- 附加，4.2.3版本按照成功勿看 由于新版本的更新修改了命令，我开始安装输入npm install -g vue-cli安装了2.9.6版本 若想要修改nodejs2.x 为高级版本需要先卸载原始版本再重新安装即可，命令为： npm uninstall -g vue-cli -----------------------------------------------

直接在组件中引用： html： < vue - qr : text = "qrcodeSrc" size = "400" : logo - src = "srclogo" : logo - scale = "200" style = "height:170px;width:170px;" > < / vue - qr > js： import vueQr from 'vue-qr' data ( ) { return : { srclogo : require ( '../../assets/img/logo.png' ) , } } , components : { vueQr , } , 来源： CSDN 作者： 檀小泡泡 链接： https://blog.csdn.net/weixin_42371145/article/details/104805776

在生成、导出、导入、使用 Vue 组件的时候，像我这种新手就会常常被位于不同文件的 new Vue() 和 export default{} 搞得晕头转向。它们含义到底是什么，又有什么异同呢？ 首先，Vue 是什么？ po 主的理解是 Vue 就是一个构造函数，生成的实例是一个巨大的对象，可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。 所以渲染的时候，可以使用构造 Vue 实例的方式来渲染相应的 html 页面： new Vue({ el: '#app' ... }) 那么 export default {} 又是来干嘛的？ 这是在复用组件的时候用到的。假设我们写了一个单页面组件 A 文件，而在另一个文件 B 里面需要用到它，那么就要用 ES6 的 import/export 语法 ，在文件 A 中定义输出接口 export **，在文件 B 中引入 import **，然后再生成一个 Vue 实例 new Vue (**)，把引入的组件用起来，这样就可以复用组件 A 去配合文件 B 生成 html 页面了。 所以在复用组件的时候，export 和 new Vue 缺一不可。 来源： https://www.cnblogs.com/caitouge/p/9178453.html

问题描述: 使用vue-resource进行get请求,然后就出现跨域访问的问题,由于后台使用springBoot进行创建的,添加下面一个类解决了跨域问题 解决办法 import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS") .allowCredentials(true) .maxAge(3600) .allowedHeaders("*"); } }

一、安装VSCode、NodeJS VSCode： https://code.visualstudio.com/ NodeJS： https://nodejs.org/en/ 二、打开VSCode，安装常用插件 如图所示（安装后重新加载即可）: 三、项目中添加.vscode文件夹，文件夹中添加setting.json项目设置文件 { "eslint.autoFixOnSave": true, "eslint.validate": [ "javascript", "javascriptreact", { "language": "html", "autoFix": true }, { "language": "vue", "autoFix": true } ], "prettier.eslintIntegration": true, "search.exclude": { "**/dist": true }, "vetur.validation.template": false } 貌似.vscode文件夹不好创建，直接上 附件 一顿简单的操作后，我们便可以猛如虎的玩转VSCode了。 来源： https://www.cnblogs.com/wenha/p/11149882.html

vue在同一页面中父组件多次引用同一子组件$emit回调监听问题 页面： 在父组件页面引用三个子组件，三个子组件都是同一文件。 图片上传子组件 < template > < ! -- 内容 -- > < div > < ! -- 图片上传 -- > < div class = "modal fade" id = "imgModel" > < div class = "modal-dialog modal-sm" style = "width:500px;" > < div class = "modal-content" style = "" > < div class = "modal-header" > < button type = "button" class = "close" data - dismiss = "modal" aria - label = "Close" @click = "closeModel" > < span aria - hidden = "true" > & times ; < / span > < / button > < h4 > 图片信息 < / h4 > < / div > < div class = "panel-collapse collapse in" style = "margin-top:20px;" > < div class

.lazy----<input type="text" v-model.lazy="value">----在光标离开后input框才会更新数据 .trim----<input type="text" v-model.trim="value">----输入框过滤首尾的空格 .number----<input type="text" v-model.number="value">----加了number修饰符后，如果先输入的是数字，表示这个输入框只能输入数字，如果先输入了字符串，等于这个输入框没有加number修饰符，所以这个修饰符就是个垃圾，还是得用正则判断 事件修饰符： .stop----<button @click.stop="test"></button>----阻止事件冒泡 .prevent----<a @click.prevent="test"></a>----组件浏览器默认事件 .self----<div @click.self="test"></div>----只有点击到元素本身才会触发----bug：@click.self阻止了自身的点击，必须要点击到padding区域才行 .once----<div @click.once="test"></div>----只有第一次点击有效 .capture----<div @click.capture="test(1)">

一：组件的基本用法 组件和创建Vue实例类似，需要先注册后才能使用，Vue组件注册方式分为全局注册和局部注册，全局注册的组件在任何使用Vue的地方均可使用，局部注册的组件只能在实例作用于范围内使用。 全局注册： Vue.component('my-component', { template : '<div>这是组件中的内容</div>' }); 或者使用局部注册： var myTemplateContent = { template : '<div>这是组件中的内容</div>' }; new Vue({ el : '#app', components : { 'my-component' : this.myTemplateContent } }); 使用组件： <div id="app"> <my-component></my-component> </div> → 组件自定义标签名使用全小写加-符号的格式（如上例中的my-component） → 组件template中的DOM结构必须仅被一个元素包围，例如上面的 template : '<div>这是组件中的内容</div>' 如果写成 template : '这是组件中的内容' 或者写成 template : '<div>这是组件中的内容</div> <div>这是组件另一个的内容</div> ' 会无法渲染或者渲染不全。

基础用法(没有搭建框架就在html文件里演示) 一、 Hello World起步 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello World</title> </head> <body> <!-- 模板 --> <div id="app"> <!-- 声明式渲染 --> <h1>{{ msg }}</h1> </div> <!-- 引入vue --> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> // 创建一个vue对象，同时将这个对象挂载到 #app（这里是元素id） 的元素上 let app = new Vue({ // 挂载点 el: '#app', // Vue 对象中管理的数据 VM ( ViewModel ), 可以直接在面板上通过声明来进行数据访问 data: { msg: 'Hello World' } }) </script> </body> </html> 浏览器显示如图: 二、模板语法 2.1、v-html指令 双大括号会将数据解释为纯文本，而非 HTML 。为了输出真正的 HTML ，你需要使用 v-html 指令 被插入的内容都会被当做 HTML ——