01-v-on补充
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <h2>{
{msg}}</h2> <!-- 在一个元素上绑定多个事件 @事件名1="fn1" @事件名2="fn2" --> <button @click=/span>"changeMsg()" @mouseout="changeMsg2()">修改数据</button> <!-- v-on={事件名1:函数1,事件名2:函数2} --> <button v-on="{click:changeMsg,mouseout:changeMsg2}">修改数据2</button> <!-- 面试题: 在vuejs中能否给一个元素同时绑定多个事件，如果可以怎么绑定? --> <h1>我吃两口饭，马上回来！</h1> </div> </body> <script> new Vue({
el: "#app", data: {
msg: "好谷学堂" }, methods: {
changeMsg() {
// console.log(this); //指的时new 出来的Vue实例 this.msg = "好谷二哥" }, changeMsg2() {
// console.log(this); //指的时new 出来的Vue实例 this.msg = "好谷学堂" } } }) </script> </html> 02-按键修饰符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <!-- // keydown键盘按下 // keyup 键盘按下抬起 // keypress 按下字符键（a-z0-9） --> <!--常见的keycode: shift:16 ctrl:17 alt:18 回车:13 a:65 左:37 上:38 右:39 下:40 --> <!-- v-on:keyup.enter 等价 v-on:keyup.13 敲回车键 --> <input type="text" @keyup.enter="fn()" @keyup.esc="fn2()" v-model="msg"> <!-- v-on:keyup.enter.space 按空格或者回车键都能执行 --> <input type="text" v-on:keyup.enter.space="fn"> </div> </body> <script> new Vue({ el: "#app", data: { msg: "好谷学堂" }, methods: { fn() { console.log('fn执行了'); }, fn2() { console.log('按了esc键'); this.msg = ""; //按下esc之后清除input内容 } } }) </script> </html>
03-自定义按键修饰符别名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="msg" @keyup.exit="fn()">
</div>
</body>
<script> //查看vue中的方法 console.dir(Vue); //自定义按键别名(将a键起名exit) // 在Vue中可以通过config.keyCodes自定义按键修饰符别名 Vue.config.keyCodes.exit = 65; new Vue({
el: "#app", data: {
msg: "好谷" }, methods: {
fn() {
this.msg = "" } } }) </script>
</html>
04-v-bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-bind:属性="属性值" 绑定属性的 -->
<!-- 简写 :属性="属性值" -->
<!-- :src=imgsrc 给图片绑定属性 -->
<img :src="imgsrc" alt="">
</div>
</body>
<script> new Vue({
el: "#app", data: {
msg: "好谷学堂", imgsrc: "https://imgcps.jd.com/ling4/10031620944290/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6f7/6e5ea9f8/cr/s/q.jpg" } }) </script>
</html>
05-v-bind动态添加样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
<style> .red {
color: red; } .bggreen {
background-color: green; } .bgyellow {
background-color: yellow; } </style>
</head>
<body>
<!-- 绑定class样式 -->
<div id="app">
<!-- 1.数组形式 :class=[类名1,类名2,...] -->
<h2 :class="['red','bggreen']">你好,spideman!</h2>
<!-- 2.对象形式 :class="{类名1:布尔值1,类名2:布尔值2}" //布尔值为true时候 使用该样式类，否则不使用 -->
<h2 :class="{red:true,bgyellow:1>0}">我是对象形式</h2>
<!-- 3. 数组对象(混合形式) :class=["类名",{类名:布尔值}] -->
<h2 :class="['red',{bggreen:true}]">我是混合形式</h2>
<!-- 4.可以写js代码 :class='["red",5>8?"bggreen":"bgyellow"]' -->
<h2 :class='["red",5>8?"bggreen":"bgyellow"]'>我可以用js代码形式哦</h2>
<!-- 5. styleArr data中定义的数组，数组的每一项元素是定义好的类名 -->
<h2 :class="styleArr">我是下面定义的数组形式</h2>
<h2 :class="styleObj">我是下面定义的对象形式</h2>
</div>
</body>
<script> new Vue({
el: "#app", data: {
msg: "好谷学堂", styleArr: ["red", "bgyellow"], styleObj: {
red: true, bggreen: 1 > 0 } } }) </script>
</html>
06-v-bind绑定style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
<style> .red {
color: red; } .bggreen {
background: green; } .bgyellow {
background: yellow; } </style>
</head>
<body>
<!--绑定style样式-->
<div id="app">
<!-- 1.对象形式 -->
<h2 :style="{color:'red',fontSize:'50px'}">{
{msg}}</h2>
<!-- 2.data中对象形式 -->
<h2 :style="styleObj">我是data中对象形式</h2>
<!-- 3.data中数组对象形式 -->
<h2 :style="[styleObj,styleObj2]">我是数组对象形式</h2>
</div>
</body>
<script> new Vue({
el: "#app", data: {
msg: "好谷学堂", styleObj: {
color: 'yellow', background: 'pink' }, styleObj2: {
'font-size': '60px' } } }) </script>
</html>
07-v-if
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="js/vue.js"></script> <style> .box { width: 100px; height: 100px; background-color: aqua; } </style> </head> <body> <!-- v-if 可以控制元素的显示或者隐藏， 条件为true时渲染对应的DOM元素， 如果条件为false，那么不会渲染DOM元素 v-else 是配合v-if一起使用的，不能单独使用 v-if的条件为真时，v-else不执行 否则执行v-else --> <div id="app"> <h2 v-if="flag">{ {msg}}</h2> <div class="box" v-else>else</div> <button @click="showHideBtn()">显示或者隐藏</button> <!-- v-else-if --> <h2>num的值是{ {num}}</h2> <div v-if="num>80">优秀</div> <div v-else-if="num>70">良好</div> <div v-else>差劲</div> <!-- 数字的++或者--可以直接写在行内 --> 标签：彩显c20连接器