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中时执行,并且[只执