当前位置: 首页 > Web前端 > vue.js

vue的vue语法

时间:2023-04-01 11:41:40 vue.js

(备注:vue语法知识以vuejs官方文档为核心,辅助一些个人理解或其他案例图解,所以文章不能说是原创,属于伪原创。)Vue基本语法vueinstanceletvm=newVue({el:'#app',//表示挂载的DOM节点data:{//如果数据是单个组件数据是一个函数,则每个实例的数据是notsharedmessage:'hellovue!'},methods:{//里面是vue实例的方法})插值文本当插入一个数据进行文本分析时,直接使用{{}}

{{message}}

HTML如果插入的数据使用v-html解析{{msg}}

nodeattributewhen如果需要给节点添加属性,使用v-bind:可以使用简写:

当属性值为布尔值时,如果为false或null或undefined,则不渲染该属性,其他所有值默认为true(存在即真理)

`letapp=newVue({el:'#app',data:{attr:false}})`javaScript表达式插值除了data属性外js表达式{{++num}}{{name?'xuwen':'tom'}}可以放在属性中v-htmlv-bind:abbreviation:v-on:abbreviation@v-ifv-showv-forv-model动态属性这些指令的具体用法将在后面的章节中详细说明。v-for列表渲染需要说明一下。不管是官方还是别处,v-for都是用forin。其实我也不是特别理解,如果data属性值是数组,我更喜欢。objects的使用,in的使用,更语义化{{list.name}}
data(){return{name:'vuejs',lists:[{id:1,name:'徐文'},{id:2,name:'文天祥'},{id:3,name:'SuShi'}]}}在v-for块中,我们可以访问所有父作用域属性{{name}}-{{list.name}}
重点:v-for中有一个键值,它是做什么用的?答:键值的主要作用是将数组元素与dom节点精确绑定。如果删除一个数组元素,vue会精确删除相关的节点。而如果没有key值,vue更多的是节点复用。如果数据发生变化,一个一个地比较数据会浪费性能。v-model双向绑定v-model主要用于表单输入textareaselect更新数据v-model会忽略表单中value、checked、selected的初始值,数据源直接来自于数据中的值

{{inp}}

data(){return{inp:'123'}}复选框单复选框绑定布尔值值{{checked}}多复选框绑定数组type="checkbox"name=""id="basketball"v-model="balls"value="basketball">篮球排球

{{balls}}

~~~~数据(){return{checked:true,balls:[]}}radiobutton足球篮球volleyball

{{ball}}

data(){return{ball:''}}选择框请选择footballBasketballVolleyball

{{ball}}

修饰符v-on@事件处理添加1

{{num}}

`数据(){return{num:0}},方法:{addNum(){this.num++;}}modifier.stop.prevent.capture.self.once.passive.enter.tab.delete(捕获“delete”和“backspace”键).esc.space.up.down.left.right.ctrl.alt.shift.metav-if和v-showv-if是节点是否渲染v-show是节点是否显示false为了隐藏classbinding,一般classbinding包含一个对象包含是否有一个classdata(){return{isActive:true}}