VUE常用指令

一如远行客

已于 2023-01-15 17:45:47 修改

阅读量206

点赞数

分类专栏：前端学习文章标签： javascript 前端 html Powered by 金山文档

于 2023-01-07 11:21:08 首次发布

本文链接：https://blog.csdn.net/qq_47433906/article/details/128568226

版权

前端学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

vue指令只能在html标签中使用

v-text：插入普通文本

<div v-text="author"></div>等于<div>{{author}}</div>

v-html：插入HTML代码片段

    <div>{{author}}</div>
    <div v-html="author"></div>

  data () {
    return {
      author:'<h1>abc</h1>'
    }
  }

效果：

属性嵌套：

<template>
  <div class="hello">
    <div v-html="book.author"></div>
    <div v-text="book.name"></div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      book:{
        author:'<h1>abc</h1>',
        name:'毕业设计'
      }     
    }
  }
}
</script>

v-bind:用于响应式更新HTML标签的属性,响应式地绑定一个属性

<div v-bind:id="dynamicId"></div>等于<div :id="dynamicId"></div>

2.将表达式 url 的值绑定到元素的 href的属性上。

<template>
  <div class="hello">
  <a v-bind:href='url'>{{content}}</a>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      url:'http://www.baidu.com',
      content:'百度'
      }    
    }
  }
</script>

v-on:监听DOM事件，并在触发时运行一些javascrip代码，只能支持简单代码，复杂代码可绑定到函数上

- 绑定事件

单击按钮触发自增事件

<template>
  <div class="hello">
  {{count}}
  <button v-on:click="funcount">{{a}}</button> //声明单击按钮时调用funcount方法，funcount()表示当...时调用函数
  </div>                                                               //简写：<button @click="count++">
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      count:0,
      a:'单击'
      }     
    },
  methods: {    //要为组件添加方法，需要用到 methods 选项。它应该是一个包含所有方法的对象
    funcount() {
      this.count++; //Vue 自动为 methods 中的方法绑定了永远指向组件实例的 this。这确保了方法在作为事件监听器或回调函数时始终保持正确的 this。
    }
  },
  }
</script>

2.在函数中传入参数：

<template>
  <div class="hello">
  {{count}}
  <button @:click="a('jack')">{{b}}</button>   //点击按钮调用函数a（），并传入参数name='jack'
  {{name}}
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      name:'',
      b:'快点我！'
      }     
    },
  methods: {
    a(name) {  //函数a(name)
      this.name = 'hello'+name
    }
  },
  }
</script>

3.$event应用场景：如果默认的事件对象e被覆盖，则可以手动传递一个$event

- 事件冒泡与捕获

冒泡：从子元素（自身）事件开始，由内向外触发父元素事件

捕获：先触发父元素事件，再触发子元素（自身）事件

<template>
  <div class="hello">
    <div @click="a">
            <button @click="b">b</button>   //先触发自身事件（子元素事件）b，再触发父事件a
    </div>
    
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      }     
    },
  methods: {
    a(){
      alert("a")
    },
    b(){
      alert("b")
    }
  },
  }
</script>

事件修饰符:

.stop：用于子元素，阻止父元素的事件冒泡，就是只触发子元素事件不触发父元素事件

.self：用于父元素，阻止子元素的事件冒泡，只触发父元素事件不触发子元素事件

.prevent：阻止元素默认事件

<template>
  <div class="hello">
    <a href="http//www.baidu.com" @click.prevent="a">百度</a>//阻止触发跳转到百度网址事件
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      }     
    },
  methods: {
    a() {
      alert("达咩百度！") //跳出提示框
    }
  },
  }
</script>

.capturel：事件捕获，先触发子事件，再触发自身默认事件

.once：绑定事件仅触发一次

<template>
  <div class="hello">
    <a href="http//www.baidu.com" @click.prevent.once="a">百度</a>   //阻止跳转事件只阻止一次
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      }     
    },
  methods: {
    a() {
      alert("达咩百度！")
    }
  },
  }
</script>

v-if:条件渲染

v-else元素必须紧跟在v-if或v-else-if后，否则不会被识别

v-else-if元素必须紧跟在v-if或v-else-if后，否则不会被识别

<template>
  <div class="hello">
    <div>
      请输入年龄：
      <input type="text" v-model="age><br>
      <div v-if="parseInt(age)"> //parseInt( )函数将字符串转换成整型
        您的年龄是：{{age}}
        <div v-if="age<18">少年</div> //此处不能用v-else-if，没有紧跟v-if
        <div v-else-if="age<30">青年</div>   //v-else-if只能紧跟v-if使用
        <div v-else-if="age<50">中年</div>
        <div v-else-if="age<100">老年</div>
        <div v-else>输入错误</div>
      </div>
      <div v-else-if="age != null">输入错误</div>
      
    </div>
    
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      age : null
      }     
    },
  }
