Vue 基础知识之框架指令

清風明月_xf

已于 2023-06-22 12:50:30 修改

阅读量378

点赞数 1

分类专栏：前端文章标签： vue.js javascript ecmascript

于 2023-06-22 12:48:45 首次发布

本文链接：https://blog.csdn.net/qq_41597943/article/details/130943154

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

Vue.js 框架指令
1、v-show 指令
2、v-for 指令
3、v-bind 指令
4、v-on 指令
5、v-model 指令
6、v-if 指令

Vue.js 框架指令

1、v-show 指令

v-show=“isShow” 是 Vue.js 框架中的一个指令，用于控制元素的显示和隐藏。当 isShow的值为 true 时，元素会显示；当 isShow的值为 false 时，元素会隐藏。这个指令不会改变 DOM 的结构，只是通过 CSS 的 display 属性来控制元素的显示和隐藏。

<template>
  <div>
    <button @click="onClick()">点击按钮</button>
    <p v-show="isShow">显示或隐藏信息</p>
 
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false
    }
  },
  methods:{
    onClick(){
      this.isShow = !this.isShow
    }
  }
}
</script>

在这里插入图片描述

2、v-for 指令

v-for 指令是Vue.js 框架中的一个指令，用于循环渲染一组数据到页面上。可以用在任何可以迭代的数据类型上，比如数组、对象和字符串。

