指令
vue中常用v-指令演示
Demo演示
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue02</title>
<style type="text/css">
.box{
width: 300px;
height: 300px;
background-color: red
}
.active{
background-color: green;
}
</style>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
//创建实例化对象
//双大括号插值
//v-text innerText
//v-html innerHTML
//v-if
//数据属性对应的值，如果为假，则不再页面中渲染，反之亦然 appendChild() removeChild()
//v-show 控制dom元素的显示隐藏 display:none | block;
//v-on :原生事件名 = ‘函数名’ 简便写法 @
//控制类名对原素显示隐藏 display:none | block
//v-bind绑定标签上的属性 （内置的属性和自定义的属性） 简写 ：
//v-for = "(item,index) in menuLists"
/*
v-if是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件
适当地被销毁和重建。
v-if也是惰性的:如果在初始渲染时条件为假,则什么也不做一直到条件第一 次变为真
时,才会开始渲染条件块。
相比之下, V- show
就简单得多一不管初始条件是什么 ,元素总是会被渲染,并且只是简单地基于CSS
进行切换。
-般来说，v-if有更高的切换开销,而v-show
有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用v-show
较好;如果在运行时条件很少改变,则使用v-if较好。
*/
var vm = new Vue({
el:"#app",
data:function(){
return{
msg:'指令系统',
msg2:'<h2>指令系统2</h2>',
isShow:true,
isGreen:false,
text:'乔治大哥',
menuLists:[
{id:1,name:'乔治',price:2400},
{id:2,name:'科比',price:3400},
{id:3,name:'詹姆斯',price:1400},
],
person:{
name:'george',
age:23,
fav:'篮球'
}
}
},
template:`
<div class='app'>
<h2>{{msg}}</h2>
<p v-text='msg'></p>
<div v-html='msg2'></div>
<div v-text='1+1'></div>
<div v-if='isShow'>科比出场</div>
<div v-if='!isShow'>曼巴out</div>
<div v-if="Math.random() > 0.5">
已显示
</div>
<div v-else>
已隐藏
</div>
<div v-show='isShow'>
显示
</div>
<div v-show='!isShow'>
隐藏
</div>
<div class='box' v-on:click='clickHandler' v-bind:class='{active:isGreen}' :aaa='text'>
</div>
<<img src="" alt="">
<a href="" title=''></a>
<ul>
<li v-for='item in menuLists'>
<h5 v-text="item.id"></h5>
<h3>{{item.name}}</h3>
<em>{{item.price}}</em>
</li>
</ul>
<ul>
<li v-for = "(value,key) in person">
{{key}} = {{value}}
</li>
</ul>
</div>
`,
methods:{
//点击切换颜色
clickHandler(e){
console.log(this);
this.isGreen = !this.isGreen;
}
}
});
console.log(vm)
</script>
</body>
</html>页面展示：
双向绑定
Demo演示
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue的双向数据绑定</title>
</head>
<body>
<!-- v-model双向数据绑定 -->
<div id="app">
<!-- <input type="text" :value='msg'> -->
<input type="text" v-model='msg'>
<h3>{{msg}}</h3>
</div>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el:"#app",
data(){
return{
msg:"大梦"
}
}
});
</script>
</body>
</html>
结果展示
即：- v-mode1双向数据绑定的体现只会体现在UI控件中 只能应用在有value属性的
Demo
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue的双向数据绑定</title>
</head>
<body>
<!-- v-model双向数据绑定 -->
<!-- 语法糖： 甜甜的，它是v-bind:value 和 v-on:input 的体现 -->
<div id="app">
<!-- <input type="text" :value='msg'> -->
<!-- <input type="text" v-model='msg'> -->
<input type="text" v-bind:value='msg' v-on:input='valueChange'>
<h3>{{msg}}</h3>
</div>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el:"#app",
data(){
return{
msg:"大梦"
}
},
methods:{
valueChange(e){
console.log(e.target.value);
this.msg=e.target.value;
}
}
});
</script>
</body>
</html>其内部的流程为：
