When calling the method, if the parameter is not enclosed in double quotation marks, it will default to the variable or method in the instance to find. The method will be passed into the event parameter by default.
-
v-for:
<li v-for="(item,index) in list">{ {item}}</li>-
//遍历数组 <li v-for="(item,index) in list">{ { item}}</li> -
//遍历对象 <li v-for="(value,key,index) in dict">{ { value}}-{ { key}}-{ { idnex}}</li> -
//绑定:key和不绑定:key的区别，需要了解diff算法 如果使用list.splice()来向列表某固定位置添加元素，查询方式是不一样的。
-
-
**v-on:**Monitor events v-on:click="" The quotation marks can be functions or function bodies, which can listen to DOM events or custom events
-
//当绑定的方法不需要添加参数时，括号可省略 //调用时带括号，但方法需要传参数但没有传，参数为undefine //调用时不带括号，但方法需要传参数但没有传，参数为浏览器发生的event事件 -
//如果函数需要event参数和其他参数 //在调用方法时，若需要手动获取浏览器参数的event对象，则传入的的值应为：$event <button @click="btnclick('name',$event)"></button> //name若不加双引号会默认为实例中的变量或方法 btnclick(a,event){ console.log(a.event) } -
Modifier :
.stop-Callevent.stopPropagation(). Such as preventing bubbling.prevent-Callevent.preventDefault(). If you prevent clicking submit, it will automatically submit by default.capture-Use capture mode when adding event listeners..self-The callback is triggered only when the event is triggered from the element itself bound to the listener..{keyCode | keyAlias}-The callback is only triggered when the event is triggered from a specific key..native-Listen for native events of the root element of the component..once-Only trigger the callback once..left-(2.2.0) Only triggered when the left mouse button is clicked..right-(2.2.0) Only triggered when the right mouse button is clicked..middle-(2.2.0) Only triggered when the middle mouse button is clicked..passive- (2.3.0) in a{ passive: true }mode to add a listener
-
-
v-once: The
<h2 v-once>{ {message}}</h2>page will not change as the command changes -
**v-html:** parse the string into html
-
v-text:
<h2 v-text="message"></h2>No need for interpolation syntax, and will overwrite innerHTML content -
**v-pre:*
*<h2 v-pre>{ {message}}</h2>will not parse mustache grammar -
v-cloak:
<h2 v-cloak></h2>In order to prevent vue from being displayed before parsing it -
**v-bind: **Dynamic binding attributes, (Mustache is binding innerHTML)
-
<img :src="imgurl"> -
//对象语法 <div class="box" :class="{类名1:boolean,类名2:boolean}"></div> //两个class最终会合并。boolean可以用data中的数据表示。 //数字语法 <div :class="['box1','box2',bo3]"></div> //加引号会当做字符串，不加引号会作为变量。 //用methods或计算属性 <div :class="fangfa()"></div> -
动态绑定style，同class <h2 :style="{ width:'50px',height=size}"></h2> //加单引号会当做字符串，不加引号会作为变量
-
-
**v-if and v-else-if and v-else: ** If false, the element will not appear in the DOM at all. Due to the existence of label reuse in Vue. If you want the input not to be reused, you can add the attribute key="".
-
**v-show:** If it is false, it will not be rendered in the browser, but it still exists in the DOM (just added style: style="display:none"). It is used when the frequency of display and hide switching is high.
-
**v-model:** Used to realize the two-way binding of form elements and data.
-
<input type="text" v-model="message"> || <input typ="text" :value="message" @input="message = $event.target.value">//本后的本质 -
<label for="male"> <input type="radio" id="male" value="男" v-model="sex">男<br> </label> <label for="female"> <input type="radio" id="female" value="女" v-model="sex">女 </label> { {sex}} -
<label for="网络小说"> <input type="checkbox" id="网络小说" value="网络小说" v-model="novel">网络小说 </label> <label for="玄幻小说"> <input type="checkbox" id="玄幻小说" value="玄幻小说" v-model="novel">玄幻小说 </label> novel=[]
-