Vue基础指令介绍及用法讲解

目录

• 内容渲染指令(v-text、v-html）
• 属性绑定指令(v-bind）
• 事件绑定指令(v-on）
• • 事件修饰符
  • 按键修饰符、系统修饰键
• 双向绑定指令(v-model:面试常客）
• • 修饰符
• 条件渲染指令(v-if(v-else-if、v-else)、v-show）
• • 可复用元素管理
• 列表渲染指令(v-for）
• • key属性的使用
• 其它指令

vue中的指令按照不同的用途可以分为如下6大类:
内容渲染指令、 属性绑定指令、 事件绑定指令、 双向绑定指令、 条件渲染指令和 列表渲染指令。

内容渲染指令(v-text、v-html）

  v-text 指令（更新元素的文本内容。如果要更新部分的文本内容，需要使用 {{ }} 插值。)、v-html 指令（更新元素的 innerHTML。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译)。

	{}}可以替换指定内容 -->
	

	
柳小姐  //你好呀!
	{{message + '呀!'}}柳小姐  //你好呀!柳小姐

	
	
  //你好
	
  //你好
	
  //一个百度的链接
	
  //百度

属性绑定指令(v-bind）

  插值表达式只能使用在元素的文本节点上，不能使用在元素的属性节点中。所以可以使用该指令：v-bind 指令：为元素的属性动态绑定属性值。语法糖为:。操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

	
	  
	
	
	

	 
	
 
	

	
  


data: {
	imgSrc: 'https://v3.cn.vuejs.org/logo.png',
	isActive: true,
          hasError: false,
          activeColor: 'red',
          width: '100px',
          fontSize: 30,
          styleObject: {
	    color: 'red',
	    fontSize: '13px'
	}
}

事件绑定指令(v-on）

  v-on 指令：为DOM元素绑定事件监听，并在触发时运行一些 JavaScript 代码。语法糖为@。注意：原生DOM对象有onclick、oninput、onkeyup等原生事件，替换为vue的事件绑定形式后，分别为: @click、@input、@keyup等。在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event property：@click="handle('ok', $event)"。

	
	
	
	
	
{{food}}


methods: {
	doit(){
		alert("做IT");
	}
}

注意：在绑定事件处理函数的时候，可以使用()传递参数。$event的应用场景：如果默认的事件对象e被覆盖了，则可以手动传递一个$event。

	
{{count}}
	
	加三


data: {
	count: 0
},

methods: {
	add(n,e){
		console.log(e);
		this.count += n;
	}
}

事件修饰符

  作用：更方便的对事件的触发进行控制。修饰符是由点开头的指令后缀来表示的。

    

        点击
        
        
    

methods: {
	btnClick() {
       console.log('btnClick');
    },
    // 阻止默认事件——冒泡的方法二： 
    // btnClick(e) {
    //    e.stopPropagation(); //阻止冒泡
    //    console.log('btnClick');
    // },
    divClick() {
        console.log('divClick');
    }
}

常见的6个事件修饰符：

事件修饰符	描述
.prevent	阻止默认行为（如a链接的跳转、表单的提交等）
.stop	阻止事件冒泡
.capture	捕获模式触发当前的事件处理函数
.once	绑定的事件只触发一次
.self	只有在event.target是当前元素自身时触发事件处理函数，即事件不是从内部元素触发的
.passive	滚动事件scroll的默认行为 (即滚动行为) 将会立即触发,而不会等待 onScroll 完成,这其中包含 event.preventDefault() 的情况。该修饰符尤其能够提升移动端的性能

注意：使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

按键修饰符、系统修饰键

按键码：.enter、.tab、.delete (捕获“删除”和“退格”键)、.esc、.space、.up、.down、.left、.right等；另外，还可以通过全局 config.keyCodes 对象自定义按键修饰符别名，例如：Vue.config.keyCodes.f1 = 112。
系统修饰键：可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。如.ctrl、.alt、.shift、.meta等。
.exact 修饰符允许控制由精确的系统修饰符组合触发的事件。
鼠标按钮修饰符：这些修饰符会限制处理函数仅响应特定的鼠标按钮：.left、.right、.middle等。

双向绑定指令(v-model:面试常客）

  v-model 指令在表单控件（input、textarea、select）或者组件上实现双向绑定（即视图或者数据的改变都能影响另一个的改变）。v-bind指令是单向绑定（数据影响视图，视图不影响数据）。另外，v-model可以认为相当于v-bind:value+v-on:input。

Message is: {{ message }}

修饰符

修饰符	说明
.lazy	可以让输入框失去焦点或者回车时才会刷新数据
.number	默认情况下在输入框输入的无论是字母还是数字都会被当作字符串处理，number修饰符可以让输入的内容自动转换成数字类型
.trim	自动过滤用户输入的数据中首尾的空格字符

条件渲染指令(v-if(v-else-if、v-else)、v-show）

  v-if 、v-show 指令都可以根据表达式的值的 true/false 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是