vue的常用组件操作方法应用分析


Posted in Javascript onApril 13, 2018

项目技术:

webpack + vue + element + axois (vue-resource) + less-loader+ ...

vue的操作的方法案例:

1.数组数据还未获取到,做出预加载的动画

<el-carousel :interval="3000" type="card" height="200px" class="common-mt-md">
   <el-carousel-item v-for="item in movieArr" :key="item.id" class="text-center">
    <img v-bind:src="item.images.small" alt="电影封面" class="ticket-index-movie-img">
   </el-carousel-item>// 实际显示的内容-跑马灯
   <div v-if="!movieArr.length" class="ticket-index-movie-loading">
    <span class="el-icon-loading "></span>
   </div>// 当 movirArr的数组为空的时候,做出的预加载 loading 
</el-carousel>

2. 按钮状态的判断,按钮能不能点的问题

<p v-if="!multipleSelection.length">
  <el-button type="success" round disabled>导出</el-button>
</p><!-- 不能点, 判断数组为空 -->
<p v-else>
  <el-button type="success" round >导出</el-button>
</p><!-- 可以点, 判断数组为不为空 -->

3.像jquery 一样,追加dom (vue 是以数据为导向的,应该摆脱jquery的 dom的繁杂操作)

<el-form-item label="时间" prop="name">
  <el-input v-model="ruleForm.name"></el-input>//绑定模型,检测输入的格式
  <span class="el-icon-plus ticket-manage-timeinput" @click="addTime(this)"></span>//绑定方法,增加dom的操作
 </el-form-item> 
<el-form-item label="时间" prop="name" v-for="item in timeArr" :key='item.id'>  //timeArr数组与数据就渲染下面的dom,没有就不显示
<el-input v-model="ruleForm.name"></el-input> 

<span class="el-icon-minus ticket-manage-timeinput" @click="minusTime(this)"></span> 
</el-form-item>

js:

相当于jq 中的 dom 字符串

timeInputString: '<el-input v-model="ruleForm.name"></el-input><span class="el-icon-minus"></span>'

原生的js 往数组里压入和弹出 数据(抓数组的长度),因为vue的是以数据驱动,以数据判断,该不该渲染dom

addTime () {
 this.timeArr.push('str')
 },
 minusTime () {
 this.timeArr.shift('str')
 }

4. 追加class , 场景 在循环某个列表时候,某个列表有class,绑定一个方法,可以支持穿参数

dom

<li v-for="section in item.sections" :key='section.id' @click="hideParMask" :class="getSectionId(section.id)">
 <router-link :to="{ name: 'learning', params: { sectionId: section.id}, query: { courseId: courseId}}" >
   <span>{{item.orderInCourse}}.{{section.sectionNumber}}</span>
   <span>{{section.name}}</span>
 </router-link>
</li>

js

getSectionId (sectionId) {
 return {
  active: this.$route.params.sectionId === sectionId,
 }
}

5.子->父组件的通信,vue.$emit vue.on

子组件:

getSectionId (sectionId) {
 return {
  active: this.$route.params.sectionId === sectionId,
 }
}

父组件:

dom

<v-child :courseId="courseId" v-on:receiveTitle="receiveTitle"></v-child>

js

methods: {
 receiveTitle (name) {
  this.titleName = name; // titleName 就是 **@课程
 }
}

 总结套路: 子组件使用函数(事件)给父组件传递 receiveTitle 属性,然后父组件监测这个属性,给这个属性绑定方法 receiveTitle,方法传参数,这个参数就是 要传递的 值

6.父-> 子

父组件:

dom:

<course-tab :courseList = courseList ></course-tab>

js:

courseList().then(res => {
 this.courseList = res.data.courses;
 }).catch( err => {
 console.log(err)
});

子组件:

props: {
  courseList: {
   type: Array
  }
 }

总结套路:父组件将变量传到子组件,需要在子组件标签上绑定这个变量,然后子组件就可以在props 里接受这个变量

 7.错误路由的处理,重定向, 在router里添加一个路由信息

{
  path: '*',
  redirect: '/'
}

这里是重新定向到首页,也可以单独做一个 404页面,重定向到这个页面

编程式导航里面,

