Vue基本基础知识简要

简介（必须跟着他的语法写

javascipt框架

简化Dom操作 

响应式数据驱动

▲Vue({})中的同级元素

△el:挂载点 ：

vue实例的作用范围：vue会管理el选秀命中的元素及其内部的后代元素

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

可以使用其他 双标签，不能使用 HTML和BODY

△data:数据对象：

vue中用到的数据定义在data中

data可以写复杂类型的数据

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

△Methods方法：

里面放方法，通过v-on来调用里面的方法

▲Vue指令

△v-text:

作用设置标签的内容

默认写法会替换全部内容，使用 插值表达式{{}}可以替换指定内容

内容支持写 表达式

△v-html

作用：设置元素的innerHTML

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

t-text指令无论内容是啥，只会解析文本

解析文本有text 解析html结构用v-html

△V-on

作用：为元素绑定事件

事件名不需要写on

指令可以简写@

绑定方法定义在methods属性中

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

补充：

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

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

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

.enter可以限制触发案件为回车

事件修饰符有多种

△v-show(操纵样式

作用根据真假切换元素的显示状态

原理是修改元素的display，实现显示隐藏

指令后面的内容，最终都会解析为布尔值

值为true元素显示，值为false元素隐藏

数据改变后，对应元素的显示状态会同步更新

△v-if(操纵dom元素

作用根据表达式的真假切换元素的显示状态

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

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

频繁切换用v-show反之使用v-if 前者的切换消耗小

△ v-bind（设置元素的属性 如src toitle class

作用为元素绑定属性

在属性前加v-bind或：

完整写法 v-bind：属性名

需要动态的增删class建议使用对象的方式

△v-for（根据数据生成列表结构 响应式

（也就是写一个标签，带上v-for语句数组里长度是多少，就复制出多少标签）

数组经常和v-for使用（对象也可以）

语法是（item，index）in 数据

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

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

△v-model 获取和设置表单元素的值 （双向数据绑定

便捷的设置和获取表单元素的值

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

绑定的数据<-->表单元素的值