Vue各种指令

泰裤辣.

已于 2023-05-22 14:32:49 修改

阅读量43

点赞数

文章标签： vue.js 前端 javascript

于 2023-05-04 20:00:31 首次发布

本文链接：https://blog.csdn.net/qq_56632239/article/details/130493552

版权

本文详细介绍了Vue.js中的几个重要指令，包括v-cloak用于解决加载时闪动问题，v-text和v-html分别用于填充纯文本和HTML片段，v-pre保留原始HTML，v-once只渲染元素一次，v-bind动态绑定属性，v-on绑定事件监听器，v-for循环渲染，v-if/v-else条件分支，以及v-model实现数据的双向绑定。这些指令在构建响应式用户界面时起到关键作用。

摘要由CSDN通过智能技术生成

v-cloak

作用：解决浏览器在加载页面时因存在时间差而产生的闪动问题

原理：先隐藏元素挂载位置，处理好渲染后再显示最终的结果

注意：要和css规则一起使用

eg：

<style>
    [v-cloak] {
        display: none;
    }
</style>

<div v-cloak>
  {{ message }}
</div

v-text

作用：填充纯文本

好处：相比插值表达式更加简洁；

不存在插值表达式的闪动问题；

eg：

<div id='app'>
	<span v-text="msg"></span>
	<!-- 和下面的一样 -->
	<span>{{msg}}</span>
</div>

<script src="./js/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      msg:'<a href="http://www.baidu.com/">百度一下</a>'
    }
  })
</script>

v-html（后台运用居多）

作用：填充HTML片段

缺点：存在安全问题

eg：

<div id='app'>
    <div v-html="html"></div>
</div>

<script src="./js/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      html:'<a href="http://www.baidu.com/">百度一下</a>'
    }
  })
</script>

v-pre

作用：填充原始信息（对应之前html标签中的<pre>）

eg:

<div id='app'>
    <div v-html="html"></div>
</div>

<script src="./js/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      html:'<a href="http://www.baidu.com/">百度一下</a>'
    }
  })
</script>

v-once

作用：只渲染元素或组件一次，之后元素或组件失去响应式

eg：

<div id="app">
	<h3>{{message}}</h3>
	<!-- 动态修改message值，此绑定将不会发生改变 -->
	<div v-once>{{message}}</div>
</div>
<script src="./js/vue.js"></script>
<script type='javascript'>
  const vm = new Vue({
      el: '#app',
      data: {
          message: '你好世界'
      }
  })
</script>

v-bind（重点）

作用:动态绑定一个或多个（可以用“ ：”代替）

eg：

<body>
    <div id="app">
        <a :href="url" :target="type" :alt="alt">{{alt}}</a>
        <a :href="url">{{alt}}</a>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            url: 'https://www.fliggy.com/',
            type: '_blank',
            alt: '飞猪官网'
        }
    })
</script>

v-on（重点）

作用：绑定事件监听器（事件绑定可以用“ @ ”代替）

eg:

<style>
    #big {
        width: 300px;
        height: 300px;
        background-color: red;
    }
    #mid {
        width: 200px;
        height: 200px;
        background-color: green;
    }
    #sma {
        width: 100px;
        height: 100px;
        background-color: pink;
    }
</style>

<body>
    <div id="app">
        <div id="big" @click="say('大娃',$event)">
            <div id="mid" @click="say('二娃',$event)">
                <div id="sma" @click="say('三娃',$event)"></div>
            </div>
        </div>
    </div>
</body>

<script src="./js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {

        },
        methods:{
            say: function(name,event){
                console.log('你点了' + name);
            }
        }
    })
</script>

v-for（循环指令）

作用：根据一组数组或对象的选项列表进行渲染

eg：

<body>
    <div id="app">
        <div>
            <ul>
                <li :key="index" v-for="(item,index) in cars">{{item}}</li>
            </ul>
        </div>
        <div>
            <ul>
                <li :key="index" v-for="(item,key,index) in user">{{key}}：{{item}}</li>
            </ul>
        </div>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            cars: ['bmw','aodi','benci','haima'],
            user: {
                username: 'zhangsan',
                gender: 'mele',//性别，sex
                age: 22
            }
        }
    })
</script>

v-if v-else v-else-if v-show（分支指令）

v-show：根据表达式的真假值切换display 的css属性，显示或者隐藏

eg：

<!-- 模板部分 -->
<div v-if="score >= 90">
  优秀
</div>
<div v-else-if="score >= 80 && score < 90">
  良好
</div>
<div v-else-if="score >= 70 && score < 80">
  一般
</div>
<div v-else>
  不及格
</div>
<!-- v-show -->
<div v-show='flag'>测试v-show</div>

<!-- JavaScript部分 -->
......
data: {
	score: 88,
	flag:false
}

v-model（重点）

作用：表单元素的绑定，实现了数据的双向绑定，通过表单项可以改变数据

eg：

普通文本框：

<div id='app'>
    <p>{{message}}</p>
    <input type='text' v-model='message'>

    <!--
    v-model其实是`语法糖`,它是下面这种写法的简写
    语法糖：这种语法对语言的功能并没有影响，但是更方便程序员使用
    -->
    <input type='text' :value='msg' @input='msg=$event.target.value'/>
</div>

<script type='text/javascript'>
new Vue({
    el: '#app',
    data: {
		msg: 'message默认值'
    }
})
</script>

多行文本框：（只能接收数据，不能改变数据）

<div id='app'>
    <textarea v-model="message"></textarea>
</div>

<script type='text/javascript'>
new Vue({
	el: '#app',
	data: {
		message: '我是多行文本内容'
	}
})
</script>

单个复选框：

<div id='app'>
    <textarea v-model="message"></textarea>
</div>

<script type='text/javascript'>
new Vue({
	el: '#app',
	data: {
		message: '我是多行文本内容'
	}
})
</script>

多个复选框：

<div id='app'>
    <input type="checkbox" value="html" v-model="checkedNames">
    <input type="checkbox" value="css" v-model="checkedNames">
    <input type="checkbox" value="js" v-model="checkedNames">
</div>

<script type='text/javascript'>
new Vue({
	el: '#app',
	data:{
    	// 如果数组中有对应的value值，则此checkbox会被选中
		checkedNames:[]
	}
})
</script>

单选按钮：

<div id='app'>
    男<input type="radio" name="sex" value="男" v-model="sex">
	女<input type="radio" name="sex" value="女" v-model="sex">
</div>

<script type='text/javascript'>
new Vue({
	el: '#app',
	data: {
		sex: '女'
	}
})
</script>

下拉框：

<div id='app'>
    <select v-model="selected">
        <option>请选择</option>
        <option>HTML</option>
        <option>CSS</option>
        <option>JS</option>
    </select>
</div>

<script type='text/javascript'>
new Vue({
	el: '#app',
	data: {
		selected: 'JS'
	}
})
</script>