vue的基本用法

使用前要引入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
}
})