在前端项目中引入vue
1 下载vue.js https://download.csdn.net/download/qq_41887317/85322072
2 在项目中引入vue,注意src中路径,应该写自己项目中的路径
<script src="../js/vue.js"></script>
使用vue
1 v-text="变量名 可以让标签中文本内容,跟变量绑定在一起 。h1标签不起作用,显示文本
<body>
<p v-text="content"></p>
<script src="../js/vue.js"></script>
<script>
let v = new Vue({
el:"div",
data:{
content:"v-text显示内容<h1>李白</h1>"
}
})
</script>
</body>
2 {{变量名}} 插值,可以让此处的文本内容跟变量绑定在一起
<body>
<div>
{{content}}
</div>
<script src="../js/vue.js"></script>
<script>
let v = new Vue({
el:"div",
data:{
content:"差值,显示内容"
}
})
</script>
</body>
3 v-html="变量名" 可以让标签中文本内容,跟变量绑定在一起。h1标签起作用
<body>
<div>
<p v-html="content"></p>
</div>
<script src="../js/vue.js"></script>
<script>
let v = new Vue({
el:"div",
data:{
content:"v-html显示内容<h1>李白<h1>"
}
})
</script>
</body>
4 v-bind:属性名="变量名" 或者可省略 v-bind,直接用 :属性名="变量名"。属性值跟变量绑定
<body>
<div>
<input type="text" v-bind:value="inputvalue">
<a :href="url">京东</a>
</div>
<script src="../js/vue.js"></script>
<script>
let v = new Vue({
el:"div",
data:{
inputvalue:"属性绑定设置",
url:"http://www.jd.com",
}
})
</script>
5 v-model 双向绑定,from表单控件才有。当控件值(v-model value)变化,变量值也发生变化。反之变量值发生变化,控件值发生变化。
当在输入框输入内容,<h1>中内容也发生相应变化
<body>
<div>
<input type="text" v-model = "content" >
<h1>{{content}} </h1>
</div>
<script src="../js/vue.js"></script>
<script>
let v = new Vue({
data:{
content:"v-model双向绑定",
}
})
</script>
</body>
6 v-on:事件名="方法名"。事件绑定。也可用简写 @事件名="方法名"
<body>
<div>
<input type="button" value="button1" v-on:click="f1()">
<input type="button" value="button2" @:click="f()">
</div>
<script>
let v = new Vue({
el:"div",
methods:{
f1 (){
//方法1内容
},
f2(){
//方法2内容
}
}
})
</script>
</body>
7 v-for=(变量名 in 数组),遍历数组并且生成新标签
<body>
<div>
<table border="1">
<tr v-for="(para,i) in arr">
<td>{{i+1}}</td>
<td>{{para.name}}</td>
</tr>
</table>
</div>
<script>
let v = new Vue({
el:"div",
data:{
arr:[{name:"a"},
{name:"b"},
{name:"c"}]
}
})
</script>
8 v-if="变量名" ,变量=true时显示标签,false时删除标签
v-else 跟v-if结合使用,相当于if-else
v-show="变量名",变量=true,显示标签,false隐藏标签
<body>
<div>
<h1 v-if="isVisible">a</h1>
<h1 v-else>b</h1>
<h1 v-show="isVisible">c</h1>
</div>
<script>
let v = new Vue({
el:"div",
data:{
isVisible:false
}
})
</script>
</body>