vue基础语法-02day

v-if 和 v-show区别
v-if
····· true 渲染DOM
·····false 不渲染DOM
v-show
·····true 渲染DOM
···· false 渲染DOM，不显示（display: none）
不能和 v-else、v-else-if 结合使用
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

遍历对象 ※
数组
文本
数据驱动试图
v-if v-else-if
v-show
vi-if template 一起使用
v-on:click 简写 @click
函数简写 click(){}
箭头函数的this 指向的是window 解决使用vue实例名
事件参数对象：处理函数 有一个事件对象e
事件传参：在定义事件到的时候传参 ，当调用传参的时候，默认参数 event就没有了
函数默认参数 even e事件对象
v-model 获取表单的内容
v-bind-class="{red:true，yellow:false} 简写是 ：class="{值：样式，值样式}"
" 返回一个布尔值,true显示，false不显示，
可以写多个类名，1 写死的 2 动态的

条件渲染
v-if ：true 渲染 false不渲染
v-show true 显示 false 不显示

区别：
v-if true，存在与DOM树中，条件很少改变的时候，使用v-if
v-show ，无论真假，都渲染元素 ， 当频繁切换的显示与隐藏、
它是一个任务清单管理，用户可以在此，标明自己将要去做的或者是已经完成的任务

案例：todomvc

装包todos模板+vue包、引入、实例、管理谁加id、测试
加样式：
添加任务
1、注册按键回车事件
2、在事件处理函数中
拿到文本框的数据
添加到数组中
清空文本框
案例：todomvc

装包todos模板+vue包、引入、实例、管理谁加id、测试
加样式：
添加任务
1、注册按键回车事件
2、在事件处理函数中
拿到文本框的数据
添加到数组中
清空文本框

详细的功能有：

①增加 / 删除一个任务

②编辑任务

③查看（所有的、未完成的、已完成的）任务

④显示未完成任务的数量

⑤清空完成的任务

⑥改变任务的转态（未完成转态，与，已完成转态，两个转态直接的转换）