锐客网

  1. 首页 > it技术 > >

Day|Day 9-note_Vue基础

1. 讲项目

  1. 缩略图
  2. 闪烁效果
  3. 轮播图
  4. 可拖拽元素
  5. 房屋信息(前一天作业)
2. Vue基础 Vue主要包含两个部分：Vue对象和指令
  1. Vue对象
var 对象名 = new Vue({ el:关键对象的选择器, data: 数据对象(属性和值自己决定), methods:方法对象(属性对应的值是方法) })

  • 设置标签内容
    实例一：
{{name}}

案例二：
{{pText}}
{{aTitle}} {{title}}

  • 设置标签属性值
    v-bind:属性='Vue属性名'
Day|Day 9-note_Vue基础
文章图片

  • if语句：
    v-if='条件语句' -- 如果条件语句的结果是true,标签就显示，否则不显示
内容是:{{message}}
内容是:{{message}}

  • 循环结构:
    v-for="变量 in 数组属性"
  • Day|Day 9-note_Vue基础
    文章图片
    {{mesage.name}}

  • 事件绑定:
    v-on:事件名='函数名'
{{num}}

  • input标签内容和属性双向绑定:
    v-model="Vue对象属性名"
【Day|Day 9-note_Vue基础】{{message}}

    推荐阅读


    上一篇：“善与恶”的较量

    下一篇：吹弹（谈）可破的孤独