前端第10天

Vue基础

一、认识Vue

Vue就是js的一个库 ， 这个库中提供了一个Vue类，通过这个类的对象可以和html中的标签进行绑定。

1.Vue对象

new Vue({
    el: 需要绑定的标签的id选择器,
    data: 对象,为被绑定的标签提供各种数据,
    methods: 对象,通过提供方法来提供功能,
    computed: 对象,通过提供方法来提供数据
})

2.指令

• {{Vue属性}} - 标签内容
• v-bind:标签属性名 = “Vue属性” - 标签属性
• v-for=‘变量 in Vue对象提供的序列’ - for循环
• v-if=“Vue属性”
  v-if=“vue对象对应的条件语句” - 条件语句的结果是true对应的标签就存在，否则对应标签不存在
• v-on:事件属性 = ‘Vue方法名’ (@事件属性名=‘Vue方法名’) - 事件绑定
• v-model = ‘Vue属性’ - 双向绑定
  只有表单相关标签中的一部分标签才能进行双向绑定：输入框相关标签、单选按钮、复选按钮、文件选择、颜色选择、图片选择、日期选择等；下拉列表、多行文本域。