Vue学习day02-vue的模板语法

插值文本

1. v-bind、{{ }}可以用来绑定值，双向绑定。

<div id="app">
    {{ message }}
    <span v-bind:title="message1">
        <h2>{{ message1 }}</h2>
    </span>
</div>

注意：v-bind：可以缩写成：

列表渲染

1. v-for 基于数组渲染列表
2. ‘item in items’，其中items源于数组，item是被迭代的数组元素（相当于Python中的for循环，items是迭代器）

<div v-for="course in courses" :key="course">
    {{ course }}
</div>

输入绑定

1. v-model指令可以在<input>、<textarea>、<select>元素上创建双向数据绑定
2. v-mdoel本质是语法糖，根据控件类型自动选取正确的方法来更新元素，双向绑定

<p>
    <input v-model="course" type="text" placeholder="添加课程"/>
    <p>{{ course }}</p>
    <input type="button" value="新增">
</p>

事件处理

1. v-on指令做DOM事件监听，通常和v-model指令一起出现
2. v-on:click='add'简写为@click='add'
3. v-on通常要触发DOM事件，添加事件v-method，生成的method：{}存放所有的事件方法
4. 方法中使用data变量用this.course

添加课程输入：

<p>
    <input v-model="course" type="text" placeholder="添加课程"/ >
    <p>{{ course }}</p>
    <input type="button" value="新增" @click="addCourse">
</p>

添加课程事件：

methods: {
    addCourse() {
        // 1.拿到用户输入的课程加入到courses中
        this.courses.push(this.course);
        // 2.将course清空为''
        this.course = '';
    }
},

class和style绑定，列表渲染

1.  使用:class="{active: selectedCourse === course}"可以进行绑定样式
2. @click = 'selectedCourse = c',如果事件内容比较简单，可以不用写方法，直接在‘’中写语句
3. 也可以使用:style = "{backgroundColor: selectedCourse ==c ? '#fff' : 'yellow'}"，来进行样式绑定
4. 注意js中不支持变量使用"-"，所以background-color用驼峰式形式backgroundColor，vue能自动识别，或者也可以加引号

<style>
    .active {
        background-color: gainsboro;
    }
</style>

<div v-for="course in courses" :key="course" :class="{ active: selectedCourse === course}" @click="selectedCourse = course">
    {{ course }}
</div>

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!',
        message1: '课程购物车',
        course: '',
        selectedCourse: '',
        courses: ['web课程','python课程','java课程']
    },

条件渲染

1. v-if 和 v-else作为条件渲染的指令同时出现
2. 官方不建议v-if和v-for放在一个标签内一起使用，有优先级问题
3. v-show与v-if可以实现相同的功能，但是v-show与display一起使用，本质上是已存在的标签，而v-if只有当条件成立时标签才存在，条件不成立则不存在标签。

<p v-if = 'courses.length == 0'>暂无课程信息，请添加课程！</p>
<div v-else>
    <div v-for="course in courses" :key="course" :class="{ active: selectedCourse === course}" @click="selectedCourse = course">
        {{ course }}
    </div>
</div>

渲染函数

1. 我们在页面上写的都是被vue转变成了js中的函数
2. 可以通过console.log(app)；打印函数内容，将其替换掉页面标签可以实现一样的效果