引入Vue.js文件：
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input v-model="username">
{ { username}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
//创建核心对象
new Vue({
el:"#app",
data(){
return{
username:""
}
}
})
</script>
</body>
</html>
1.v-if 和 v-model
案例：
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-if="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div v-if="count==1">div1</div>
<div v-else-if="count==2">div2</div>
<div v-else="count==3">div3</div>
<div v-show="count==3">div4</div>
<input v-model="count">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<!--<div id="app">{ { msg}}</div>-->
<script>
//创建核心对象
new Vue({
el:"#app",
data() {
return {
count:5
}
}
})
</script>
</body>
</html>
2.v-bind
案例：
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- <input v-model="username">
{ { username}}-->
<!--绑定属性值-->
<a v-bind:href="url">点击</a>
<!--v-bind可以省略-->
<a :href="url">点击</a>
<!--创建双向数据绑定-->
<input v-model="url" name="url">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<!--<div id="app">{ { msg}}</div>-->
<script>
//创建核心对象
new Vue({
el:"#app",
data(){
return{
username:"",
url:"https://www.baidu.com"
}
}
})
</script>
</body>
</html>
3.v-on
案例：
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--方式一-->
<input type="button" value="按钮" v-on:click="show()">
<!-- 方式二-->
<input type="button" value="按钮" @click="show()">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<!--<div id="app">{ { msg}}</div>-->
<script>
//创建核心对象
new Vue({
el:"#app",
data() {
return {
}
},
methods:{
show(){
alert("被点击了");
}
}
})
</script>
</body>
</html>
4.v-for
案例：
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-if="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div v-for="addr in addrs">
{ { addr}}<br>
</div>
<hr>
<!--加序号-->
<div v-for="(addr,i) in addrs">
{ { i+1}}.{ { addr}}<br>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<!--<div id="app">{ { msg}}</div>-->
<script>
//创建核心对象
new Vue({
el:"#app",
data() {
return {
addrs:["小马哥","小飞侠","罗西","马奎斯"]
}
}
})
</script>
</body>
</html>
1.mounted
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-if="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<!--<div id="app">{ { msg}}</div>-->
<script>
//创建核心对象
new Vue({
el:"#app",
mounted(){
alert("加载完成!")
}
})
</script>
</body>
</html>
本文为互联网自动采集或经作者授权后发布，本文观点不代表立场，若侵权下架请联系我们删帖处理！文章出自：https://blog.csdn.net/qq_43514330/article/details/125399135