Vue入门-指令-语法-事件修饰符

指令

{{属性名}}: 展示属性对应的值
v-text: 覆盖原有内容绑定数据(插入表达式)
v-cloak: 解决插入表达式闪烁问题
v-html: 将数据解析为html元素并绑定数据
v-bind: vue提供的属性单向绑定,从M绑定到V (缩写 : ) 
v-model: 属性双向绑定,只能使用在表单元素中
v-on: vue提供的事件绑定(缩写 @ )
v-for: 循环指令
v-if: 每次都会重新删除或创建元素(有较高的切换性能消耗,适用元素可能永远不会被显示出来)
v-show: 每次只切换元素 display:none 样式(有较高的初始渲染消耗,适用元素频繁切换)

表单元素: input(radio、text、address、email…)、select、checkbox、textarea…

• 自定义全局指令

  名称: <input type="input" />
  ID: <input type="input" v-focus="'red'" />//注意此处的引号 
  <scrpit>
  
     //使用Vue.directive()定义全局指令 v-focus
     //参数1: 指令名称,在定义时不需要加 v- 前缀 调用时必须加上 v- 前缀
     //参数2: 对象, 定义一些指令相关的函数,这些函数可以在特定阶段执行相关操作
     Vue.directive('focus',{
   		// 在每个函数中 第一个参数永远是 el, 表示被绑定了指令的那个元素 el 是一个原生JS对象
     		// 每当指令绑定到元素上时,将立即执行bind函数,并且[只执行一次]
   		bind: function(el,binding){
   		// 在元素刚绑定指令时 还没有插入到DOM中去时 调用 focus 方法没有作用
   		// 一个元素只有在插入到DOM之后才能获取焦点
   		
   		// 样式,只要通过指令绑定给了元素,不管这个元素有没有被插入到页面中区,这个元素一定有一个内联的样式
   		// 样式操作一般在bind中绑定
   		
   		//binding: 一个对象,具有一些属性
   		console.log(binding.name)//打印当前的指令名(不携带 v- 的名称) 此处打印结果为: focus
   		console.log(binding.value)//打印当前的入参  使用该属性获取值会将值进行处理 例如 将入参 red 改成 1+1  则打印结果为: 2
   		console.log(binding.expression)//打印当前的入参  例如 将入参 red 改成 1+1  则打印结果为: 1+1
   		el.style.color=binding.value
  
   		},
   		// 元素插入到DOM中时执行,并且[只执行一次]
   		inserted: function(el){
   			el.focus();
   		},
   		// 当VNode更新时执行,[可能会执行多次]
   		updated: function(){}
   	})
   	var vm=new Vue({
   		data:{
   		
   		}
   	})
  </scrpit>
  

语法

• v-for
  2.2.0+的版本中,当在组件使用v-for时,必须指定key

1. 循环简单数组:

   <p v-for= '(实例名 , 索引变量名) in list' >索引 : {{索引变量名}} --- 值 : {{实例名}}</p>
   <scrpit>
     var vm=new Vue({
     	data:{
     		list:[1,2,3,4]
     	}
     })
   </scrpit>
   

2. 循环对象数组:

   <p v-for= '(user , index) in list' >ID : {{user.id}} --- 名称 : {{user.name}} --- 索引 : {{index}}</p>
   <scrpit>
    var vm=new Vue({
    	data:{
    		list:[
    		{id:1,name '张三'},
    		{id:2,name '李四'},
    		{id:3,name '王五'}
    		]
    	}
    })
   </scrpit>
   

