
web前端技术
雷玉广
四二学堂教学总监。
展开
-
【四二学堂】基于uni-app开发的跨平台井字游戏(App+H5 web+微信小程序)
开发环境:Hbuilder X+Chrome+微信小程序APP+微信小程序+H5 web 显示效果见下图:主要代码:<template> <view @tap="d"> <span>{{title}}</span> <canvas id="id1" canvas-id="firstCanvas" @tap="a">&l...原创 2020-04-04 20:22:56 · 1896 阅读 · 0 评论 -
【四二学堂】单文件组件(vue系列入门示例之二十九)
开发环境:HbuilderX安装以下内容:cmd,vue ui 设定 test ,npm,default.拖动创建在文件到Hbuilder X中App.vue<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld ...原创 2020-03-24 09:57:50 · 177 阅读 · 0 评论 -
【四二学堂】局部组件(Vue.component:vue系列入门示例之二十八)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>局部组件</title> <script src="vue.js" type="text/javascript" charset="UTF-8"></script> &...原创 2020-03-24 09:11:17 · 170 阅读 · 0 评论 -
【四二学堂】组件事件二(Vue.component:vue系列入门示例之二十七)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>组件属性</title> <script src="vue.js" type="text/javascript" charset="UTF-8"></script> &...原创 2020-03-24 09:01:13 · 179 阅读 · 0 评论 -
【四二学堂】组件事件(Vue.component:vue系列入门示例之二十六)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>组件属性</title> <script src="vue.js" type="text/javascript" charset="UTF-8"></script> &...原创 2020-03-24 08:49:12 · 204 阅读 · 0 评论 -
【四二学堂】组件属性(Vue.component:vue系列入门示例之二十五)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>组件属性</title> <script src="vue.js" type="text/javascript" charset="UTF-8"></script> &...原创 2020-03-24 08:45:21 · 133 阅读 · 0 评论 -
【四二学堂】组件基础(Vue.component:vue系列入门示例之二十四)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="vue.js" type="text/javascript" charset="UTF-8"></script> </...原创 2020-03-24 08:37:27 · 135 阅读 · 0 评论 -
【四二学堂】表单提交(v-model:vue系列入门示例之二十三)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>表单输入绑定三---默认值的设定</title> <script src="vue.js" type="text/javascript" charset="UTF-8"></s...原创 2020-03-24 08:25:40 · 176 阅读 · 0 评论 -
【四二学堂】输入表单绑定之三-默认值的设定(v-model:vue系列入门示例之二十二)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>表单输入绑定三---默认值的设定</title> <script src="vue.js" type="text/javascript" charset="UTF-8"></s...原创 2020-03-24 08:15:30 · 2444 阅读 · 0 评论 -
【四二学堂】表单输入绑定二(v-model:vue系列入门示例之二十一)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>表单输入绑定</title> <script src="vue.js" type="text/javascript" charset="UTF-8"></script>...原创 2020-03-24 08:10:00 · 137 阅读 · 0 评论 -
【四二学堂】表单输入绑定(v-model:vue系列入门示例之二十)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>表单输入绑定</title> <script src="vue.js" type="text/javascript" charset="UTF-8"></script>...原创 2020-03-24 07:53:20 · 122 阅读 · 0 评论 -
【四二学堂】事件绑定二(v-on:vue系列入门示例之十九)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="vue.js" type="text/javascript" charset="UTF-8"></script> </...原创 2020-03-23 20:07:28 · 123 阅读 · 0 评论 -
【四二学堂】事件绑定(v-on:vue系列入门示例之十八)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="vue.js" type="text/javascript" charset="UTF-8"></script> </...原创 2020-03-23 20:00:06 · 120 阅读 · 0 评论 -
【四二学堂】列表渲染三(v-for:vue系列入门示例之十七)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>v-for</title> <script src="vue.js" type="text/javascript" charset="UTF-8"></script> ...原创 2020-03-23 19:52:30 · 111 阅读 · 0 评论 -
【四二学堂】列表渲染二(v-for:vue系列入门示例之十六)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>v-for</title> <script src="vue.js" type="text/javascript" charset="UTF-8"></script> ...原创 2020-03-23 19:47:55 · 117 阅读 · 0 评论 -
【四二学堂】列表渲染一(v-for:vue系列入门示例之十五)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>v-for</title> <script src="vue.js" type="text/javascript" charset="UTF-8"></script> ...原创 2020-03-23 19:40:08 · 120 阅读 · 0 评论 -
【四二学堂】条件渲染二(v-show:vue系列入门示例之十四)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>v-show</title> <script src="vue.js" type="text/javascript" charset="UTF-8"></script>...原创 2020-03-23 18:09:23 · 137 阅读 · 0 评论 -
【四二学堂】条件渲染(vue系列入门示例之十三)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="vue.js" type="text/javascript" charset="UTF-8"></script> </...原创 2020-03-23 18:01:25 · 99 阅读 · 0 评论 -
【四二学堂】class与style绑定(vue系列入门示例之十二)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="vue.js" type="text/javascript" charset="UTF-8"></script> </...原创 2020-03-23 17:43:07 · 159 阅读 · 0 评论 -
【四二学堂】缩写(v-on缩写:vue系列入门示例之十一)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>指令-参数的使用</title> <script src="vue.js" type="text/javascript" charset="UTF-8"></script&...原创 2020-03-23 15:45:41 · 184 阅读 · 0 评论 -
【四二学堂】模板语法-指令(参数的使用:vue系列入门示例之十)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>指令-参数的使用</title> <script src="vue.js" type="text/javascript" charset="UTF-8"></script>...原创 2020-03-23 15:27:14 · 117 阅读 · 0 评论 -
【四二学堂】模板语法-指令(v-if:vue系列入门示例之九)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>模板语法-指令</title> <script src="vue.js" type="text/javascript" charset="UTF-8"></script>...原创 2020-03-23 15:19:47 · 122 阅读 · 0 评论 -
【四二学堂】模板语法之四(使用 JavaScript 表达式:vue系列入门示例之八)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>js表达式</title> <script src="vue.js" type="text/javascript" charset="UTF-8"></script> ...原创 2020-03-23 15:08:49 · 136 阅读 · 0 评论 -
【四二学堂】模板语法之三(v-bind:vue系列入门示例之七)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>v-bind</title> <script src="vue.js" type="text/javascript" charset="UTF-8"></script>...原创 2020-03-23 14:51:15 · 154 阅读 · 0 评论 -
【四二学堂】模板语法之二(v-html:vue系列入门示例之六)
<!DOCTYPE html><html><head><meta charset="utf-8"><title>vue的模板语法(v-html)</title><script src="vue.js" type="text/javascript" charset="utf-8"></script&g...原创 2020-03-23 14:37:03 · 197 阅读 · 0 评论 -
【四二学堂】模板语法之一(文本:vue系列入门示例之五)
<!DOCTYPE html><html><head><meta charset="utf-8"><title>vue的模板语法(文本)</title><script src="vue.js" type="text/javascript" charset="utf-8"></script>&...原创 2020-03-23 14:30:59 · 102 阅读 · 0 评论 -
【四二学堂】vue生命周期;(vue系列入门示例之四)
<!DOCTYPE html><html><head><meta charset="utf-8"><title>vue的生命周期</title><script src="vue.js" type="text/javascript" charset="utf-8"></script></...原创 2020-03-23 14:11:43 · 144 阅读 · 0 评论 -
【四二学堂】vue数据与方法二(vue系列入门示例之三)
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script src="vue.js" type="text/javascript" charset="utf-8"></script></head>...原创 2020-03-23 13:42:33 · 93 阅读 · 0 评论 -
【四二学堂】vue数据与方法一(vue系列入门示例之二)
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script src="vue.js" type="text/javascript" charset="utf-8"></script></head>...原创 2020-03-23 11:25:40 · 92 阅读 · 0 评论 -
【四二学堂】hello vue(vue系列入门示例之一)
vue开发版本下载地址:https://cn.vuejs.org/v2/guide/installation.html开发工具 Hbuilder X<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script ...原创 2020-03-23 11:16:54 · 110 阅读 · 0 评论 -
【汇智学堂】H5手机游戏-井字游戏(游戏开发系列微课之二)
微课网址:https://ke.qq.com/course/1583436<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>井字游戏-输赢判断</title> <style> body{ back...原创 2020-03-11 20:08:17 · 294 阅读 · 0 评论 -
【四二学堂】H5手机游戏-梅花易数一撮金(游戏开发系列微课之一)
微课网址:https://ke.qq.com/course/1583555<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-s...原创 2020-03-11 20:57:21 · 2007 阅读 · 0 评论 -
【汇智学堂】js/jQuery使用事件之六
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>使用jQuery手工触发事件</title> <script src="http://code.jquery.com/jquery-latest.min.js...原创 2020-02-20 17:17:51 · 163 阅读 · 0 评论 -
【汇智学堂】js/jQuery使用事件之五
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>使用js手工触发事件</title> <link rel="stylesheet" type="text/css" href="css/css5.css"&g...原创 2020-02-20 17:15:16 · 273 阅读 · 0 评论 -
【汇智学堂】js/jQuery使用事件之四
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>使用jQuery添加事件处理程序</title> <link rel="stylesheet" type="text/css" href="css/css4...原创 2020-02-20 17:12:18 · 147 阅读 · 0 评论 -
【汇智学堂】js/jQuery使用事件之三
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Hour 9-1</title> <link rel="stylesheet" type="text/css" href="css/css3.css">...原创 2020-02-20 17:10:28 · 167 阅读 · 0 评论 -
【汇智学堂】js/jQuery使用事件之二
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="http://code.jquery.com/jquery-latest.min.js"><...原创 2020-02-20 17:08:55 · 189 阅读 · 0 评论 -
【汇智学堂】js/jQuery使用事件之一
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!--<script type="text/javascript" src="js/js1.js"></sc...原创 2020-02-20 17:05:48 · 190 阅读 · 0 评论 -
【汇智学堂】CSS应用之四
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="css/css4.css">...原创 2020-02-20 17:01:56 · 206 阅读 · 0 评论 -
【汇智学堂】CSS应用之三
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="css/css3.css">...原创 2020-02-20 17:00:12 · 171 阅读 · 0 评论