vue-指令详情及操作

Posted 2022-05-21 guqzhoublog

指令

需要大家实际操作去感受一下，多练容易掌握

数据绑定

和v-text 解析文本  v-html 解析html标签   *  +-*/，三术运算可用

事件绑定

给标签绑定函数，v-on:click && @click 函数在methods里面 事件中有event对象，函数参数为$event,数据用this操作，如果外部调用$data

其他指令

v-for  v-for="item(字段名,遍历数组指向每个值)  in(of) list(数组json)"

v-model 表单元素实现数据双向绑定v-model="" 表单元素value，需要在vue初始化设置一下

v-if (操作dom元素删除添加)、 v-show（操作dom元素里面的css） 相同显示与隐藏   没v-hide

v-if（>）、v-else-if(>&&<) 和 v-else(<) 三个合用业务逻辑判断,中间不能出现其他dom元素

v-once 一次渲染

v-bind 如果行间样式有属性变量用v-bind：或者简写用： 后面可以用数组，改变多种样式

类名<:class="classA:isa">用布尔值判断用不用 ，对象形式 <:class="classobj">

基本组件属性

new Vue=(
el, //要绑定的dom
router，//路由
data，//需要绑定的数据
methods，//定义可以在组件或者模板内的方法
watch，//监听方法，监听到数据改变，需要做对应操作
filter，//过滤
computer，//依赖与别的数据计算出来的数据，name=firstName lastName
)

实例