前端路线--Vue（day02）
时间：2022-11-01 09:00:00
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>Documenttitle> <script src="js/vue.js">script> head> <body> <div id="app"> <h2>{
{msg}}h2> <button @click=/span>"changeMsg()" @mouseout="changeMsg2()">修改数据button> <button v-on="{click:changeMsg,mouseout:changeMsg2}">修改数据2button> <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>Documenttitle>
<script src="js/vue.js">script>
head>
<body>
<div id="app">
<input type="text" @keyup.enter="fn()" @keyup.esc="fn2()" v-model="msg">
<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>Documenttitle>
<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>Documenttitle>
<script src="js/vue.js">script>
head>
<body>
<div id="app">
<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>Documenttitle>
<script src="js/vue.js">script>
<style> .red {
color: red; } .bggreen {
background-color: green; } .bgyellow {
background-color: yellow; } style>
head>
<body>
<div id="app">
<h2 :class="['red','bggreen']">你好,spideman!h2>
<h2 :class="{red:true,bgyellow:1>0}">我是对象形式h2>
<h2 :class="['red',{bggreen:true}]">我是混合形式h2>
<h2 :class='["red",5>8?"bggreen":"bgyellow"]'>我可以用js代码形式哦h2>
<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>Documenttitle>
<script src="js/vue.js">script>
<style> .red {
color: red; } .bggreen {
background: green; } .bgyellow {
background: yellow; } style>
head>
<body>
<div id="app">
<h2 :style="{color:'red',fontSize:'50px'}">{
{msg}}h2>
<h2 :style="styleObj">我是data中对象形式h2>
<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>Documenttitle> <script src="js/vue.js">script> <style> .box { width: 100px; height: 100px; background-color: aqua; } style> head> <body> <div id="app"> <h2 v-if="flag">{ {msg}}h2> <div class="box" v-else>elsediv> <button @click="showHideBtn()">显示或者隐藏button> <h2>num的值是{ {num}}h2> <div v-if="num>80">优秀div> <div v-else-if="num>70">良好div> <div v-else>差劲div> 元器件数据手册、IC替代型号，打造电子元器件IC百科大全！
