一、Vue简介

l JavaScript框架

l 简化DOM操作

l 响应式数据驱动

二、Vue基础

l 第一个Vue程序

n 导入vue.js

n 创建Vue实例对象，参数对象中设置el属性和data属性

n 使用简洁的模板语法（插值表达式）把数据渲染到页面上

l el挂载点

n el挂载点作用？

el是用来设置Vue实例挂载（管理）的 元素

n Vue实例的作用范围是什么？

Vue会管理el选项命中的元素及其内部的后代元素

n 是否可以使用其它的选择器作为挂载点？

可以使用其它的选择器作为挂载点，但是建议使用id选择器

n 是否可以设置其它的dom元素？

可以给除了html和body元素之外的其它双标签设置挂载点

l data数据对象

n Vue中用到的数据定义在data中

n data中可以写复杂类型的数据

n 渲染复杂类型数据时，遵守JS的语法即可

三、Vue指令

l v-text 设置标签的内容（textContent）

默认情况下，v-text指令会替换匹配元素中全部内容；

如果想要替换指定部分内容，请使用插值表达式 {{ }}

内部支持写表达式

l v-html 设置标签的innerHTML

v-html 内容中有html结构会被解析为标签

而v-text无论内容是什么，只会解析为文本

l v-on 为元素绑定事件

事件名不需要写on

指令可以简写为@

绑定的方法定义在methods属性中

方法内部通过this关键字访问定义在data中的数据

 

l 购物车简易计数器

 

思路：

 

逻辑代码：

 

 

l v-show 根据表达式的真假，切换元素的显示和隐藏（操纵样式）

本质是通过修改元素display的值，实现显示和隐藏；

指令后面的的内容，最终都会解析为布尔值：布尔值为true显示元素，false隐藏元素

 

l v-if 根据表达式的真假，切换元素的显示和隐藏（操纵dom元素）

本质是通过操纵dom元素来切换显示状态；

表达式的值为true，元素存在于dom树中；为false，从dom树中移除

 

l v-bind 设置元素的属性

语法 v-bind:属性 = “属性值”

简写 :属性 = “属性值”

l 图片切换案例

 

 

 

思路：

 

 

逻辑代码：

 

 

l v-for 根据数据生成列表结构

  v-for指令的作用是根据数据生成列表结构

数组数据经常和v-for结合使用

语法是 (item,index) in data数据

item和index可以结合其它指令一起使用

数组长度的更新会同步到页面上，是响应式的

 

简单数据操作：

添加和移除数据，页面同步更新。

 

 

代码演示：

 

 

l v-on补充：事件修饰符

 

 

事件绑定的方法写成函数调用的形式，可以传入自定义参数；

定义方法时需要定义形参来接收传入的实参；

事件的后面跟上 .修饰符 可以对事件进行限制；

.enter 可以限制触发的按键为回车

事件修饰符有多种

代码：

 

分别点击按钮控制台效果：

 

 

l v-model  双向数据绑定

v-model指令的作用是便捷的获取和设置表单元素的值；

绑定的数据会和表单元素值相关联；

绑定的数据 ⬅➡表单元素的值（双向绑定）

 

代码演示：