3. 循环对象:
   在遍历对象身上的键值对时,除了有 val key ,在第三个位置还有一个索引

   <p v-for= '(val, key,index) in user' > 键 : {{key}} --- 值 : {{val}} --- 索引 : {{index}}</p>
   <scrpit>
     var vm=new Vue({
     	data:{
     		user:{
     		id: 1,
     		name: '张三',
     		gender: '男'
     		}
     })
   </scrpit>
   

4. 迭代数字
   当使用v-for迭代数字时 数字从1开始

   <p v-for= 'count in 10' >第{{count}}次</p>
   

• 定时器

  var 定时器ID变量名=setinterval(()=>{
  方法逻辑
  },时间间隔ms)
  

• 停止定时器

  clearInterval(定时器ID变量名)
  

• 添加样式

  <h1 :class="['类名1','类名2']">内容</h1>
  三元表达式
  <h1 :class="[ boolean? '类名3' : '类名4']">内容</h1>
  在数组中使用对象代提三元表达式提高可读性
  <h1 :class="[{'类名1' : boolean}]">内容</h1>
  在为 class 使用使用 v-bind 绑定对象时,对象的属性是类名,由于对象的属性可带引号,也可不带引号; 属性的值 是一个标识符
  写法1:
  <h1 :class="{类名1:boolean,类名2:boolean,类名3:boolean}">内容</h1>
  写法2:
  <h1 :class="classObj">内容</h1>
  <scrpit>
  var vm=new Vue({
  	data:{
  	classObj={类名1:boolean,类名2:boolean,类名3:boolean}
  	}
  })
  </scrpit>
  

  注:类名如果携带 - 必须加单引号

事件修饰符

• 示例:

  语法: 事件 事件修饰符
  @click.self="方法名"
  @click.prevent.once="方法名"
  

• .stop:阻止冒泡(父子元素都绑定事件,触发子元素事件后会逐层触发父元素事件)

• .prevent 阻止默认事件

• .capture 捕获触发事件机制(从父级到子级触发事件)

• .once 只触发一次

• .self 只会阻止自身冒泡

按键修饰符

• 示例:

  语法: 键盘事件.绑定的变量名称(keyCode码)
  <input type="input" :value="msg" @keyup.f2="updateVal()" />
  <scrpit>
     var vm=new Vue({
     	data:{
     		msg: "这是一个输入框",
     	},
     	methods: {
         updateVal() {
           this.msg = "这是简单的输入框";
         },
       },
     })
  </scrpit>
  

• 自定义全局按键修饰符

   <input type="input" :value="msg" @keyup.FFF="updateVal()" />
    <scrpit>
   	Vue.config.keyCodes.FFF = 113
   	var vm=new Vue({
   		data:{
   			msg: "这是一个输入框",
   		},
   		methods: {
   	    updateVal() {
   	      this.msg = "这是简单的输入框";
   	    },
   	  },
   	})
   </scrpit>
  

  KeyCode码可参考这里

过滤器

• 语法:

  Vue.filter('过滤器的名称', function(data){
  	处理逻辑
  })
  

• 示例:

  <p>{{ msg | msgFormat}}</p>
  <scrpit>
     ...
     Vue.filter('msgFormat' , function(str){
     		return str.replace('程序员' , '老司机')
     		//字符串的 replace 方法,第一个参数 除了可以定义字符串之外 还可以定义一个正则
     		return str.replace(/程序员/g , '老司机')
     })
     var vm=new Vue({
     		data:{
     		msg: '我是程序员,一位刚入行的程序员'
     		}
     })
  </scrpit>
  

• 过滤器第一个入参为管道符 | 前面的参数 , 方法参数可以传多个,可以使用多个过滤器

  <p>{{ msg | msgFormat('新手','萌新') | dataFormat }}</p>
  <script>
  	...
  	Vue.filter('msgFormat', function (str, arg1,arg2) {
    		return str.replace(/程序员/g, arg2)
  	})
  	Vue.filter('dataFormat', function (msg) {
  	  	return str.replace(/萌新/g, '码农')
  	})
  	var vm=new Vue({
     		data:{
     		msg: '我是程序员,一位刚入行的程序员'
     		}
     	})
  </scrpit>
  

• 私有过滤器

  <p>{{ msg | msgFormat('新手','萌新') | strFormat}}</p>
  <script>
   	...
   	var vm=new Vue({
   		data:{
      			msg: '我是程序员,一位刚入行的程序员'
      	}
   	}),
   	filters: {
   		strFormat: function (str, arg1) {
     			return str.replace(/程序员/g, arg1);
   		},
   	},
  </scrpit>
  

  注:当全局过滤器名与私有过滤器名一致时,会调用私有过滤器(就近选择)