使用前要引入vue.js,或者使用vue-cli
1.for--循环渲染
html部分：
<ul id="app2">
<li v-for="item in songs">
<h4>{{item.title}}</h4>
</li>
</ul>
js部分
//创建vue对象--参数为一个选项对象
var vm=new Vue({
el:"#app2" , //挂载对象数据
data:{
songs:[{title:"歌曲一"},{title:"歌曲二"},{title:"歌曲三"}]
}
})
2.绑定指令:vue里面数据是双向绑定的
html部分:
<div id="app">
<h1>使用Mustache:{{msg}}</h1>
<h1 v-text="msg">jhtdfjg</h1>
<input type="text" v-model="msg" name="" id="" value="" />
<div v-html="msg"></div>
<div v-bind:id="idName">使用v-bind绑定属性值</div>
<div :id="idName">v-bind缩写:</div>
<input type="button" value="点击" v-on:click="getNum(666)"/>
<input type="button" value="再试试" @click="getNum"/> <!-- v-on:缩写@-->
<a href="http://www.baidu.com" @click.prevent.once="getNum(888)">阻止页面自动跳转 点击</a>
</div>
js部分
var vm=new Vue({
el:"#app",
data:{
msg:"<b>This is a message</b>",
idName:"myDiv"
},
methods:{
getNum(h){
console.log(h);
}
}
})
3.条件渲染指令
html部分：
<div id="app">
<h1 v-show="isShow"> v-show渲染元素</h1>
<h1 v-if="isShow">使用v-if渲染</h1>
<h1 v-else="isShow">使用v-else渲染</h1>
<h2 v-if="num < 5">num小于5</h2>
<h2 v-else-if="num < 10">num小于10</h2>
<h2 v-else="num >= 10">num大于10</h2>
</div>
js部分
var vm=new Vue({
el:"#app",
data:{
isShow:false,
num:50
}
})