码迷,mamicode.com
首页 > 其他好文 > 详细

vue小知识点总结

时间:2019-08-23 10:49:04      阅读:96      评论:0      收藏:0      [点我收藏+]

标签:post   作用   important   bpa   html标签   dem   web   const   组件   

 

一:插件

1:better-scroll 插件实现左右轮播滚动

2:vue-lazyload 插件实现图片懒加载

3:实现移动端自适应:

3.1: postcss 插件引到项目里 功能:把你自己写的代码px转化为rem(对于引入的外部插件,不做单位转化)

3.2:main.js 中引入一段js代码,设置html标签中的font-size大小

window.onresize = setHtmlFontSize function setHtmlFontSize () { const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth const htmlDom = document.getElementsByTagName(‘html‘)[0] htmlDom.style.fontSize = htmlWidth / 10 + ‘px‘ } setHtmlFontSize()

4:vue-resource插件类似于axios插件

5:main.js中全局引入mint ui框架,页面里面随便使用该框架的组件

6:Vue页面中,<script></script>代码中注释文字用 // 而不是 <!-- --> 这种格式  <template></template>模板中用 <!-- --> 注释

7: template模板里面  v-show/v-if=’item’,js 里面 if(item){} else{}:   item 取值null ,‘‘,undefined,NaN, 返回为false 若返回true 表示 item 取值为:!0,   !null, !‘‘, !undfined, !NaN, 空对象,空数组( !1  !2   !5  (等)返回 false)

8: vue-cli2:  vue init webapck 项目名称,按照这个方式创建的项目,此时 引入less,只需要 npm install less less-loader --save 即可,不需要再手动配置为webpack ,引入方式 

9:vue 项目引入juqery插件,App.vue 中使用 $ 会报错,其他vue页面中没问题   vue 项目中快捷键 <sc 之后 enter 键 ,整个vue项目大致结构就出来了 

10: <!-- indeterminate(不确定性) 取值为true ,表示选中项个数 >1 && < 总长度 ,取值为false,表示全选或者全不选-->

2:样式文件

vue页面样式文件引入方式如下:

1.1: <style lang=‘scss/less’>  @important ‘~@/assets/scss/homr.scss/less‘; (;很重要,一定要加上)</style>

1.2: <style lang=‘less‘ src=‘./xx.less‘></style> (src一定要按照相对路径的方式引入)

1.3: 外部scss样式文件中引入图片,如下:

a{background-image:url(‘~@/assets/images/cat.png‘);}

1.4: js里面引入图片用 rquire(),如下:require(‘../../assets/images/cat.png‘);

温馨提示:参考mint ui框架的demo(mint-ui-master),可以更快上手该框架哦!

word-break : 设置自动换行的处理方法

1.5: 父组件scoped 属性添加以后, 父组件内的样式 不会 影响子组件, 父组件样式里面 某个元类名 添加 /deep/ 深度作用选择器以后, 子组件里面该类名也会起作用



 

vue小知识点总结

标签:post   作用   important   bpa   html标签   dem   web   const   组件   

原文地址:https://www.cnblogs.com/demi-guoba/p/11398359.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!