vue指令（vue）

1. v-el: 页面上已存在的 DOM元素作为 Vue实例的挂载目标.(css选择器/html元素)
2. v-model: 双向绑定，主要用于input ,(=== :value="" @input="")

/*template*/
<input v-model="inputValue"/>
<input :value="inputValue" @input="handleInput"/>
/*script*/
data() {
	return{
		inputValue: ''
	}
},
methods: {
	handleInput() { // 默认传了一个event
	}
}

3. v-text 添加内容
4. v-html 添加标签

/*template*/
<div v-text="input"></div>
<div v-html="inputContent"></div>
/*<script>*/
data () {
    return {
      input: '123',
      inputContent: `<div><a href="#">456</a></div>`
    };
  },

效果图：

5. v-show (css的display:none；控制隐藏)，应用于频繁地切换
6. v-if(频繁删除dom元素，耗性能)，应用于运行时条件很少改变

/*template*/
<div class="box" v-show="isShow"></div>
 <div class="box" v-if="isShow"></div>
 <button @click="isShow = !isShow">显示和隐藏</button>
 /*<script>*/
data () {
    return {
   		 isShow: false
    };
  },

v-show效果图：

v-if效果图


7.v-bind(:)绑定属性
8.v-on(@)绑定事件
9.v-for列表循环，必须有key（key的作用：为了高效的更新虚拟DOM）v-for比v-if等级高，所以不能放在同一个标签里，可以在外层包裹一层

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