vue day01 基本指令实战

架构分层

MVC

Model 数据层

View 视图层

Controller 控制层

缺点：依赖复杂

MVP

Model 数据层

View 视图层

Presenter

MVVM

Model 数据层

View 视图层

ViewModel

响应式数据原理

响应式属性：能监听到修改操作，并更新视图

如何设置一个响应式属性（属性特性）

值属性：拥有值的属性

configurable 可配置性（其他属性特性的总开关）

enumerable 可枚举性

writeable 可写性

value 属性的值

》特别说明：

1. 传统方式添加的属性，所有属性特性默认为true

2. 通过Object.defineProprety()添加的属性，所有属性特性默认为false

储存器属性：本身没有值，一般用于代理其他数据

configurable

enumerable

get

set

Object.defineProperty(target,prop,descriptor) 设置属性

target : 目标对象

prop: 目标属性

descriptor: 属性特性

case:

目的：控制data.age为不可修改
Object.defineProperty(data,'age',{
  writable:false
})
目的：控制data.password不可枚举
Object.defineProperty(data,'password',{
  enumerable:false
})

储存器属性

get 读取时：执行getter方法

set 设置时：执行setter方法

响应式属性的原理：把值属性变成存储器属性（getter&setter）

实例化Vue时，内部自动遍历Data下所有的属性，把所有属性变成getter&setter，并写入vm实例

实例化后，如果还想设置响应式属性，必须通过:Vue.set()

vm.score.chinese = 55

vue.set(vm,score,'chinese',55);

今日案例

/*技术栈

*bootstrap

* vue

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>5.todolist</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <script src="./js/vue.js"></script>
</head>

<body>
    <div class="container">
        <h1>5.todolist</h1>
        <div id="app">
            <div class="input-group mb-3">
                <input type="search" class="form-control" ref="search" v-model="todoTitle" @keyup.enter="addItem">
                <div class="input-group-append">
                  <button class="btn btn-success" v-on:click="addItem">添加</button>
                </div>
              </div>
            <table class="table table-striped table-hover">
                <thead class="thead-dark">
                  <tr>
                    <th scope="col">#</th>
                    <th scope="col">待办事项</th>
                    <th scope="col">是否完成</th>
                    <th scope="col">操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="item,idx in todolist">
                    <th scope="row">{{idx+1}}</th>
                    <td>{{item.title}}</td>
                    <td>{{item.done ? '是' : '否'}}</td>
                    <td>
                        <button class="btn btn-success btn-sm" @click="completeItem(item.id)">完成</button>
                        <button class="btn btn-danger btn-sm" @click="removeItem(item.id)">删除</button>
                    </td>
                  </tr>
                  
                </tbody>
              </table>

         
        </div>
    </div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                todolist:[
                    {
                        id: 1,
                        title: '实现个小目标，月薪过万',
                        done: false, // 是否完成
                        addtime: Date.now()
                    },
                    {
                        id: 2,
                        title: '实现第二个小目标，赚他一个亿',
                        done: false,
                        addtime: Date.now() + 100
                    },
         
                ],
                todoTitle:''
            },
            methods:{
                addItem(){
                    const data = {
                        id: this.todolist.length+1,
                        title:this.todoTitle,
                        done: false,
                        addtime: Date.now()
                    }
                    this.todolist.unshift(data)

                    // 清空并自动获得焦点
                    this.todoTitle = '';
                    this.$refs.search.focus();
                },
                removeItem(id){
                    console.log('remove');
                    this.todolist = this.todolist.filter(item=>item.id!==id)
                },
                completeItem(id){
                    console.log('complete')
                    this.todolist = this.todolist.map(item=>{
                        if(item.id === id){
                            item.done = true
                        }
                        return item;
                    })
                }
            }
        })
    </script>
</body>

</html>