这是我参与「第四届青训营 」笔记创作活动的的第6天

1. 安装devtools

2. vue基本使用

• 1.构建用户界面
• •    用vue往html页面中填充数据，非常的方便

• 2.框架
• • 框架是一套现成的解决方案，程序员只能遵守挺架的规范，去编写自己的业务功能！
  • 要学习vue,就是在学习vUe框架中规定的用法！
  • vue的指令、组件（是对UI结构的复用）、路由、Vuex

3.框架的特性：

• 数据驱动视图

• 双向数据绑定

在填写表单时，双向数据绑定可以辅助开发者在不操作 DOM 的前提下，自动把用户填写的内容同步到数据源中。

form接受数据，ajxs提交数据

开发者不需要手动操作dom元素，来获取表达那元素的最新的值！

• mvvm是vue实现数据驱动视图和双向数据绑定的核心原理。mvvm值得是model，vue 和viewModek，他把每html页面都茶城了这三个部分，如图所示：

\

\

\

3. vue的指令与过滤器

1. 指令分类

• 内容渲染指令

  •    v-text：全覆盖
  •   V-html：全覆盖，但是会渲染html的标签
  •   {{}}：插值表达式，拼接更加方便使用更多

• 属性绑定指令

v-bind：属性值= 修改样式，可以简写为 :属性值（单向绑定）

• 事件绑定指令

1. v-on：事件=“回调函数” //click等事件，回调函数需要在methods里定义。简写 @事件

2.回调函数的 this指向vue

3.vue提供了内置变量，名字叫做$event,它就是原生DOM的事件对象

4.事件修饰符：

5.按键修饰符：

只有esc与enter是可以直接绑定的，其他键要用ascii值

 <input type="text" @keyup.esc="clear">
     
            methods: {
                clear(e) {

                    e.target.value = ''

                }
            }

• 双向绑定指令

  •    v-model vue 提供了 v-model 双向数据绑定指令，用来辅助开发者在不操作 DOM 的前提下，快速获取表单的数据（只有表单元素可以绑定，其他元素无法更改内容）
  •   v-model的修饰符
  • 

• 条件渲染指令

条件渲染指令用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个，分别是： v-if：指令会动态地创建或移除 DOM 元素，从而控制元素在页面上的显示与隐藏； v-show：指令会动态为元素添加或移除 style="display: none;" 样式，从而控制元素的显示与隐藏；

性能消耗不同： v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此： 如果需要非常频繁地切换，则使用 v-show 较好 如果在运行时条件很少改变，则使用 v-if 较好

\

v-else-if的使用

• 列表渲染指令

• v-for
• •   vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。v-for 指令需要使 用 item in items 形式的特殊语法，其中： items 是待循环的数组 item 是被循环的每一项
  • 
  • 

key 的注意事项 ① key 的值只能是字符串或数字类型 ② key 的值必须具有唯一性（即：key 的值不能重复） ③ 建议把数据项 id 属性的值作为 key 的值（因为 id 属性的值具有唯一性） ④ 使用 index 的值当作 key 的值没有任何意义（因为 index 的值不具有唯一性） ⑤ 建议使用 v-for 指令时一定要指定 key 的值（既提升性能、又防止列表状态紊乱

总结：

\

\