简介(必须跟着他的语法写
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 获取和设置表单元素的值 (双向数据绑定
便捷的设置和获取表单元素的值
绑定的数据和表单元素值相关联
绑定的数据<-->表单元素的值