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 (二) 万能的选择器
Oct 01 Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
Apr 07 Javascript
基于JQuery 的消息提示框效果代码
Jul 31 Javascript
Jquery图片滚动与幻灯片的实例代码
Apr 08 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
Jan 11 Javascript
jQuery下拉菜单的实现代码
Nov 03 Javascript
JavaScript实现解析INI文件内容的方法
Nov 17 Javascript
JavaScript创建对象的七种方式全面总结
Aug 21 Javascript
js实现鼠标移动到图片产生遮罩效果
Oct 21 Javascript
bootstrap datetimepicker控件位置异常的解决方法
Nov 23 Javascript
electron制作仿制qq聊天界面的示例代码
Nov 26 Javascript
Vue路由 重定向和别名的区别说明
Sep 09 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横向重复区域显示二法
2008/09/25 PHP
php header示例代码(推荐)
2010/09/08 PHP
让PHP以ROOT权限执行系统命令的方法
2011/02/10 PHP
又一个PHP实现的冒泡排序算法分享
2014/08/21 PHP
golang与php实现计算两个经纬度之间距离的方法
2016/07/22 PHP
form表单传递数组数据、php脚本接收的实例
2017/02/09 PHP
php实现文件管理与基础功能操作
2017/03/21 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
PHP 出现 http500 错误的解决方法
2021/03/09 PHP
JavaScript库 开发规则
2009/01/31 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
2012/10/11 Javascript
不同的jQuery API来处理不同的浏览器事件
2012/12/09 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
2013/06/27 Javascript
用JavaScript实现动画效果的方法
2013/07/20 Javascript
JS字符串截取函数实例
2013/12/27 Javascript
将字符串中由空格隔开的每个单词首字母大写
2014/04/06 Javascript
angularJS 中$attrs方法使用指南
2015/02/09 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
JS选取DOM元素的简单方法
2016/07/08 Javascript
PhotoSwipe异步动态加载图片方法
2016/08/25 Javascript
node.js 利用流实现读写同步,边读边写的方法
2017/09/11 Javascript
在 Angular中 使用 Lodash 的方法
2018/02/11 Javascript
JS获取指定月份的天数两种实现方法
2018/06/22 Javascript
JS原生带缩略图的图片切换效果
2018/10/10 Javascript
bootstrap中的导航条实例代码详解
2019/05/20 Javascript
Python语言技巧之三元运算符使用介绍
2013/03/04 Python
JSON Web Tokens的实现原理
2017/04/02 Python
使用python在本地电脑上快速处理数据
2017/06/22 Python
python 反编译exe文件为py文件的实例代码
2019/06/27 Python
详解CSS3选择器:nth-child和:nth-of-type之间的差异
2017/09/18 HTML / CSS
Harrods英国:世界领先的奢侈品百货商店
2020/09/23 全球购物
石油大学毕业生自荐信
2014/01/28 职场文书
责任心演讲稿
2014/05/14 职场文书
律师催款函范文
2015/06/24 职场文书
golang协程池模拟实现群发邮件功能
2021/05/02 Golang
Python-typing: 类型标注与支持 Any类型详解
2021/05/10 Python