Vue.js学习笔记(三)

学习vue.js的第三天。

前言

因为今天的课比较满,所以学得下来,记得下来的内容有点少,估计过几天要重新回顾一下今天学习的内容。

今天把昨天找到的视频,从p11看到了p23。

2020年3月10日

v-bind:style 的用法

1.直接在元素上使用:style的形式,书写样式对象,请注意,这里的font-size之所以添加单引号,是因为font和size之间用了单杠号,以此,font-weight之类有单杠号的都需要使用引号。

<div :style="{color:'red','font-size':'24px'}"></div>

2.:style参数可以是data中定义的对象。

data:{ divStyle1:{'font-weight':'200', color: yellow} }

3.:style参数可以填写多个data中定义的对象。

<div :style="[divStyle1, divStyle2]"></div>

v-for 补充

在遍历对象的键值对的时候,除了有val、key,在第三个位置还有一个索引


<div id="app">
  <p v-for="(val, key, index) in list">值为{{ val }},键为 {{ key }},索引为 {{ index }}</p>
</div>

<script>
var app = new Vue({
  el: '#app',
  data:{
    list:{
      name: 'sha',
      zi: 'jiu',
      shi: 'ni'
    }
  }
});
</script>

v-for :key

在v-for中用:key,Vue 为了节省资源重复利用已有 DOM 节点,要求开发者给列表中的元素加上唯一的 key,这样在排序之类的操作时,就不需要销毁创建新节点了。

key属性只能传入字符串数字类型的参数。

过滤器

过滤器定义Vue.filter('过滤器的名称', function(必须参数, 第二参数){}),这里function内对传入的数据进行处理。

过滤器的调用格式{{ name | 过滤器的名称(第二个参数) }},这里的name是过滤器的第一个参数,是必须的。

过滤器中可以有多个参数。

小结

今天学习的内容开始比较多的偏向JavaScript基础,我也在努力回顾JavaScript。

教程中老师说到,用vue.js要尽量不去使用jquery。正在努力克服。

本文为作者油油发布,未经允许禁止转载!
687
1
0
发表留言

    1年前

    加油,我已经放弃了

Vue.js学习笔记(三)
扫描右侧二维码继续阅读
March 10, 2020
油油
blogger
油油
surfing in the internet...
Twitter主题停售通知
当前版本:2.3
更新时间:2021.06.30
非常感谢大家一直以来对Twitter主题的喜欢,主题已经停售!
Typecho交流群:709299990
统计
文章:32 篇
分类:5 个
评论:416 条
运行时长:3年298天
by yoniu.
油油