</script>

v-show:

v-show 会在 DOM 渲染中保留该元素；v-show 仅切换了该元素上名为 display 的 CSS 属性。

v-show 不支持在 <template> 元素上使用，也不能和 v-else 搭配使用

v-if vs. v-show

v-if 是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。

v-if 也是惰性的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。

相比之下，v-show 简单许多，元素无论初始条件如何，始终会被渲染(是否显示看v-show表达式的返回值，true则显示，false就用CSS display属性切换为不显示)，只有 CSS display 属性会被切换。

总的来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。

v-for:列表渲染，支持number,string,array,object

- 简单的列表渲染

<template>
  <div class="hello">
    <div>
      <span v-for="num in 10">{{ num }}    </span><br>       //数字
      <span v-for="str in 'abcdefg'">{{ str }}    </span><br>   //字符串
      <span v-for="str in ['a','b','c']">{{ str }}    </span><br>   //数组

      <ul>
        <li v-for="item in arr">{{ item }} </li>
      </ul>  
    </div>
    
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      arr:['java','c++','python'],
      }     
    },
  }
</script>

2.列表索引

<template>
  <div class="hello">
    <div>
        <div v-for="(item,index) in arr">{{ index }}-{{ item }}</div>  //第二个位置即index处就是索引，也可以取别的名字
    </div> 
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      arr:['java','c++','python'],
      }     
    },
  }
</script>

效果：

2.对于对象的遍历

<template>
  <div class="hello">
    <div>
        <div v-for="(item,index) in user">{{ index }}-{{ item }}</div>  //此时item为对象属性的值，即admin,123456
                                                                                                                 index为对象属性的名称，即username，mobile
    </div>
    
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      user:{
        username:'admin',
        mobile:'123456'
      }
      }     
    },
  }
</script>

效果：

value：对象属性的值

name：对象属性的名称

index：对象属性的索引

<div v-for="(value,name,index) in user">{{ index }}-{{ name }}-{{ value }}</div>

效果：

v-model:将表单输入框的内容同步给 JavaScript 中相应的变量,达到双向绑定效果

input标签属性：

1、input的value属性。该属性用于定义input框的初始值。

2、input的readonly属性。该属性规定了input只读状态，不可以进行修改。

3、input的disabled属性。该属性用于禁用input框，不可用、不可点击、不能进行表单提交。

4、input的size属性。该属性用于规定输入框的长度，值越大输入框越长。

5、input的maxlength属性。该属性用于规定输入框输入内容的最长长度。

<template>
  <div class="hello">
    <div>
        <label>用户名：</label>
        <input type="text" v-model="user.username"><br>
        {{ user.username }}
    </div>
    
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      user:{
        username:'admin',
        mobile:'123456'
      }
      }     
    },
  }
</script>

效果：

多行文本：<textarea> 中是不支持插值表达式的。需使用 v-model 来替代

<label>用户名：</label>
        <textarea v-model="user.username"></textarea><br>
        {{ user.username }}

复选框：将多个复选框绑定到同一个数组或集合的值

<input type="checkbox" v-model="" value="">

input:选择框，v-model将选择框内容与变量双向绑定

<template>
  <div class="hello">
    <div>
        <label>爱好：</label>
        <input type="checkbox" v-model="user.love" value="羽毛球"><label>羽毛球</label><br>
        <input type="checkbox" v-model="user.love" value="篮球"><label>篮球</label><br>
        <input type="checkbox" v-model="user.love" value="足球"><label>足球</label><br>
    </div>
    <hr> //水平线
    {{ user.username }}<br>
    {{ user.mobile }}<br>
    {{ user.love }}
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      user:{
        username:'admin',
        mobile:'123456',
        love:[]
      }
      }     
    },
  }
</script>

效果：

单选按钮：<input type="radio" v-model="" value="">

<template>
  <div class="hello">
    <div>
        <label>性别：</label>
        <input type="radio" v-model="user.sex" value="男"><label>男</label><br>
        <input type="radio" v-model="user.sex" value="女"><label>女</label><br>
    </div>
    <hr>
    {{ user.sex }}
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      user:{
        sex:''
      }
      }     
    },
  }
</script>

效果：初始为空

下拉列表：<select v-model="">

