Vue

声明式渲染

要区分其和命令式渲染：

差值表达式

在JavaScript中一般都是使用模板字符串 ${} 将数据渲染到页面中的，在vue中只需要 {{}} 这样就可以渲染数据，vue里的数据都是放在 data() 中的。

• 差值表达式可以渲染字符串
• 渲染数组
• 渲染对象

例子：

<template>
  <div id="app">
    <div class="list">
      <div class="title">
        <div class="name">姓名</div>
        <div class="class">班级</div>
        <div class="total-grade">总成绩</div>
      </div>
      <div class="line">
        <div class="name-data">{{ list[0].name }}</div>
        <div class="class-data">{{ list[0].grade }}</div>
        <div class="total-grade-data">{{ list[0].mark }}</div>
      </div>
      <div class="line">
        <div class="name-data">{{ list[1].name }}</div>
        <div class="class-data">{{ list[1].grade }}</div>
        <div class="total-grade-data">{{ list[1].mark }}</div>
      </div>
      <div class="line">
        <div class="name-data">{{ list[2].name }}</div>
        <div class="class-data">{{ list[2].grade }}</div>
        <div class="total-grade-data">{{ list[2].mark }}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'app',
  data() {
    return {
      list: [
        {
          name: '张三',
          grade: '三年级二班',
          mark: 290,
        },
        {
          name: '李四',
          grade: '三年级二班',
          mark: 270,
        },
        {
          name: '王五',
          grade: '三年级二班',
          mark: 270,
        },
      ],
    };
  },
};
</script>

处理用户输入

双向绑定 v-model

• input/textarea

  <template>
  <p class="page">{{message}}</p>
  <input type="text" v-model="message" placeholder="请输入你想输入的内容" />
  </template>
  <script>
  export default {
    name: "app",
    data() {
        return {
            message: ""
        };
    }
  };
  </script>

• checkbox ```vue

![](https://cdn.nlark.com/yuque/0/2020/png/564594/1602505488628-62b686be-dac5-4a7f-bd34-ae9de629bf8b.png#align=left&display=inline&height=335&margin=%5Bobject%20Object%5D&originHeight=528&originWidth=584&size=0&status=done&style=none&width=370)
<a name="ueSFK"></a>
## 处理用户事件
<a name="kqONh"></a>
### v-on: 事件绑定
在 `JavaScript` 的 `DOM` 中，处理事件的方式是：
```javascript
document.getElementById('btn').addEventListener('click', function () {
  alert('Hello World');
});

需要两个步骤：

1. 给一个元素添加点击事件
2. 给点击事件添加方法

在 vue 中，添加点击事件是用 v-on: 增加一个事件绑定，如下，

<button v-on:click="add">按钮</button>

更多的是使用简写模式 @

<button @click="add">按钮</button>

给点击事件添加方法是将 add 放入到 methods 中，
在 JavaScript 中，将方法抽离是这样写的

let alertFn = function(){
  alert('Hello World');
};
document.getElementById('btn').addEventListener('click', alertFn);

在 vue 中这样写，

<script>
export default{
    name:"app",
    methods:{
        alertFn:function(){
            alert("Hello World");
        }
    }
}
</script>

监听数据变化

watch 侦听器

• 侦听器的书写位置

添加一个侦听器，以键值对的方式：

<script>
  export default {
    name: 'app',
    // 侦听器 key---watch value---{}
    watch: {},
  };
</script>

• 侦听器的侦听对象

侦听器侦听的对象是 data() 里面的变量，只要变量发生变化侦听器就会运行，需要注意的是，侦听器里面的方法名要和变量名一致。