1.immdiate属性: watch默认绑定,页面首次加载时,是不会执行的,只有值发生改变才会执行监听计算. 如果想立即执行怎么办? watch:{ name:{ //handler方法就相当于普通侦听器触发的事件 handler(newName,oldName){ //执行代码 }, //表示watch里面声明后,会立马执行handler里面的函数 //组件初始化时,侦听器会立马(immediate)触发handler方法 immediate:true//true就表示会立即执行 } }

1.安装: yarnaddsass-loader@7.3.1--dev yarnaddnode-sass--dev 注: ①.sass-loader依赖于node-sass (1).报错: Modulebuildfailed:TypeError:this.getResolveisnotafunction atObject.loader(path/node_modules/sass-loader/dist/index.js:52:26) 2.注释: ①.//=>css中显示 ②.//=>css中不显示 ③./重要注释!/=>压缩不会被删掉

一、概念: 1.为什么要用vuex? 传统: 每个页面都要去重新请求后台得到 将数据存到session、cookie中 作用: 专门为vue.js设计的集中式状态管理架构. 数据仓库,主要管理状态(共用的属性或数据). 把数据进行共享,每个页面想用,都可以来调用.

1.双向绑定: model(数据)->(model更新view)view(视图) <-(view更新model) 双向绑定/单向数据流: Vue是单向数据流,不是双向绑定. Vue的双向绑定不过是语法糖. Object.defineProperty是用来做响应式更新的,和双向绑定没关系.

1.指令: (1).if指令: <pv-if="show"></p> <pv-else-if="show"></p> <pv-else="show"></p> (2).show指令: <pv-show="show"></p>

(1).深度作用选择器: 希望scoped样式中的一个选择器能够作用得"更深",如影响子组件. 覆盖element-ui中的样式时,只能通过深度作用选择器. (2)./deep/: .a{ /deep/.b{ /.../ } } 注: ①.less可以使用.

https://cn.vuejs.org/v2/style-guide/index.html StyleGuide ThisistheofficialstyleguideforVue-specificcode.IfyouuseVueinaproject,it’sagreatreferencetoavoiderrors,bikeshedding,andanti-patterns.However,wedon’tbelievethatanystyleguideisidealforallteamsorprojects,somindfuldeviationsareencouragedbasedonp...

1.文本: {{data}} 注: ①.用双大括号{{}}引住的内容被称为"Mustache"语法. 2.原始html: <divv-html="data"></div> 3.属性: <divv-bind:id="testId"></div> 注: ①.如chcked值绑定. 4.表达式: {{num+1}} {{ok?'1':'0'}} {{str.split('').join('')}}

1.对象语法: 适合较多的class名或动态的class :class="{'test-class':test}"//当test为true时,有test-class值 2.数组语法: 适合较少的class名 :class="[a1,a2]"//表示有两个类名:a1、a2

(1).data()中引入: icon:require('@/assets/images/modules-a5.png') icon:require('../../assets/images/modules-picture.png') (2).style中引入: background:url(../../assets/images/entry-icon.png)00no-repeat; (3).html中引入: <imgsrc="@/assets/images/a-1.png"alt=""> <imgsrc="../../assets/images/a-1.pn...

(2).业务场景: <component:is="currentConfig":config="config"></component> exportdefault{ name:'App', components:{ rxTextboxConfig, rxTextareaConfig, }, mouted:{ this.currentConfig=ctlType+"-config" if(ctlType"rx-textbox"){ this.config.type="VARCHAR" } if(ctlType"rx-textarea"){ this.config...

1.优势: 更加轻量20kbmin+gzip 渐进式框架   a.不需要学完所有知识再来开发   b.项目驱动式学习,用到什么学什么 响应式的更新机制   底层做了响应的优化 学习成本低

动态组件: 通过component标签的is属性来进行组件的切换. is的属性值决定要显示的组件:   a.将is的属性值设置为data中的值,以便于动态变化. (1).example: <divid="box"> <inputtype="button"@click="test='aaa'"value="aaa组件"> <inputtype="button"@click="test='bbb'"value="bbb组件"> <component:is="test"/> </div> <script...

.sync修饰符: 弹框显示隐藏功能:   a.需要定义ref、prop、自定义方法. (1).使用sync: //父组件 <Toggle:show.sync='show'/> //Toggle组件 <divv-if="show"> 展示和隐藏组件 </div> <button@click="test">隐藏组件</button> exportdefault{ props:['show'], methods:{ test(){ this.$emit('update:show',false) } } }...

如何解决vue项目中图片展示的是[objectModule]问题 原因分析： file-loader和css-loader默认执行了es6的引入规范，vue则是执行的commonjs的规范。 所以这里把前者rules的options的esModule设置为false就可以了。{test:/\.(png|jpe?g|gif)$/i,options:{name:'[path][name].[ext]',esModule:false},loader:'file-loader'// img属性src="[objectModule]"，引入图片的方式为“<imgsrc="../assets/i...

1.安装vue-cli: npminstall-g@vue/cli vue-V 仍需要用vue-cli2.x版本语法(vueinit),需下载一个桥接工具: npminstall-g@vue/cli-init 2.初始化webpack项目: $yarnglobaladd@vue/cli-init $vueinitwebpackmusic ... ?Vuebuild(Usearrowkeys) Runtime+Compiler:recommendedformostusers >Runtime-only:about6KBlightermin+gzip,buttemplates(or...

3.别名alias配置: build\webpack.base.conf.js: module.exports={ ..., resolve:{ extensions:['.js','.vue','.json'], alias:{ '@':resolve('src'), 'common':resolve('src/common'), 'components':resolve('src/components'), } } } 4.安装默认样式: yarnaddnormalize.css (1).normalize.cssvsReset.css: 保护了有价值的默认值. 修复了浏览器的...

1.vue-cli3中console.log报错: ModuleWarning(from./node_modules/eslint-loader/index.js): error:Unexpectedconsolestatement(no-console)at (1).原因:使用ESLint检查代码质量是进行提示的. (2).解决:window.console.log(res); 2.图片引入: { id:1, src:require('@/assets/icon/type1.svg'), } webpack配置如下 { test:/\.(png|jpe?g|gif|svg)(...

(1).格式化显示json组件: cnpminstallvue-json-viewer--save importJsonViewerfrom'vue-json-viewer' Vue.use(JsonViewer) <json-viewer:value="showtext":expand-depth=4copyablesort></json-viewer> vue-fragment: https://www.npmjs.com/package/vue-fragment vue-devtools调试工具