当前位置 : 主页 > 网页制作 > html >

VUE 是个 M V VM框架

来源:互联网 收集:自由互联 发布时间:2021-06-12
vue基本使用 new出来一个Vue的实例,传一堆配置参数,控制一片html VM: 响应系统 - vDOM做标记 -一个循环周期结束后-操作DOM new Vue 返回 VM new Vue({ el:‘选择器‘ 要控制的那片html代码 data:

vue基本使用

new出来一个Vue的实例,传一堆配置参数,控制一片html

VM: 响应系统 - > vDOM做标记 ->一个循环周期结束后->操作DOM
new Vue 返回 VM
new Vue({
el:‘选择器‘ 要控制的那片html代码
data:{key:value}数据
methods:{fnName:fn} 方法
})
M: 初始化数据
data 选项 number/string/boolean/array/json/undefined/null
V: 数据绑定 插值表达式|指令|属性
{{数据名}} 模板 mustache 插值表达式 声明式渲染
v-text="数据名" vue特有的属性(指令) (不解释标签)
v-html="strong" 非转义输出 ( 解释标签)
v-for="(val,index) in 数据" val值 index索引 变量数组、对象
默认 :key="index" 指定key 是个bmw字符 vue是认得 修改VDom的key值
:key="item.id" 指定key 是数据id(唯一性) 修改VDom的key值

key的优势: 避免数据错乱导致的视图问题,提供性能

v-bind:html属性="数据" 普通的html属性绑定数据
:html属性="数据" 简写 title/src/url/

事件:
v-on:事件名="方法"
@事件名="方法" 简写
@事件名="方法(参数)"
@事件名="方法($event,参数)" methods:{方法:function(ev,参数){ev/event}}

注意:vue提供的选项的值如果是函数时,不可用箭头函数

网友评论