Vue学习基础（一）：本地应用

Vue

一、Vue基础

el：挂载点

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

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

• 可以使用其他的选择器，但建议使用ID选择器

• 可以使用其他的双标签，不能使用 HTML 和 body

data：数据对象

• Vue 中用到的数据定义在 data 中
• data 中可以写复杂数据类型
• 渲染复杂类型数据时，遵守js的语法即可

二、本地应用

v-text

• 作用是：设置标签的内容
• 默认写法会替换全部内容，使用差值表达式 {{}} 可以替换指定内容

v-html

• 作用是：设置元素的 innerHTML
• 内容中有 html 结构会被解析为标签
• v-text 指令只会解析为文本
• 解析文本使用 v-text，需要解析 html 2结构使用 v-html

v-on

• 作用是：为元素绑定事件
• 事件名不用谢on
• 指令可以简写为 @
• 绑定的方法定义在 methods 属性中

<input type ="button" value="v-on指令" v-on:click="doIt" >
    
<input type ="button" value="v-on简写" @click ="doIt"

<input type ="button" value="双击事件" @dblclick ="doIt"

v-show

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

v-if

• 作用是：根据表达式得真假切换元素得显示状态
• 本质是通过操作 dom 元素来切换显示状态
• 表达式得值为true，元素存在于 dom 树中，为 false，从dom树中移除
• 频繁的切换 v-show，反之使用 v-if，前者的切换消耗更小

v-bind

• 作用是：为元素绑定属性

• 完整写法是 v-bind ：属性名

• 简写的话可以直接省略 v-bind，只保留 ：属性名

• 需要动态的增删改查 class 使用对象的方式更简洁

<img :src="imgSrc" alt = "" :title = "imgTitle" :class="isActive?'active':''" @click="toggleActive" >
    
<img :src="imgSrc" alt = "" :title = "imgTitle" :class="{active:isACtive}" @click="toggleActive" >

v-for

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

v-on补充

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

v-model

• 作用是：获取和设置表单元素的值（双向数据绑定）
• 绑定的数据会和表单元素值相关联
• 绑定的数据和表单元素的值是双向绑定的

图片切换

• 列表数据使用数组保存
• v-bind 指令可以设置元素属性，比如src
• v-show 和 v-if 都可以切换元素的显示状态，频繁切换用 v-show，优化性能