vue指令

什么是指令：带有v-特殊字符，在节点上带有v-xxx的内容

一. v-bind

v-bind:value、v-bind
（简写 :value  :type :img）

  <input type="text" v-bind:value="inputValue">
   <input type="text" :value="inputValue">

二.v-on

v-on:click=''
(简写: @click='')


<template>
  <div>
      <button v-on:click="btnClick">这是一个按钮</button>
  </div>

 export default{
    data (){ //放入数据

    },
    methods:{ //放入方法
        btnClick(){
            alert(1);
        }
    }
}

三. data

  <template>
    <div>
      <h1>{{ str }}</h1>
      <h2 v-text="str"></h2>
      <h3 v-html="str" ></h3>
    </div>
  </template>


  <script>
    export default{
        data (){ //放入数据
            return {
                str:"<input type='text'>"
            }

        },
        methods:{ //放入方法

        }
    }
  </script>

四.v-text、v-html

	<h1 v-text="str"></h1> 
    <h1 v-html="str"></h1> (解析html标签)

五.v-model、v-once

v-model ： 数据双向绑定原理:发布者 -》订阅者模式
v-once： 数据改变不会更新

 <input type="text" v-model="str">
 <h1 v-once>{{ str }}</h1>

六、条件渲染：v-if、v-else

        <h1 v-if="str.length > 0 ">{{str}}</h1>
        <h1 v-else> 么有数据！ </h1>

七、列表渲染：v-for

	   <ul>
            <li v-for="(item,index) in str">
                {{index}}
                {{item}}
            </li>
  	   </ul>