v-cloak=‘’
加在标签中能够解决插值表达式闪烁的问题
v-text=‘’
会覆盖元素中原本的内容
但是 插值表达式只会替换自己的这个占位符， 不会把整个元素的内容清空
v-html=‘’
可以把内容当作html渲染出来
事件绑定机制
v-bind:
属性绑定机制 缩写是:
是vue中，提供的用于绑定属性的指令
(v-bind指令可以被简写为：:也等同于v-bind 所以在实际操作中是可以用:绑定属性的) v-bind后面是可以写合法表达式的
v-on:
事件绑定机制 缩写是@ 它是来绑定事件监听器,这样我们就可以做一些交互了.
v-model:
双向数据绑定
元素必须有value值, DOM元素的value 与js内存变量的属性进行绑定
class结合v-bind使用
v-for:
当需要将一个数组遍历或枚举一个对象循环显示时候，我常用的就是列表渲染指令v-for. 它需要结合着in 或者of来使用
v-for的使用：
v-for=“xxxx in items” :key=“index”
总结
数组v-for="(ele,index) in dataArr " :key=“index”
对象v-for="(value,key,index) in dataObj" :key=“index”
v-if:
插入或者移除元素(true,插入,false移除)
v-show:
隐藏或者显示元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>day2 v-cloak的学习</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<p v-cloak>====={{ msg }}</p>
<h4 v-text="msg">----</h4>
<p v-html='msg2'></p>
<input type="button" value="按钮" v-bind:title="mytitle + '小叶子'" v-on:click="show">
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
msg: '小叶子',
msg2: '<h1>我是h1</h1>',
mytitle: '这是自己定义的title'
},
methods:{
show: function(){
alert('hello小叶子')
}
}
})
</script>
</body>
</html>
网友评论