Vue快速入门（案例+基础知识）

以下笔记均是从黑马程序员B站学习课程总结的！
四个小时快速入门Vue

学习Vue之前，建议具备的知识：

1. HTML
2. CSS
3. JavaScript
4. Ajax

如果具备了以上知识，更容易理解嗷~

Vue官方文档链接：点击即可进入嗷~（建议初学者使用开发环境版本）

将从四个方面对Vue进行介绍~

1. Vue基础
2. 本地应用
3. 网络应用
4. 综合应用

一、Vue基础

Vue简介：
1.JavaScript框架
2.简化Dom操作
3.响应式数据驱动
第一个Vue程序
主要分为以下步骤：
1.导入开发版本的Vue
2.创建Vue实例对象，设置el属性和data属性
3.使用简洁的模板语法将数据渲染到页面上


el：挂载点
1.el是用来设置Vue实例挂载（管理）的元素。
2.Vue会管理el选项命中的元素及其内部的后代元素
3.可以使用其他的选择器，但实际建议使用ID选择器
4.可以使用其他的双标签，不能使用HTML和BODY

（小小补充：如果使用id选择器，就用#，class选择器，就用.。以，结束，并非；。)

data：数据对象
1.Vue中用到的数据定义在data中
2.data中可以写复杂类型的数据
3.渲染复杂类型数据时，遵循js的语法即可

（小小补充：对于数据的赋值用：而不是=，以，结束，并非；。）

二、本地应用

主要需要掌握Vue开发网页效果（Vue指令-v）
1.内容绑定，事件绑定（v-text、v-html、v-on基础）
2.显示切换，属性绑定（v-show、v-if、v-bind）
3.列表训练，表单元素绑定（v-for、v-on补充、v-model)

v-text
1.v-text指令的作用是：设置标签的内容（textContent）
2.默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容
3.内部支持写表达式

v-html
1.v-html指令的作用是：设置元素的innerHTML
2.内容中有html结构会被解析成标签
3.v-text指令无论内容是多少，只会解析成文本
4.解析文本使用v-text，需要解析html结构使用v-html


v-on基础
1.v-on指令的作用是：为元素绑定事件
2.时间名不需要写on
3.指令可以简写成@
4.绑定的方法定义在methods属性中
5.方法的内部通过this关键字可以访问定义在data中数据

小试牛刀——计数器

v-show
1.v-show指令的作用是：根据真假切换元素的显示状态
2.原理是修改元素的display，实现显示隐藏
3.指令后面的内容，最终都会解析成布尔值
4.值为true元素显示，值为false元素隐藏
5.数据改变之后，对应元素的显示状态会同步更新

v-if
1.v-if指令的作用是：根据表达式的真假切换元素的显示状态
2.本质是通过操纵dom元素来切换显示状态（和v-show不同的地方）
3.表达式的值为true，元素存在于dom树中，为false，从dom树中移除
4.频繁的切换v-show，反之使用v-if,前者的切换消耗少

v-bind
1.为元素绑定属性
2.完整写法时v-bind：属性名
3.简写的话可以省略v-bind，只保留：属性名
4.需要动态的增删class建议使用对象的方式

小试牛刀——图片切换
步骤如下：
1.定义图片数组
2.添加图片索引
3.绑定src属性
4.图片切换逻辑
5.显示状态切换
（列表数据使用数组保存、v-bind指令可以设置元素属性，比如src、v-show和v-if都可以切换元素的显示状态，频繁切换用v-show）


v-for
1.v-for指令的作用是：根据数据生成列表结构
2.数组经常和v-for结合使用
3.语法是（item，index）in 数据
4.item和index可以结合其他指令一起使用
5.数组长度的更新会同步到页面上是响应式的


v-on补充
1.事件绑定的方法写成函数调用的形式，可以传入自定义参数
2.定义方法时需要定义形参来接收传入的参数
3.事件的后面跟上.修饰符对事件进行限制
4…enter可以限制触发的按键为回车
5.事件修饰符有多种

v-model
1.v-model指令的作用是便捷的设置和获取表单元素的值
2.绑定的数据会和表单元素相关联
3.绑定的数据=表单数据的值

小
小试牛刀——记事本
1.新建
2.删除
3.统计
4.清除
5.隐藏

后续等待学完Ajax继续更新…