在调用方法时,参数若不加双引号,会默认为实例中的变量或方法去寻找。方法会默认传递进event参数。
-
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:**监听事件 v-on:click="" 引号里可以是函数或者函数体,既可以监听DOM事件,也可以监听自定义事件
-
//当绑定的方法不需要添加参数时,括号可省略 //调用时带括号,但方法需要传参数但没有传,参数为undefine //调用时不带括号,但方法需要传参数但没有传,参数为浏览器发生的event事件
-
//如果函数需要event参数和其他参数 //在调用方法时,若需要手动获取浏览器参数的event对象,则传入的的值应为:$event <button @click="btnclick('name',$event)"></button> //name若不加双引号会默认为实例中的变量或方法 btnclick(a,event){ console.log(a.event) }
-
修饰符:
.stop
- 调用event.stopPropagation()
。 如阻止冒泡.prevent
- 调用event.preventDefault()
。 如阻止点击提交时会默认自动提交.capture
- 添加事件侦听器时使用 capture 模式。.self
- 只当事件是从侦听器绑定的元素本身触发时才触发回调。.{keyCode | keyAlias}
- 只当事件是从特定键触发时才触发回调。.native
- 监听组件根元素的原生事件。.once
- 只触发一次回调。.left
- (2.2.0) 只当点击鼠标左键时触发。.right
- (2.2.0) 只当点击鼠标右键时触发。.middle
- (2.2.0) 只当点击鼠标中键时触发。.passive
- (2.3.0) 以{ passive: true }
模式添加侦听器
-
-
v-once:
<h2 v-once>{ {message}}</h2>
页面不会随着命令改变而改变 -
**v-html:**将字符串解析成html
-
v-text:
<h2 v-text="message"></h2>
无需插值语法,并会覆盖innerHTML内容 -
**v-pre:*
*<h2 v-pre>{ {message}}</h2>
不会解析mustache语法 -
v-cloak:
<h2 v-cloak></h2>
为了在解析vue之前,不让其显示 -
**v-bind:**动态绑定属性,(Mustache是绑定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和v-else-if和v-else:**如果为false,则该元素根本不会出现在DOM中。由于vue存在标签复用的情况。若想让input不复用,可添加属性key=""。
-
**v-show:**如果为false,他不会渲染到浏览器中,但DOM中仍存在(只是添加了样式:style=“display:none”)。在显示和隐藏切换频率高时使用。
-
**v-model:**用来实现表单元素和数据的双向绑定。
-
<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=[]
-