Vue的一些常用指令

在调用方法时，参数若不加双引号，会默认为实例中的变量或方法去寻找。方法会默认传递进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=[]

Vue的一些常用指令

猜你喜欢