honey_xi-CSDN博客

原创 Vue事件的处理

事件绑定<body> <div id="app">  <h1>点击次数：{{count}}</h1> <button type="button" @click="count+=1">点击</button> <!-- 获取事件对象 --&g...

2020-04-12 22:21:10 399

原创 Vue. 侦听器

侦听器：监听数据变化的事件（数据改变触发一些事情，用侦听器监听数据的改变）<body> <div id="app"> <h1>{{msg}}</h1> <ul> <li v-for="item in arr">{{item}}</li> </ul> </div&...

2020-04-12 20:44:44 209

原创 Vue. class与style

class与style的绑定<head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .active{ width: 200px; height: 200px; background-color: blue;...

2020-04-12 20:44:16 93

原创 video、audio标签

<video>标签<video>标签的属性autoplay自动播放支持格式：Ogg、MPEG4、WebM<source>（因为目前没有一种视频格式让所有浏览器都支持，该标签用于指定多个备用的不同格式的文件的路径）<video controls> <source src="视频文件地址" type="媒体文件类型/格式（video...

2020-04-09 21:12:46 237

原创课表

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>课表</title> <style type="text/css"> table{ height:730px;...

2020-04-02 14:35:10 180

原创表单验证（王传智）

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box{ width: 620px; height: 400px; border: ...

2020-04-02 14:30:22 148

原创 Vue计算属性

计算属性多次修改时，计算属性比一般情况性能高，最大的特点是会缓存计算结果，只要变量不改变，就不会进行重新计算<div id="app">  <h1>{{firstname+lastname}}</h1>  <h1>{{fullname}}</h1&...

2020-03-31 20:50:45 139

原创 Vue模板语法

模板语法一次性插入，不再修改：v-once<div id="app"> <h1>{{msg}}</h1> <h1 v-once>{{msg}}</h1></div> <script type="text/javascript"> var app = new Vue({ el:"#app", ...

2020-03-31 19:27:11 103

原创 vue列表渲染

列表渲染v-for：循环显示列表，只需一个li，即可循环渲染所有内容，所需显示的内容用数组存储，在视图部分采用模板变量显示<body> <div id="app"> <ul> <li v-for="item in students"> <h3>{{item.studentname}}</h3>...

2020-03-31 16:20:34 251

原创 CSS3动画

@keyframes规则创建动画@keyframes animationname{ keyframes-selector（关键帧选择器，为0%-100%，或者from和to）{css-style；}}例：@keyframes myfirst{from {background: red;}to {background: yellow;}}animation：run 2s fo...

2020-03-26 20:32:53 86

原创初识Vue

初始VueMVVM：M->Model：负责数据存储V->View：负责页面展示VM->View Model：负责业务逻辑处理，对数据进行加工后交给视图MVCM->model->模型->数据（js变量）V->View->视图->用户所见界面（HTML CSS）C->control->控制器->事件交互->如...

2020-03-26 15:46:08 67

原创过渡与变形的综合应用

实验过程中用到的选择器：E[att^=value]：先选E标记、再选id、再选以value为开头的所有标签:hover 把鼠标移入时的状态所有CSS伪类/元素选择器示例示例说明linka:link选择所有未访问链接:visiteda:visited选择所有访问过的链接:activea:active选择正在活动链接:hovera:hov...

2020-03-26 12:28:01 150

原创 h5语法标签整理

h5语法标签整理 <header>实例对主页的介绍：<header> <h1>Welcome to my homepage</h1> <p>My name is Donald Duck</p></header> <section> 实例文档中的区段，解释了...

2020-03-24 22:28:06 227

原创选择器

选择器通配符选择器：清除边距a标签：超链接类选择器：不能以数字开头属性选择器：E[att=value]、列p[id=one],先选p标记、再选id、再选以one为开头的所有标签。欧耶！！！E[att=value]、列p[id=value]、列p[id=value]、列p[id=one],先选p标记、再选id、再选以one为结尾的所有标签。欧耶！！！E[att*=value]、列p[i...

2020-03-24 22:17:23 151

原创 border-radius、transitions制作同心圆、三角形

border-radius、transitions制作同心圆、三角形**one：**同心圆：建一个正方形盒子，如此设置50%圆角时按照原盒子的长宽不至于成椭圆。用border-radius设置圆角为50%（这样才能形成正圆），设置边框粗细，小于盒子宽度则能形成同心圆。 **tow：**三角形：建一个长宽为0的盒子，设置边框的宽度和颜色，边框形成三角形<head> <...

2020-03-24 21:59:18 986

honey_xi的博客