Vuejs
苦涩2020
这个作者很懒,什么都没留下…
展开
-
Vuejs 组件
组件的基本使用 2.0版本以前<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vuejs</title> <script src="js/vue.js"></script></head><body><div id='app'> <!-- 3.原创 2020-09-12 23:53:47 · 228 阅读 · 0 评论 -
Vuejs 过滤器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vuejs</title> <script src="js/vue.js"></script></head><body><div id="app"> <p>{{ 7000 | guoLv}原创 2020-08-31 04:07:34 · 195 阅读 · 0 评论 -
Vuejs 条件判断
v-if 使用<div id='app'> <h2 v-if="true"> {{message}} <div>aaa</div> <div>bbb</div> </h2></div><script> const app = new Vue({ el: '#app', data: { message: 'hello', .原创 2020-08-30 19:56:06 · 311 阅读 · 0 评论 -
Vuejs 事件监听
在前端开发中,我们需要经常和用户交互,这个时候,我们就必须监听用户发生的事件,比如点击、拖拽、键盘事件等等v-on 基础<div id='app'> <h2>{{counter}}</h2> <button v-on:click="add">+</button> <!-- v-on语法糖写法 @ --> <button @click="sub">-</button></div>原创 2020-08-30 19:30:47 · 336 阅读 · 0 评论 -
Vuejs 计算属性
基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vuejs</title> <script src="js/vue.js"></script></head><body><div id='app'> <h2>{{firstName.原创 2020-08-30 09:57:11 · 257 阅读 · 0 评论 -
Vuejs 动态绑定属性
v-bind 基础用法<div id='app'> <!-- 错误做法,mustache只能用在content中 --> <img src="{{imgURL}}"> <img src="imgURL"> <!-- 正确做法,使用v-bind指令 --> <img v-bind:src="imgURL"> <!-- 语法糖:简写 --> <img :src="imgURL".原创 2020-08-30 00:02:02 · 386 阅读 · 0 评论 -
Vuejs 插值操作
mustache语法<div id='app'> <h2>{{message}}</h2> <h2>{{message}}, 苦涩!</h2> <!-- mustache语法中,不仅仅可以直接写变量,也可以写简单的表达式 --> <h2>{{firstName + ' ' + lastName}}</h2> <h2>{{firstName}} {{lastName}}&l.原创 2020-08-29 16:23:13 · 156 阅读 · 0 评论 -
Vuejs 初体验
Hello Vuejs<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vuejs</title> <script src="js/vue.js"></script></head><body> <div id="app">{{message}} .原创 2020-08-29 09:46:05 · 85 阅读 · 0 评论