vue基本指令

1、指令的概念

        指令是vue为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构一共分为一下六种

        内容渲染、属性绑定、事件绑定、双向绑定、条件渲染、列表渲染

2、内容渲染指令：

        内容渲染指令是用来辅助开发者渲染DOM元素的文本内容如：

        v-text : 覆盖元素内部原有的内容 如下：username 在data里面被赋值world 那么下面p标签的值hello会被覆盖变成world

<p v-text='username'> hello </p>

         {{}} ：插值表达式，将下面的值赋值到对应标签中.如下：将username赋值给p标签得到hello world

 <p> hello {{ username }}</p>

        v-html : 将HTML 标签元素赋值到指定的标签里面。如下：

<p v-html="html_span"> 标签元素： </p>


const vm = new Vue({

    el:'#app' // el 是固定的写法，表示当前vm实例要控制页面上 id="app" 的那个区域内的数据，接收的值是一个选择器。

    data:{

      username:'world',

      html_span:'<span> 会将当前span标签一起赋值给p标签里面 </span>'

     }

 })

    3、属性绑定指令：

        如果要为元素的属性动态绑定属性值，则需要用到v-bind属性绑定指令 。

        简写方法 :属性名 = '值'

<div :title="'box' + index"> 这是一个div </div>

const vm = new Vue({

     el:'#app' // el 是固定的写法，表示当前vm实例要控制页面上 id="app" 的那个区域内的数据，接收的值是一个选择器。
     data:{

        index:0 //这是将上面的title的属性index变成一个变量可以用来赋值

    }

})

   4、事件绑定指令

         v-on : 简写 @ 事件绑定用来赋值，为DOM元素绑定监听事件如：

        @:click |  @:input  | @:keyup

         vue 在调用事件是提供了内置变量 $event 他是原生的DOM的事件对象

        事件修饰符：跟在事件后面使用            

.prevent : 阻止默认行为 例如：阻止 a 链接的跳转，阻止表单的提交等

.stop : 阻止事件冒泡

.capture : 以捕获模式触发当前的事件处理函数

.once : 绑定的事件触发1次

.self : 只有在event.target 是当前元素自身时触发事件处理函数

        键盘修饰符：

@:keyup.esc | enter 等可通过键盘来触发该事件

    5、v-model : 表单绑定指令实现数据双向绑定,快速获取表单数据  只能用于 input 、 textarea 、 select

        修饰符：

            .number : 自动将用户输入值转换成数值类型

            .trim : 自动过滤用户输入的首尾空白字符

            .lazy : 在change事件input时更新

    6、条件渲染指令

        v-if v-else | v-show : 用来控制DOM的显示与隐藏

        v-show : 隐藏是个标签元素添加display:none样式

        v-if ：每次动态创建或者移除元素，实现元素的显示和隐藏

    7、列表渲染指令 ： v-for

        v-for : 数组循环指令如

            <li v-for = "item in data" :key="item.id"> </li>

        key的注意事项：

            key只能是字符串或者数值，必须唯一性、建议v-for时一定要指定key的值。