router.push({ path: 'login-regist' })  // 如果这样写的话,会寻找路由最近的 / 然后在后面直接拼接login-regist;
为了防止在多级嵌套路由里面出现bug ,应该写全路由的全部信息,包括 /
router.push({ path: '/login-regist' })

8. dom 里拼接css

<div class="img" :style="{background: 'url(' + item.logoFileURL + ')'}"></div>

9. 监听滚动事件

data () {
  return {
   scrolled: false,

show: true
  }
},
methods: {
  handleScroll () {
   this.scrolled = window.scrollY > 0;
   if (this.scrolled) {
    this.show = false;
   }
  }
 },
 mounted () {
  window.addEventListener('scroll', this.handleScroll);
 }

10.监听输入框输入值的变化

@input="search",

监听 element-UI 的<el-input  的方法,

<el-input v-model="input" @keyup.enter.native="add" placeholder="请输入内容" ></el-input>

总结

以上所述是小编给大家介绍的vue的常用组件操作方法应用分析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于jquery 的一个progressbar widge
Oct 29 Javascript
jQuery1.6 类型判断实现代码
Sep 01 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
Nov 25 Javascript
AngularJS语法详解
Jan 23 Javascript
js实现跨域的方法实例详解
Jun 24 Javascript
使用bootstrap实现多窗口和拖动效果
Sep 22 Javascript
浅谈JavaScript正则表达式-非捕获性分组
Mar 08 Javascript
vuex的简单使用教程
Feb 02 Javascript
webpack-mvc 传统多页面组件化开发详解
May 07 Javascript
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
vue实现分页的三种效果
Jun 23 Javascript
基于JavaScript实现简单扫雷游戏
Jan 02 Javascript
简单的vuex 的使用案例笔记
Apr 13 #Javascript
angular实现页面打印局部功能的思考与方法
Apr 13 #Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
Apr 13 #Javascript
js捆绑TypeScript声明文件的方法教程
Apr 13 #Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
Apr 13 #Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
Apr 13 #Javascript
如何编写一个d.ts文件的步骤详解
Apr 13 #Javascript
You might like
PHP乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
Zend的MVC机制使用分析(二)
2013/05/02 PHP
thinkphp连贯操作实例分析
2014/11/22 PHP
php短信接口代码
2016/05/13 PHP
PHP文件及文件夹操作之创建、删除、移动、复制
2016/07/13 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
脚本之家贴图转换+转贴工具用到的js代码超级推荐
2007/04/05 Javascript
番茄的表单验证类代码修改版
2008/07/18 Javascript
javascript dom代码应用 简单的相册[firefox only]
2010/06/12 Javascript
jquery插件制作 表单验证实现代码
2012/08/17 Javascript
jquery简单的弹出层浮动层代码
2015/04/27 Javascript
jquery日历插件datepicker用法分析
2016/01/22 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
2016/12/11 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
2017/09/04 Javascript
vue中render函数的使用详解
2018/10/12 Javascript
JointJS流程图的绘制方法
2018/12/03 Javascript
JS异步执行结果获取的3种解决方式
2019/02/19 Javascript
谈谈node.js中的模块系统
2020/09/01 Javascript
原生js实现滑块区间组件
2021/01/20 Javascript
[01:00:25]NB vs Secret 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
python与C互相调用的方法详解
2017/07/14 Python
python字符串查找函数的用法详解
2019/07/08 Python
Django中modelform组件实例用法总结
2020/02/10 Python
Python面向对象魔法方法和单例模块代码实例
2020/03/25 Python
css3实现超立体3D图片侧翻倾斜效果
2014/04/16 HTML / CSS
html5简介_动力节点Java学院整理
2017/07/07 HTML / CSS
南非最受欢迎的时尚品牌:MRP
2016/09/18 全球购物
SHEIN台湾:购买最新流行女装服饰
2019/05/18 全球购物
荷兰鞋类购物网站:Donelli
2019/05/24 全球购物
最热门的自我评价
2013/12/30 职场文书
洗车工岗位职责
2014/03/15 职场文书
新春联欢会主持词
2014/03/24 职场文书
合作投资意向书
2014/04/01 职场文书
教育教学读书笔记
2015/07/02 职场文书
python实现简单反弹球游戏
2021/04/12 Python
基于Python实现西西成语接龙小助手
2022/08/05 Golang