【Web - 框架 - Vue】随笔 - Vue的简单使用(02) - 快速上手
Vue模板代码
代码
<!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插值语法
代码
<!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属性绑定语法
代码
<!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事件绑定语法
代码
<!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事件参数
代码
<!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.innerHTMLthis.focus = c}}})
</script>
</body>
</html>
结果
Vue事件传参
代码
<!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事件传参的混合模式
代码
<!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显示与隐藏
代码
<!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’
代码
<!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’
代码
<!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’
代码
<!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’
代码
<!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>
