摘要：
<style> * { margin: 0; padding: 0; } #mask { width: 700px; height: 300px; margin: 30px auto; text-align: center; } h1 { font-weight: 300; color: #1267 阅读全文
posted @ 2020-12-28 22:26
闭上耳朵
阅读(52)
评论(0)
推荐(0)
摘要：
<body> <div id="mask"> <button @click="getJoke">获取笑话</button> <p> {{ joke }} </p> </div> <script src="http://unpkg.com/axios/dist/axios.min.js"></scri 阅读全文
posted @ 2020-12-28 22:19
闭上耳朵
阅读(91)
评论(0)
推荐(0)
摘要：
<body> <button class="get">get请求</button><button class="post">post请求</button> <!-- 官网提供的 axios 在线地址 --> <script src="http://unpkg.com/axios/dist/axios 阅读全文
posted @ 2020-12-28 22:16
闭上耳朵
阅读(91)
评论(0)
推荐(0)
摘要：
<style> * { margin: 0; padding: 0; box-sizing: border-box; } #mask { width: 300px; height: 400px; background-color: rgb(238, 238, 238); text-align: ce 阅读全文
posted @ 2020-12-28 22:14
闭上耳朵
阅读(54)
评论(0)
推荐(0)
摘要：
<body> <div id="app"> <button @click="setM">我想说</button> <input type="text" v-model="message"> <h2> {{ message }} </h2> </div> <script src="https://cd 阅读全文
posted @ 2020-12-28 22:13
闭上耳朵
阅读(57)
评论(0)
推荐(0)
摘要：
<body> <div id="app"> <select name="abc" v-model="fruit"> <option value="榴莲">榴莲</option> <option value="荔枝">荔枝</option> <option value="龙眼">龙眼</option> 阅读全文
posted @ 2020-12-28 22:10
闭上耳朵
阅读(101)
评论(0)
推荐(0)
摘要：
<body> <div id="app"> <label for="agree"> <input type="checkbox" name="agree" id="agree" v-model="isAgree">同意协议： <button :disabled="!isAgree">下一步</but 阅读全文
posted @ 2020-12-28 22:06
闭上耳朵
阅读(98)
评论(0)
推荐(0)
摘要：
<body> <div id="app"> <!-- v-model结合input:radio单选框使用 不写name属性 也可以实现单选 --> <label for="male"> 男:<input type="radio" id="male" value="男" v-model="sex"> 阅读全文
posted @ 2020-12-28 22:05
闭上耳朵
阅读(90)
评论(0)
推荐(0)
摘要：
<body> <div id="app"> <button @click="doIt(f1,f2)">点击</button> <input type="text" @keyup.enter="sayHi"> </div> <script src="https://cdn.jsdelivr.net/n 阅读全文
posted @ 2020-12-28 22:03
闭上耳朵
阅读(67)
评论(0)
推荐(0)
摘要：
<body> <div id="app"> <ul> <li v-for="(i,index) in arr"> {{ (index+1) + " " + i }} </li> </ul> <ul> <!-- 遍历对象中 获取key value 格式(value,key) --> <li v-for 阅读全文
posted @ 2020-12-28 22:00
闭上耳朵
阅读(151)
评论(0)
推荐(0)
摘要：
<style> * { margin: 0; padding: 0; } #mask { position: relative; width: 300px; height: 626px; background-color: #ccc; margin: 30px auto; } img { width 阅读全文
posted @ 2020-12-28 21:57
闭上耳朵
阅读(56)
评论(0)
推荐(0)
摘要：
<style> img { width: 300px; } .active { border: 2px solid red; } </style> <body> <div id="app"> <img v-bind:src="imgsrc" alt=""> <img :src="imgsrc" :t 阅读全文
posted @ 2020-12-28 21:55
闭上耳朵
阅读(43)
评论(0)
推荐(0)
摘要：
<body> <div id="app"> <!-- 方法1 --> <h2 :style="{backgroundColor:'pink',fontWeight:'400'}"> {{ message }} </h2> <!-- 方法2 --> <h2 :style="changeStyle()" 阅读全文
posted @ 2020-12-28 21:52
闭上耳朵
阅读(67)
评论(0)
推荐(0)
摘要：
<style> .red { color: red; } </style> <body> <div id="app"> <ul> <li v-for="(i , index ) in list" @click="changeLi(index)" :class="{red:redIndex==inde 阅读全文
posted @ 2020-12-28 21:48
闭上耳朵
阅读(83)
评论(0)
推荐(0)
摘要：
<body> <div id="app"> <button @click="toggleIsShow">切换显示状态</button> <p v-if="isShow">我是一个段落 v-if</p> <p v-show="isShow">我是一个段落 v-show</p> <h2 v-if="te 阅读全文
posted @ 2020-12-28 21:43
闭上耳朵
阅读(98)
评论(0)
推荐(0)
摘要：
<body> <div id="app"> <div class="box"> <span v-if="isShow"> <label for="username">用户账户</label> <input type="text" placeholder="用户账户" id="username" ke 阅读全文
posted @ 2020-12-28 21:42
闭上耳朵
阅读(161)
评论(0)
推荐(0)
摘要：
<body> <div id="app"> <h2 v-if="true"> {{ message }} </h2> <h1 v-else> isShow为false时显示</h1> </div> <script src='https://cdn.jsdelivr.net/npm/vue@2.6.1 阅读全文
posted @ 2020-12-28 21:40
闭上耳朵
阅读(125)
评论(0)
推荐(0)
摘要：
<style> img { width: 200px; } </style> <body> <div id="app"> <button @click="changeisShow">切换显示状态</button> <button @click="addAge">累加年龄</button> <img 阅读全文
posted @ 2020-12-28 21:36
闭上耳朵
阅读(110)
评论(0)
推荐(0)
摘要：
<style> * { margin: 0; padding: 0; } #app { display: flex; width: 300px; height: 50px; background-color: #ccc; margin: 50px auto; border-radius: 7px; 阅读全文
posted @ 2020-12-28 21:35
闭上耳朵
阅读(63)
评论(0)
推荐(0)
摘要：
<body> <div id="app"> <input type="button" value="v-on指令" v-on:click="doit"> <input type="button" value="v-on简写" @click='doit'> <input type="button" v 阅读全文
posted @ 2020-12-28 21:33
闭上耳朵
阅读(71)
评论(0)
推荐(0)
摘要：
<body> <div id="app"> <div @click="divClick"> 123456789 <!-- 1 .stop修饰符的使用 阻止冒泡 --> <button @click.stop="btnClick">按钮</button> </div> <!-- 2 .prevent修 阅读全文
posted @ 2020-12-28 21:32
闭上耳朵
阅读(73)
评论(0)
推荐(0)
摘要：
<body> <div id="app"> <!-- 事件调用的方法没有参数 小括号可以省略 --> <button @click="btnClick()">导航1</button> <button @click="btnClick">导航2</button> <!-- 在事件定义时。写方法时省略小 阅读全文
posted @ 2020-12-28 21:31
闭上耳朵
阅读(108)
评论(0)
推荐(0)
摘要：
<body> <div id="app"> <!-- 修饰符 .lazy 回车或者失去光标的时候 h2标签里面的 message才会同步 --> <input type="text" v-model.lazy="message"> 请输入内容 <h2> {{ message }} </h2> <!- 阅读全文
posted @ 2020-12-28 21:27
闭上耳朵
阅读(76)
评论(0)
推荐(0)
摘要：
<body> <div id="app"> <button @click="add">+</button> <button @click="sub">-</button> <p> {{ num }} </p> </div> <script src='https://cdn.jsdelivr.net/ 阅读全文
posted @ 2020-12-28 21:25
闭上耳朵
阅读(63)
评论(0)
推荐(0)
摘要：
<body> <div id="app"> {{ message }} <h2> {{ school.name }} {{ school.mobile }} <!-- Vue拿到对象 在双括号里面取值和之前方式一样 在需要取的属性前面 加点 --> </h2> <ul> <li> {{campus[ 阅读全文
posted @ 2020-12-28 21:22
闭上耳朵
阅读(95)
评论(0)
推荐(0)
摘要：
<body> <div id="app"> {{ message }} <span> {{ message }} </span> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> <s 阅读全文
posted @ 2020-12-28 21:19
闭上耳朵
阅读(76)
评论(0)
推荐(0)
摘要：
<body> <div id="app"> <h1> {{ message }} </h1> <h2 v-pre> {{ message }} </h2> <!-- v-pre指令用的很少 使用这个指令的标签内容不会被解析 是什么内容就显示什么内容 {{ message }} --> </div> 阅读全文
posted @ 2020-12-28 21:18
闭上耳朵
阅读(126)
评论(0)
推荐(0)
摘要：
<body> <div id="app"> <h1> {{ message }}, 李银河 </h1> <h2 v-text="message">, 李银河</h2> <!-- v-text一般很少用到 没有mustache语法{{}} 灵活 在标签里写上v-text指令和其他文本后 这个指令里的内 阅读全文
posted @ 2020-12-28 21:15
闭上耳朵
阅读(162)
评论(0)
推荐(0)
摘要：
<body> <div id="app"> <h1> {{ message }} </h1> <h2 v-html="message"> </h2> </div> <script src='https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js'></ 阅读全文
posted @ 2020-12-28 21:13
闭上耳朵
阅读(78)
评论(0)
推荐(0)
摘要：
<body> <div id="app"> <h1> {{ message }} </h1> <h2 v-once> {{ message }} </h2> <!-- 在标签内部使用 v-once 指令 在后台调试的时候 改不了值 首次渲染后，不再随着数据的改变而重新渲染。 没有加v-once指令的 阅读全文
posted @ 2020-12-28 19:07
闭上耳朵
阅读(72)
评论(0)
推荐(0)
摘要：
<body> <div id="app"> {{ message }} </div> 引入vue官方文档 </script> <!-- 1.首先导入开发版本的Vue.js --> <script> // 2.创建Vue实例对象，设置el属性 和data属性 // 建议使用let关键字和 const关 阅读全文
posted @ 2020-12-28 19:06
闭上耳朵
阅读(56)
评论(0)
推荐(0)
摘要：
<body> <div id="app"> <h1> {{ message }} </h1> <p> {{ firstName + " " + lastName}} </p> <h2> {{ counter * 2 }} </h2> </div> 引入Vue官方文档 // mustache语法就是 阅读全文
posted @ 2020-12-28 19:01
闭上耳朵
阅读(104)
评论(0)
推荐(0)
浙公网安备 33010602011771号