Vue常用指令

Vue指令

指令：带有v-前缀的指令，代表vue提供的特殊属性。这些指令会在渲染的DOM上应用特殊的响应式行为。

vue常用指令：

• v-model 多用于表单元素实现双向数据绑定
• v-for 格式： v-for="（item,index) in/of 数组json" 循环数组或json
• v-show 显示内容 ,通过display=block/none来控制元素隐藏出现
• v-if 显示与隐藏 （dom元素的删除添加 同angular中的ng-if 默认值为false）
• v-else-if 必须和v-if连用
• v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误
• v-bind 动态绑定 作用： 及时对页面的数据进行更改

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 缩写形式 -->
<img :src="imageSrc">

<!-- class绑定 -->
<div :class=" { red: isRed } "></div>
<div :class="[classA, classB]"></div>

<!-- style绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="{ styleObjectA, styleObjectB }"></div>

• v-on:click 给标签绑定函数，可以缩写为@，例如绑定一个点击函数 函数必须写在methods里面

  • 事件修饰符：
  • .stop -调用event.stopPropagation()。
  • .prevent -调用event.preventDefault()。
  • .capture -添加事件监听器时使用capture模式。
  • .self -只当事件是从侦听器绑定的元素本身触发时才触发回调。
  • .native -监听组件根元素的原生事件。
  • .once -只触发一次回调。

• v-text 解析文本

• v-html 解析html标签

• v-bind:class 三种绑定方法 1、对象型 ‘{red:isred}’ 2、三元型 ‘isred?“red”:“blue”’ 3、数组型 ‘[{red:“isred”},{blue:“isblue”}]’

• v-once 进入页面时 只渲染一次 不在进行渲染

• v-cloak 防止闪烁 该属性需配合 样式使用：

<style>
[v-cloak]{display:none}
</style>

<div id="app" v-cloak>
    <div>
        {{message}}
    </div>
</div>
<script type="text/javascript">
    new Vue({
      el:'#app',
      data:{
        message:'hello world'
      }
    })
</script>

• v-pre 把标签内部的元素原位输出

<div id="app">
			<input type="text" name="" id="" value="" v-model="message" @keyup.enter="add"/>
			<ul>
				<li v-for="(item,index) in textArr">
					<span>{{ index+1 }}、{{ item }}</span>
					<span @click="remove(index)">x</span>
					</li>
			</ul>
			<p>{{ textArr.length }}条  笔记<span @click="clear">clear</span></p>
			<span></span>
</div>

var app = new Vue({
				el:"#app",
				data:{
					textArr:[],
				},
				methods:{
					add:function(){
						this.textArr.push(this.message)
					},
					remove:function(index){
						this.textArr.splice(index,1)
					},
					clear:function(){
						this.textArr.splice(0)
					}
				}
			})

• v-solt：提供具名插槽或需要接收prop的插槽。