<template>
  <div class="hello">
    <div>
        <label>城市：</label>
        <select v-model="user.city">
          <option value="" disabled>请选择城市：</option> //下拉列表中请选择城市：这一行无法选中
          <option value="1">北京</option>
          <option value="2">上海</option>
          <option value="3">深圳</option>     
        </select>
    </div>
    <hr>
    城市：{{ user.city }}
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      user:{
        city:''
      }
      }     
    },
  }
</script>

效果：

用v-for表示下拉列表:

<template>
  <div class="hello">
    <div>
        <label>城市：</label>
        <select v-model="user.city">
          <!--
            用v-model将选中的值绑定到user中的city上，所以最后显示也是user.city而不是cityList
          --> 
          <option v-for="city in cityList">{{ city.text }}</option>
          <!--
            "city in cityList"表示遍历cityList
            {{ city.text }}表示填充下拉列表中的值,选项显示的部分
          -->   
        </select>
    </div>
    <hr>
    城市：{{ user.city }}
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      user:{
       city:''
      },
      cityList:[{
          text:'武汉',
          value:'01'
        },{
          text:'宜昌',
          value:'02'
      }]     
    }
  }
}
</script>

绑定模型数据的值：v-model &v-bind:绑定属性

<template>
  <div class="hello">
    <div>
      <input type="checkbox" v-model="user.checkdata" true-value="Y" false-value="N">是否同意该协议：
    </div>  
    同意：{{user.checkdata}}    
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      user:{
       checkdata:''
      },   
    }
  }
}
</script>

*v-bind（单向绑定）与v-model（双向绑定）区别：

v-bind用来绑定数据和属性以及表达式，缩写为'：'

绑定文本

直接用v-bind或者{{}}

<p v-bind="message"></p>
<p>{{message}}</p>

绑定属性

<p v-bind:src="http://...."></p>
<p v-bind:class="http://...."></p>
<p v-bind:style="http://...."></p>

绑定表达式

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

绑定html

<div>{{{ raw_html }}}</div>

这个时候必须要使用三个{}

2.v-mode使用在表单中，实现双向数据绑定的，在表单元素外使用不起作用

v-model多在表单中使用，在表单元素上创建双向绑定，根据控件类型选择正确的方法更新元素，可以绑定text、radio、checkbox、selected

示例：

<template>
  <div class="hello">
    <div>
      <label>性别：</label>
      <span v-for="sex in sexList">
        <!--
            在行内遍历sexList
          --> 
        <input type="radio" v-model="radiodata"  v-bind:value="sex.value">{{ sex.text }}
        <!--
            v-model="radiodata"：将单选按钮与变量radiodata绑定
            v-bind:value="sex.value"：绑定属性，将sex.value的值绑定到input框value的属性上（input框的初始值）
            {{ sex.text }}：单选按钮后的男，女
          --> 
      </span>     
    </div>  
    性别：{{radiodata}}
    <!--
           v-model将单选按钮的内容（即input框的value属性的值）与radiodata绑定，v-bind将input框的value属性与sex.text绑定，所以单选按钮的值=radiodata的值=sex.value的值
          --> 
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      radiodata:'',
      sexList:[{
        text:'男',
        value:'0'
      },{
        text:'女',
        value:'1'
      }]
    }  
  }
}
</script>

v-model修饰符

.lazy：延迟显示，默认情况下，v-model 会在每次 input 事件后更新数据 (IME 拼字阶段的状态例外)。添加 lazy 修饰符来改为在每次 change 事件后更新数据

<template>
  <div class="hello">
    <div>
      <label>性别：</label> 
        <input type="text" v-model.lazy="inputdata" >
    </div>  
    {{inputdata}}    
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      inputdata:''
    }  
  }
}
</script>

在input框中输入数据不同步显示，单击鼠标后才显示输入的数据

.number:让用户输入自动转换为数字，数据类型为数字

 <input type="number" v-model.number="inputdata" >

仅能输入数字，不能输入字符串,数据类型为number

<input type="text" v-model.number="inputdata" >

可以输入数字和字符串,输入数字时数据类型为number，输入字符串数据类型为string

<input type="number" v-model="inputdata" >

虽然只能输入数字，但数据类型为string

长度：.length

<template>
  <div class="hello">
    <div> 
        <input type="text" v-model="inputdata" >
        <!--
            此处不能为v-model.number="inputdata"，因为将inputdata转为数字类型就附不上长度了
            该长度计算包括输入的空格
    </div>  
    输入长度:{{inputdata.length}}:{{ inputdata }}    
  </div>
</template>