首页
关于小站
朋友
壁纸
留言
时光之书
笔顺字帖
LayUI手册
Search
1
【PHP】PHPoffice/PHPSpreadsheet读取和写入Excel
1,673 阅读
2
【Layui】控制页面元素展示隐藏
1,520 阅读
3
【Git】No tracked branch configured for branch master or the branch doesn't exist.
1,460 阅读
4
【PHP】PHP实现JWT生成和验证
1,370 阅读
5
精准检测,助力社交管理 —— 微信好友检测服务来袭!
1,278 阅读
默认分类
PHP
ThinkPHP
Laravel
面向对象
设计模式
算法
基础
网络安全
Web
HTML
CSS
JavaScript
jQuery
Layui
VUE
uni-app
Database
MySQL
Redis
RabbitMQ
Nginx
Git
Linux
Soft Ware
Windows
网赚
Go
Docker
登录
Search
标签搜索
PHP
函数
方法
类
MySQL
ThinkPHP
JavaScript
OOP
Layui
Web
Server
Docker
Linux
PHPSpreadsheet
PHPoffice
Array
设计模式
Git
排序算法
基础
小破孩
累计撰写
244
篇文章
累计收到
13
条评论
首页
栏目
默认分类
PHP
ThinkPHP
Laravel
面向对象
设计模式
算法
基础
网络安全
Web
HTML
CSS
JavaScript
jQuery
Layui
VUE
uni-app
Database
MySQL
Redis
RabbitMQ
Nginx
Git
Linux
Soft Ware
Windows
网赚
Go
Docker
页面
关于小站
朋友
壁纸
留言
时光之书
笔顺字帖
LayUI手册
搜索到
1
篇与
的结果
2022-06-21
【Vue】Vue基础语法
简单例子 <div id="app"> {{ message }} </div> <script> var app = new Vue({ el: '#app', data: { message: '测试vue!' } }) </script> <div id="app"> <ul><li v-for="rs in todos"> {{rs.text}}</li></ul> </div> var app = new Vue({ el: '#app', data: { todos: [ { text: '学习 JavaScript' }, { text: '学习 Vue' }, { text: '整个牛项目' } ] } }) 模板语法 一次插值,后面不会改变 v-once 输出原始值 <span v-html:style="msg">你好</span> 输出属性 <span v-bind:style="msg">你好</span> if语句 <span v-if="msg">true看见我</span> <h1 v-if="msg=='ok'">是</h1> <h1 v-else-if="msg=='ok1'">是1</h1> <h1 v-else>否</h1> 管理重复数据 key="username-input" 监听事件 <a v-on:click="alert(1)">123</a> v-bind缩写 : v-on 缩写@ 数组方式调用class <div v-bind:class="[activeClass, errorClass]"></div> 绑定内联样式 <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> 显示隐藏 <h1 v-show="msg=='ok'">是</h1> 不支持<template>和else,是display显示隐藏 列表渲染 <li v-for="item in items"> {{ item.message }} </li> 带索引 <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li> 对象也支持三个参数 <div v-for="(value, key, index) in object"> {{ index }}. {{ key }}: {{ value }} </div> 唯一性 <div v-for="item in items" :key="item.id"> <!-- 内容 --> </div> 方法 <button v-on:click="fn">创建</button> var app = new Vue({ el: '#app', data: {msg:'ok1' } ,methods:{ 'fn':function(event){ alert("q"+this.msg) } } }) 事件修饰符 <!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form v-on:submit.prevent></form> <!-- 添加事件监听器时使用事件捕获模式 --> <!-- 即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理 --> <div v-on:click.capture="doThis">...</div> <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat">...</div> <!-- 点击事件将只会触发一次 --> <a v-on:click.once="doThis"></a> <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --> <!-- 而不会等待 `onScroll` 完成 --> <!-- 这其中包含 `event.preventDefault()` 的情况 --> <div v-on:scroll.passive="onScroll">...</div> <!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` --> <input v-on:keyup.13="submit"> .enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right 表单 <input v-model="message" placeholder="edit me"> <input type="checkbox" id="checkbox" v-model="checked"> <!-- 在“change”时而非“input”时更新 --> <input v-model.lazy="msg" > <input v-model.number="age" type="number"> <input v-model.trim="msg">
2022年06月21日
261 阅读
0 评论
0 点赞