1.v-text
<body>
<div id="app">
<h1 v-text="name"></h1>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
name:'小明'
}
})
</script>
2.v-html
<body>
<div id="app">
<div v-html="value"></div>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
value:'<h1>hello</h1>'
}
})
</script>
3.v-model
<body>
<div id="app">
<input type="text" v-model="name" />{{name}}
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
name:'小红'
}
})
</script>
4.v-bind
<body>
<div id="app">
<input type="button" v-bind:value="value" />
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
value:'提交'
}
})
</script>
5.v-if 和 v-show
<body>
<div id="app">
<h1 v-if="isshow">小明</h1>
<h1 v-show="isshow">小红</h1>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
isshow:true
}
})
</script>
区别：v-if 是真正的添加元素，v-show是元素的隐藏和显示
6.v-for
<body>
<div id="app">
<ul>
<li v-for="parson in parsons">{{parson.name}}</li>
</ul>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
parsons:[
{id:1,name:'小明'},
{id:2,name:'小红'},
{id:3,name:'小黑'}
]
}
})
</script>
7.v-on 或 @click
<body>
<div id="app">
<ul>
<li v-on:click="myclick()">按钮1</li>
<li @click="myclick()">按钮2</li>
</ul>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
},
methods:{
myclick:function(){
console.log("我被点击了")
}
}
})
</script>
