Vue前端框架常用指令集锦

最新推荐文章于 2023-09-09 16:52:33 发布

神之凝视

最新推荐文章于 2023-09-09 16:52:33 发布

阅读量302

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_27600723/article/details/105995341

版权

Vue 专栏收录该内容

14 篇文章 4 订阅

订阅专栏

v-once：这个指令让视图只渲染一次，将来就算相应的数据发生变化，也不会重新渲染。该指令主要在希望静态显示不需要更新数据的时候使用。
el：指定挂载点。
v-html：这个指令主要在需要操作原始HTML的时候使用。
v-bind：该指令在需要绑定HTML标签属性的时候使用。为了方便，该指令还有一个缩写，例如:class="myClass"就相当于v-bind:class=“myClass”。
v-on：该指令主要用于绑定事件处理程序。该指令有缩写@，例如@click="onClick"就相当于v-on:click=“onClick”。
v-model：该指令可以让页面元素和数据进行双向绑定。默认情况下数据和页面元素是单向绑定的，使用该指令可以让其变成双向绑定。该指令主要用于处理表单等场景。
条件渲染：v-if、v-else和v-else-if这几个指令用于条件渲染，让我们可以按照条件在页面上显示和隐藏某些元素。注意v-else-if指令是Vue 2.1新增的。类似的指令还有v-show，不过v-show指令仅仅改变元素的CSS display属性，也是说隐藏的元素还是存在于页面上，仅仅是不显示而已。而v-if等元素会真正创建和销毁元素。如下：

效果如下：
列表渲染：如果需要渲染一组数据，可以使用v-for指令。v-for指令需要一个item in items块来声明迭代那些数据，这里in也可以改为of。如果需要获取迭代的索引的话，可以把迭代块声明为(item, index) in items这样的。另外除了迭代一个列表，也可以迭代一个对象的属性。代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<h1>列表渲染</h1>
		<div id="s5">
		  <h3>名字列表</h3>
		  <ul>
		    <li v-for="name in names">{{name}}</li>
		  </ul>
		
		  <h3>人物表格</h3>
		  <table>
		    <thead>
		    <tr>
		      <td>编号</td>
		      <td>姓名</td>
		      <td>年龄</td>
		    </tr>
		    </thead>
		    <tbody>
		    <tr v-for="(person, index) of people" :key="index">
		      <td>{{index}}</td>
		      <td>{{person.name}}</td>
		      <td>{{person.age}}</td>
		    </tr>
		    </tbody>
		  </table>
		
		</div>
		<script>
		  let vm5 = new Vue({
		    el: '#s5',
		    data: {
		      names: [
		        'spark',
		        'hadoop',
		        'flink',
		        'storm'
		      ],
		      people: [
		        {name: 'spark', age: 24},
		        {name: 'hadoop', age: 25},
		        {name: 'flink', age: 24},
		        {name: 'storm', age: 30}
		      ]
		    }
		  })
		</script>
	</body>
</html>

执行效果如下：
在这里插入图片描述

事件处理：v-on指令用于绑定事件处理函数，这里的函数需要在构造Vue实例的时候在methods属性中声明。
绑定表单：如果要将数据和页面元素进行双向绑定，使用v-model指令。这个指令主要用于处理表单输入中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<h1>绑定表单</h1>
		<div id="s7">
		  <p>文本框：{{text}}</p>
		  <p>多行文本：{{textArea}}</p>
		  <p>单选按钮：{{radio}}</p>
		  <p>复选框：{{checkbox1}} + {{checkbox2}} + {{checkbox3}}</p>
		  <p>多选框：{{select}}</p>
		  <hr>
		  <p>文本框：<input type="text" v-model="text"></p>
		  <p>多行文本：<textarea v-model="textArea"></textarea></p>
		  <p>单选按钮：<input type="radio" v-model="radio" value="1" id="one"><label for="one">1</label>
		    <input type="radio" value="2" v-model="radio" id="two"><label for="two">2</label>
		  </p>
		  <p>复选框：
		  <input type="checkbox" v-model="checkbox1" id="checkbox1"><label for="checkbox">阅读</label>
		  <input type="checkbox" v-model="checkbox2" id="checkbox2"><label for="checkbox">音乐</label>
		  <input type="checkbox" v-model="checkbox3" id="checkbox3"><label for="checkbox">电影</label>
		  </p>
		  <p>多选框：<select id="select" v-model="select">
		    <option value="1">1</option>
		    <option value="2">2</option>
		    <option value="3">3</option>
		    <option value="4">4</option>
		  </select>
		  </p>
		</div>
		<script>
		  let vm7 = new Vue({
		    el: '#s7',
		    data: {
		      text: 'text',
		      textArea: 'textArea',
		      radio: '',
		      checkbox1: '',
			  checkbox2: '',
			  checkbox3: '',
		      select: '',
		    }
		  })
		</script>
	</body>
</html>

在处理表单输入的时候，还有.lazy、.number、.trim几个修饰符，它们的作用分别是在change事件中更新、将表单输入转换为数值以及去掉表单中的前后空格。

神之凝视

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue前端框架常用指令集锦

v-once：这个指令让视图只渲染一次，将来就算相应的数据发生变化，也不会重新渲染。该指令主要在希望静态显示不需要更新数据的时候使用。el：指定挂载点。v-html：这个指令主要在需要操作原始HTML的时候使用。v-bind：该指令在需要绑定HTML标签属性的时候使用。为了方便，该指令还有一个缩写，例如:class="myClass"就相当于v-bind:class=“myClass”。v-on：该指令主要用于绑定事件处理程序。该指令有缩写@，例如@click="onClick"就相当于v-on:.
复制链接

扫一扫