举例
v-for循环渲染了object对象中的每一个属性，并将当前属性的值赋值给 value，当前属性名赋值给 key。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script>
      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
        CSS.supports('top: constant(a)'))
      document.write(
        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
    </script>
    <title></title>
    <!--preload-links-->
    <!--app-context-->
	<script src="vue.js" type="text/javascript" charset="UTF-8"></script>	
  </head>
  
  <body>
  
    <div id="app">
    	<ul>
			<li v-for='food in foodlist'>{{food.name}}:{{food.price}}</li>
			<br>
			<li v-for='(key, value) in foodlist':key='key'>{{key.name}}:{{key.price}}</li>
		</ul>
	</div>
	
	<script type="text/javascript">
		var app=new Vue({
			el:'#app',
			data:{  //在Vue实例里，所有的数据属性都放在data里
				// foodlist:['橘子','苹果','哈密瓜']
				foodlist:[
					{
						name:'橘子',
						price:10,
					},
					{
						name:'苹果',
						price:16,
					},
					{
						name:'哈密瓜',
						price:6,
					}
				]
			}
		})
	</script>
	
</body>
</html>

注：v-for使用过程中出现的报错：

在这里插入图片描述
设置对应的key
在学习vue过程中遇到Elements in iteration expect to have ‘v-bind:key’ directives.’ 这个错误，查阅资料得知Vue 2.2.0+的版本里，当在组件中使用v-for时，key是必须设置的。https://www.cnblogs.com/h2zZhou/p/9639984.html
在这里插入图片描述

预览

3、v-bind 指令

v-bind 指令是Vue.js 框架中的一个指令，用于动态绑定HTML属性。它的作用是将Vue实例中的数据绑定到HTML元素的属性中，从而实现动态渲染。

语法格式

v-bind ：属性名=“表达式”
：属性名=“表达式” （简写）

举例
实现将Vue实例中的message数据绑定到HTML元素的 a 和 title 属性中。

<body>

    <div id="app">
		<span> 
			<a v-bind:href="url">点击跳转链接</a>
		</span>	
		<br>
		<br>
		<span v-bind:title="message">鼠标悬停在这里查看提示</span>
	</div>

	<script type="text/javascript">
		var app=new Vue({
			el:'#app',
			data:{
				url:'https://v2.cn.vuejs.org/v2/guide/',
				message:'早上好'
			}
		})
	</script>
	
</body>

在Vue中，无动态绑定的链接，点击后无法跳转到具体页面

<a href="url">无动态绑定的链接</a>

预览

拓展 v-bind:class
v-bind:class 也是 Vue.js 的一个指令，用于绑定 HTML 元素的 class 属性。它可以接收一个对象或一个数组作为参数，用来动态地设置 class 属性的值。

1）当 v-bind:class 绑定的值是一个对象时，它的属性名表示 class 名称，属性值表示是否添加该 class 名称。例如：

<div v-bind:class="{ active: isActive }"></div>

上面的代码中，active 是一个 class 名称，isActive 是一个布尔值，如果 isActive 为 true，则会将 active 这个 class 添加到该 div 元素上。

2）当 v-bind:class 绑定的值是一个数组时，它的每个元素都会被添加到元素的 class 属性中。例如：

<div v-bind:class="[activeClass, errorClass]"></div>

上面的代码中，activeClass 和 errorClass 都是字符串，它们会被添加到该 div 元素的 class 属性中，例如：class=“active error”。
除了 v-bind:class，Vue.js 还提供了许多其他的指令，用于绑定 HTML 元素的属性，例如 v-bind:style 用于绑定元素的 style 属性。
MyComponent_like.vue

<template>
    <div>
        <button v-bind:class="{like_state:like_state}" @click="add()" >👍{{ like_count }}</button>
        <br>
        <br>
        <button v-bind:class="{like_count:like_state}" @click="add()" >👍{{ like_count }}</button>
    </div>
</template>

<script>
export default{
    name:'MyComponent_like',
    data(){
        return{
            like_count:0,
            like_state:false
        }
    },
    methods:{
        add(){
            if(!this.like_state){
                this.like_count++
               
            }else{
                this.like_count--
                
            }
            this.like_state=!this.like_state                        

        }
    }
}
</script>

<style>
.like_state{
    background: darkseagreen;
}
.like_count{
    color: blue;
}
</style>

App.vue

<template>
  <div>
  	<my-component-like></my-component-like>
  </div>
</template>
<script>
import MyComponent_like from './MyComponent_like.vue';

export default {
  name: 'App',
  components: {
    'my-component-like':MyComponent_like,
  }
}
</script>

3）预览
在这里插入图片描述
点击任意按钮，上面的总是在点赞后改变背景色，取消点赞背景色还原，下面按钮总是在点赞后改变字体颜色，取消点赞字体颜色还原。

4、v-on 指令

用于绑定事件监听器，可以用在任何支持事件的HTML元素上，实现交互效果。除了 click 事件，我们还可以绑定其他的事件，比如 input、submit、keydown 等等。同时，我们还可以使用缩写语法 @ 来代替 v-on:
下面的例子中，v-on绑定了一个click事件监听器，当用户点击时，会触发onclick方法。

举例

//HTML
		<span>
			<button v-on:click="onclick">点击</button>
			<br>
			<button @click="onclick">按钮</button>
		</span>
		
//js		
		var app=new Vue({
			el:'#app',
			methods: {
				onclick:function() {
					console.log("clicked");
				}
			},
			
		})

//HTML
  <div>
      <button v-on:click="clickevent()">反转字符串</button>
      {{ msg }}
  </div>
  
//js
export default{
  name:'App',
  data(){
    return{
    	msg:"Good afternoon! It's so hot that the road is boiling hot!",
  	} 
  },
  methods:{
  	  clickevent(){
      this.msg = this.msg.split('').reverse().join('')    
    }
  }, 
 }

//HTML
<div>
	<p>最受大众欢迎的娱乐：
      <input type="checkbox" @click="onClick" v-model="checkgroup" value="影视">影视
      <input type="checkbox" @click="onClick" v-model="checkgroup" value="户外">户外
    </p>
    {{ checkgroup }}
 
    <p>最受大众欢迎的电影：
      <input type="radio" @click="onClick" v-model="picked" value="满江红">满江红
      <input type="radio" @click="onClick" v-model="picked" value="阿凡达">阿凡达
    </p>
    {{ picked }}
</div>

//js
export default {
  data() {
    return {
   	  isChecked:false,
      checkgroup:[],  //复选框v-model双向绑定一个数组
      picked:''		//单选框v-model双向绑定一个字符串
     
    }
  },
}

预览

5、v-model 指令

用于实现表单元素和数据的双向绑定。它可以将表单元素的值绑定到Vue实例中的数据属性上，并且在表单元素的值发生变化时，自动更新Vue实例中的数据。同时，当Vue实例中的数据发生变化时，也会自动更新表单元素的值。V-model可以用在各种表单元素上，比如 input、textarea、select 等。
下面的例子中，将一个input元素的值绑定到了Vue实例中的gender属性：

举例

<div>
	你的性别是:
	<input type="text" v-model="gender">
	      {{ gender }}

	<textarea name="paragraph" cols="30" rows="10" v-model="paragraph"></textarea>

	<select name="city" v-model="city">
	    <option value="1">上海</option>
	    <option value="2">广州</option>
	    <option value="3">深圳</option>
	    <option value="4">北京</option>
	    <option value="5">杭州</option>
	</select>
	
	<input type="checkbox" @click="onClick" v-model="isChecked">是否勾选
</div>

export default{
	name:'App',
	data(){
	    return{
			gender:'',
	      	paragraph:'这里我们遇到了一点新东西。你看到的 V-model attribute 被称为指令。',
	      	city:''
	    }
	  },
	  methods:{
    onClick(){
      this.isChecked=!this.isChecked
      console.log(this.isChecked)
    }
  }
}

预览

在这里插入图片描述

表单修饰符 v-model.lazy 用于延迟绑定表单输入的值到组件的数据属性中。通常情况下，当表单输入框的值发生变化时，Vue.js 会立即更新组件的数据属性，但是如果使用 v-model.lazy 指令，则需要等到表单输入框失去焦点或者按下回车键时才会更新组件的数据属性。这样可以减少数据的频繁更新，提高应用程序的性能。

6、v-if 指令

用于根据变量的值来决定是否渲染某个元素。

实例

<!-- 1. 根据变量值来渲染DOM元素 -->
      <div v-if="showMessage">
        <p>上述代码中,如果showMessage的值为true,则会渲染p元素,否则不会渲染。</p> 
      </div>

or 这样书写

	<div>
        <p v-if="showMessage">控制是否显示一个元素</p>
    </div>

<!-- 2. v-else-if 与 v-if、v-else 一起使用 -->
      <div v-if="role=='admin'||role=='super-admin'">
        <p>管理员你好</p> 
      </div>
      <div v-else-if="role==''">
        <p>用户名为空</p>
      </div>
      <div v-else>
        <p>用户名输入错误</p>
      </div>

<script>
	export default{
	  name:'App',
	  data(){
	    return{
	    	showMessage:'true',
	      	// role:'super-admin',
	      	// role:'',
	      	role:'null'
	 }
  },
</script>