随笔分类 - CSS3
摘要：小程序开发公众平台地址链接：https://developers.weixin.qq.com/miniprogram/introduction/index.html?t=19042217 环境配置 全局配置 对应文件：app.json 注册 pages window tabBar networkTi
阅读全文
摘要：Vue.js 路由 Vue.js 路由允许我们通过不同的 URL 访问不同的内容。 通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。 Vue.js 路由需要载入 vue-router 库 中文文档地址：vue-router文档。
阅读全文
摘要：Vue.js 自定义指令 除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。 下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点： <div id="app"> <p>页面载入时，input 元素自动获取焦点：</p>
阅读全文
摘要：Vue.js 表单 你可以用 v-model 指令在表单控件元素上创建双向数据绑定。 v-model 会根据控件类型自动选取正确的方法来更新元素。 <body> <div id="app"> <p>input 元素：</p> <input v-model="message" placeholder=
阅读全文
摘要：Vue.js 组件 组件（Component）是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素，封装可重用的代码。 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树： 注册一个全局组件语法格式如下： Vue.component(t
阅读全文
摘要：Vue.js 事件处理器 事件监听可以使用 v-on 指令： <div id="app"> <button v-on:click="counter += 1">增加 1</button> <p>这个按钮被点击了 {{ counter }} 次。</p> </div> <script> new Vue
阅读全文
摘要：Vue.js 样式绑定 Vue.js class class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。 Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数
阅读全文
摘要：Vue.js 计算属性 计算属性关键词: computed。 计算属性在处理一些复杂逻辑时是很有用的。 可以看下以下反转字符串的例子： <div id="app"> {{ message.split('').reverse().join('') }} </div> <script> new Vue(
阅读全文
摘要：循环语句 循环使用 v-for 指令。 v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。 v-for 可以绑定数据到数组来渲染一个列表： <div id="app"> <ol> <li v-for="site in
阅读全文
摘要：Vue.js 条件语句 条件判断 v-if <div id="app"> <p v-if="seen">seen为true时显示，false隐藏</p> <template v-if="ok"> ok为true时显示，false隐藏 </template> </div> <script> new V
阅读全文
摘要：Vue.js 目录结构 目录解析 build:最终发布的代码存放位置。 config:配置目录，包括端口号等。我们初学可以使用默认的。 node_modules:npm 加载的项目依赖模块 src:这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件： assets 文件
阅读全文
摘要：Vue.js 安装 1、独立版本 我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。 http://vuejs.org/js/vue.min.js 2、使用 CDN 方法 以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载
阅读全文
摘要：自由缩放属性resize 为了增强用户体验，CSS3增加了很多新的属性，其中resize就是一个重要的属性，它允许用户通过拖动的方式来修改元素的尺寸来改变元素的大小。到目前为止，可以使用overflow属性的任何容器元素。 在此之前，Web设计师为了要实现这样具有拖动效果的UI，使用大量的脚本代码才
阅读全文
摘要：Media Queries——媒体类型 随着科学技术不断的向前发展，网页的浏览终端越来越多样化，用户可以通过：宽屏电视、台式电脑、笔记本电脑、平板电脑和智能手机来访问你的网站。尽管你无法保证一个网站在不同屏幕尺寸和不同设备上看起来完全一模一样，但至少要让你的Web页面能适配用户的终端，让他更好的呈现
阅读全文
摘要：多列布局——Columns 为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面，这种布局在报纸和杂志上都使用了几十年了，但要在Web页面上实现这样的效
阅读全文
摘要：变形--旋转 rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。如下图所示： HTML代码： <div cla
阅读全文
摘要：属性选择器 在HTML中，通过各种各样的属性可以给元素增加很多附加的信息。例如，通过id属性可以将不同div元素进行区分。 在CSS2中引入了一些属性选择器，而CSS3在CSS2的基础上对属性选择器进行了扩展，新增了3个属性选择器，使得属性选择器有了通配符的概念，这三个属性选择器与CSS2的属性选择
阅读全文
摘要：background-origin 设置元素背景图片的原始起始位置。 语法： background-origin ： border-box | padding-box | content-box; 参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。 效果如下： 需要注意的是
阅读全文
摘要：text-overflow 与 word-wrap text-overflow用来设置是否使用一个省略标记（...）标示对象内文本的溢出。 语法： 但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:
阅读全文
摘要：颜色之RGBA RGB是一种色彩标准，是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA是在RGB的基础上增加了控制alpha透明度的参数。 语法： color：rgba(R,G,B,A) 以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围
阅读全文
