【Web - 框架 - Vue】随笔 - Vue的简单使用(02) - 快速上手
Vue模板代码
代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue模板</title>
</head>
<body>
<div id="box"></div>
<script src="vue.js"></script>
<script>
new Vue({
el: "#box",
data: {},
methods: {}
})
</script>
</body>
</html>Vue插值语法
代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue插值语法</title>
</head>
<body>
<div id="box">
<p>name:{{name}}</p>
<p>gender:{{gender}}</p>
<p>9*9:{{9*9}}</p>
</div>
<hr>
<div id="box_1">
<p>name:{{name}}</p>
<p>gender:{{gender}}</p>
<p>9*9:{{9*9}}</p>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: "#box",
data: {
name: 'SUNxRUN',
gender: 'man'
},
})
</script>
</body>
</html>结果
Vue属性绑定语法
代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue属性绑定语法</title>
</head>
<body>
<div id="box">
<a :href="href">11</a>
<a v-bind:href="href">22</a>
<a href="9*9">33</a>
<a :href="9*9">44</a>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: "#box",
data: {
href: "https://www.baidu.com/"
},
methods: {}
})
</script>
</body>
</html>结果
Vue事件绑定语法
代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue模板</title>
</head>
<body>
<div id="box">
<button v-on:click="show">点我-01</button>
<button @click="talk">点我-02</button>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: "#box",
data: {},
methods: {
show() {
alert('啊啊啊啊')
},
talk: function () {
alert('呀呀呀呀')
}
}
})
</script>
</body>
</html>结果
Vue事件参数
代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue事件参数</title>
</head>
<body>
<div id="box">
<button @click="choose">衣</button>
<button @click="choose">食</button>
<button @click="choose">住</button>
<button @click="choose">行</button>
<h3>以上选项哪个最重要：{{focus}}</h3>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: "#box",
data: {
focus: '??'
},
methods: {
choose(e) {
var c = e.target.innerHTML
this.focus = c
}
}
})
</script>
</body>
</html>结果
Vue事件传参
代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue事件传参</title>
</head>
<body>
<div id="box">
<button @click="add(10,20)">add</button>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: "#box",
methods: {
add(x, y) {
alert(x + y)
}
}
})
</script>
</body>
</html>结果
Vue事件传参的混合模式
代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue事件传参的混合模式</title>
</head>
<body>
<div id="box">
<button data-x="10" @click="add(20,$event)">add</button>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: "#box",
methods: {
add(y, e) {
alert(y - -e.target.dataset.x)
}
}
})
</script>
</body>
</html>结果
Vue显示与隐藏
代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue显示与隐藏</title>
</head>
<body>
<div id="box">
<button @click="x = true">显示</button>
<button @click="x = false">隐藏</button>
<p>x:{{x}}</p>
<h1 v-show="x">Hello Vue!</h1>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: "#box",
data: {
x: false
},
methods: {}
})
</script>
</body>
</html>结果
Vue'v-html'和'v-text'
代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue'html'与'text'</title>
</head>
<body>
<div id="box">
<div v-html="msg"></div>
<div v-text="msg"></div>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: "#box",
data: {
msg: '<h1>Hello Vue!</h1>'
},
methods: {}
})
</script>
</body>
</html>结果
Vue'v-once'
代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue'v-once'</title>
</head>
<body>
<div id="box">
<button @click="num++">+1</button>
<p>num:{{num}}</p>
<p v-once>num:{{num}}</p>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: "#box",
data: {
num: 10
},
methods: {}
})
</script>
</body>
</html>结果
Vue'v-if'
代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue'v-if'</title>
</head>
<body>
<div id="box">
<p v-if="true">Hello</p>
<p v-if="false">World!</p>
<p v-show="false">Vue!</p>
<hr>
<button @click="num++">{{num}}</button>
<p v-if="num % 2 == 1">奇数</p>
<p v-else>偶数</p>
<hr>
<h4>打分:{{score}}</h4>
<button @click="score += 10">+10</button>
<p v-if="score < 60">删掉</p>
<p v-else-if="score < 80">良好</p>
<p v-else-if="score < 100">优秀</p>
<p v-else>超限</p>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: "#box",
data: {
num: 1,
score: 0
},
methods: {}
})
</script>
</body>
</html>结果
Vue'v-for'
代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue'v-for'</title>
</head>
<body>
<div id="box">
<button v-for="n in names">{{n}}</button>
<hr>
<li v-for="s of skills">{{s}}</li>
<hr>
<a v-for="w in webs" :href="w.href">{{w.title}}<br></a>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: "#box",
data: {
names: ['关羽', '张飞', '刘备'],
skills: ['html', 'css', 'javascript'],
webs: [
{title: '百度', href: 'https://www.baidu.com/'},
{title: '斗鱼', href: 'https://www.douyu.com/'},
]
},
methods: {}
})
</script>
</body>
</html>