vue开发体验
*:first-child {
margin-top: 0 !important;
}
body>*:last-child {
margin-bottom: 0 !important;
}
/* BLOCKS
=============================================================================*/
p, blockquote, ul, ol, dl, table, pre {
margin: 15px 0;
}
/* HEADERS
=============================================================================*/
h1, h2, h3, h4, h5, h6 {
margin: 20px 0 10px;
padding: 0;
font-weight: bold;
-webkit-font-smoothing: antialiased;
}
h1 tt, h1 code, h2 tt, h2 code, h3 tt, h3 code, h4 tt, h4 code, h5 tt, h5 code, h6 tt, h6 code {
font-size: inherit;
}
h1 {
font-size: 28px;
color: #000;
}
h2 {
font-size: 24px;
border-bottom: 1px solid #ccc;
color: #000;
}
h3 {
font-size: 18px;
}
h4 {
font-size: 16px;
}
h5 {
font-size: 14px;
}
h6 {
color: #777;
font-size: 14px;
}
body>h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h4:first-child, body>h5:first-child, body>h6:first-child {
margin-top: 0;
padding-top: 0;
}
a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
margin-top: 0;
padding-top: 0;
}
h1+p, h2+p, h3+p, h4+p, h5+p, h6+p {
margin-top: 10px;
}
/* LINKS
=============================================================================*/
a {
color: #4183C4;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* LISTS
=============================================================================*/
ul, ol {
padding-left: 30px;
}
ul li > :first-child,
ol li > :first-child,
ul li ul:first-of-type,
ol li ol:first-of-type,
ul li ol:first-of-type,
ol li ul:first-of-type {
margin-top: 0px;
}
ul ul, ul ol, ol ol, ol ul {
margin-bottom: 0;
}
dl {
padding: 0;
}
dl dt {
font-size: 14px;
font-weight: bold;
font-style: italic;
padding: 0;
margin: 15px 0 5px;
}
dl dt:first-child {
padding: 0;
}
dl dt>:first-child {
margin-top: 0px;
}
dl dt>:last-child {
margin-bottom: 0px;
}
dl dd {
margin: 0 0 15px;
padding: 0 15px;
}
dl dd>:first-child {
margin-top: 0px;
}
dl dd>:last-child {
margin-bottom: 0px;
}
/* CODE
=============================================================================*/
pre, code, tt {
font-size: 12px;
font-family: Consolas, "Liberation Mono", Courier, monospace;
}
code, tt {
margin: 0 0px;
padding: 0px 0px;
white-space: nowrap;
border: 1px solid #eaeaea;
background-color: #f8f8f8;
border-radius: 3px;
}
pre>code {
margin: 0;
padding: 0;
white-space: pre;
border: none;
background: transparent;
}
pre {
background-color: #f8f8f8;
border: 1px solid #ccc;
font-size: 13px;
line-height: 19px;
overflow: auto;
padding: 6px 10px;
border-radius: 3px;
}
pre code, pre tt {
background-color: transparent;
border: none;
}
kbd {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #DDDDDD;
background-image: linear-gradient(#F1F1F1, #DDDDDD);
background-repeat: repeat-x;
border-color: #DDDDDD #CCCCCC #CCCCCC #DDDDDD;
border-image: none;
border-radius: 2px 2px 2px 2px;
border-style: solid;
border-width: 1px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
line-height: 10px;
padding: 1px 4px;
}
/* QUOTES
=============================================================================*/
blockquote {
border-left: 4px solid #DDD;
padding: 0 15px;
color: #777;
}
blockquote>:first-child {
margin-top: 0px;
}
blockquote>:last-child {
margin-bottom: 0px;
}
/* HORIZONTAL RULES
=============================================================================*/
hr {
clear: both;
margin: 15px 0;
height: 0px;
overflow: hidden;
border: none;
background: transparent;
border-bottom: 4px solid #ddd;
padding: 0;
}
/* TABLES
=============================================================================*/
table th {
font-weight: bold;
}
table th, table td {
border: 1px solid #ccc;
padding: 6px 13px;
}
table tr {
border-top: 1px solid #ccc;
background-color: #fff;
}
table tr:nth-child(2n) {
background-color: #f8f8f8;
}
/* IMAGES
=============================================================================*/
img {
max-width: 100%
}
-->
vue开发体验
记录下vue开发过程中的一些理解,如有不足,希望大家多多提意见。
v-bind属性绑定
vue里面的数据绑定,是一种常见的元素操作,如v-bind:src,v-bind:class,v-bind:style等等。
//html代码
<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>
//js代码
data: {
isA: true,
isB: false
}
渲染为
<div class="static class-a"></div>
这是个官网的例子,再举一个常见的。我们一般对网页图片优化,需要考虑对图片懒加载(延迟加载)会写如下代码:
<img data-original="images/1.jpg" src="/js/grey.gif" />
1.jpg为需要加载的图片,grey.gif为加载前等待图片(图片高度只有1px),再引入js代码,进行控制修改,繁琐又不够灵活。而vue解决了这个问题。
<img v-bind:src="imgUrl">
ajax请求数据图片链接地址,写入data,监测到imgUrl变化,自动更新视图。后期可以根据具体的需求,做出相应的扩展。
组件开发
Vue是专门view数据渲染的MVVM框架,其中最核心的是组件开发。组件注册后便可以用在父实例的模块中,以自定义元素的形式使用要确保在初始化根实例之前注册了组件。这是官网的描述,重点是先注册组件,再初始化根实例Vue,否则组件注册失败。
全局组件注册
//html代码
<my-component></my-component>
//js代码
Vue.component('my-component', {
template: '<div>A custom component! <my-c1></my-c1></div>'
})
局部组件注册
局部注册组件,只能使用在父组件模板内
//html代码
<div id="Parent"></div>
//js代码
var Parent = Vue.extend({
template: '<div>I\'m Parent, My children: <my-c1></my-c1></div>',
components: {
//只能用在父组件模板
'my-c1':{
template: '<div>A custom component!</div>'
}
}
})
//组件实例化
new Parent({
el: '#Parent'
})
在组件命名上出现大写,如<my-c1Name></my-c1Name>,组件是注册失败。
组件通讯
组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。
props
“prop”是组件数据的一个字段,期望从父组件传下来
//html代码
<child msg="hello!"></child>
//js代码
Vue.component('child', {
// 声明 props
props: ['msg'],
// prop 可以用在模板内
// 可以用 `this.msg` 设置
template: '<span>{{ msg }}</span>'
})
//渲染为
<span>hello!</span>
动态 Props
与v-bind属性绑定结合使用
//html代码
<child :msg="hello!"></child>
//js代码
Vue.component('child', {
// 声明 props
props: ['msg'],
// prop 可以用在模板内
// 可以用 `this.msg` 设置
template: '<span>{{ msg.a }}</span>'
})
new Vue({
el: '#app',
data:{
msgs: {
a: 1
}
}
})
与v-mode结合v-bind结合一起使用
//html代码
<input v-model="parentMsg">
<br>
<child :message="parentMsg"></child>
//js代码
Vue.component('child', {
// 声明 props
props: ['message'],
// prop 可以用在模板内
// 可以用 `this.msg` 设置
template: '<span>{{ message }}</span>'
})
new Vue({
el: '#app',
data:{
parentMsg: 'Message from parent'
}
})
参考文档
- vue.js官网http://cn.vuejs.org/guide/
vue开发体验的更多相关文章
- 使用 typescript ,提升 vue 项目的开发体验(2)
此文已由作者张汉锐授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. vuex-class 提供了和 vuex 相关的全部装饰器,从而解决了上面 Vue.extend + vue ...
- 用Vue开发一个实时性时间转换功能,看这篇文章就够了
前言 最近有一个说法,如果你看见某个网站的某个功能,你就大概能猜出背后的业务逻辑是怎么样的,以及你能动手开发一个一毛一样的功能,那么你的前端技能算是进阶中高级水平了.比如咱们今天要聊的这个话题:如何用 ...
- vue 开发2017年变化回顾及2018年展望
vue.js 变化 从 github 的发布记录我们可以看到2017年 vue.js 的第一个发布为 v2.1.9,最后一个为 v2.5.13,主要发布小版本 2.2~2.5.这些发布提升了vue 与 ...
- 使用新一代js模板引擎NornJ提升React.js开发体验
当前的前端世界中有很多著名的开源javascript模板引擎如Handlebars.Nunjucks.EJS等等,相信很多人对它们都并不陌生. js模板引擎的现状 通常来讲,这些js模板引擎项目都有一 ...
- vue 开发微信小程序
介绍 mpvue (github 地址请参见)是一个使用 Vue.js 开发小程序的前端框架.框架基于 Vue.js 核心,mpvue 修改了 Vue.js的 runtime 和 compiler 实 ...
- [总结]vue开发常见知识点及问题资料整理(持续更新)
package.json中的dependencies与devDependencies之间的区别 –save-dev 和 –save 的区别 我们在使用npm install 安装模块或插件的时候,有两 ...
- Vetur:VSCode下强大的Vue开发工具
Vue自从发布以来就一直受到前端开发人员的热爱,而除了一些本身优秀的特征之外,还有就是丰富的插件和工具的支持和更新.虽然现在的编辑器需要安装相应的plugins才能进行Vue组件化开发,但是越来越多优 ...
- 【转】[总结]vue开发常见知识点及问题资料整理(持续更新)
1.(webpack)vue-cli构建的项目如何设置每个页面的title 2.vue项目中使用axios上传图片等文件 3.qs.stringify() 和JSON.stringify()的区别以及 ...
- 使用vue开发微信公众号下SPA站点的填坑之旅
原文发表于本人博客,点击进入使用vue开发微信公众号下SPA站点的填坑之旅 本文为我创业过程中,开发项目的填坑之旅.作为一个技术宅男,我的项目是做一个微信公众号,前后端全部自己搞定,不浪费国家一分钱^ ...
随机推荐
- nyist 500 一字棋
题目链接: http://acm.nyist.net/JudgeOnline/problem.php?pid=500 这太并不难,只要把情况分清楚就可以了,本人由于考虑不是很周全,WA了n次....悲 ...
- python基础学习笔记5--对象方法、属性和迭代器
对象方法.属性和迭代器 1.构造方法 1)构造方法和一般方法的不同点:当一个对象被创建后,会立即调用构造方法. 2)在Python中创建一个构造方法很容易,只要把init方法的名字从简单的init修改 ...
- SQL 设计心得、逗号分隔列表
第一: 在开始编码前.主要关注数据库里要保存什么样的数据,以级最佳的数据组织方式和内在关联方式. 第二: 使用你所知的数据库特性尽可能高效的实现数据管理.如正确的索引.数据库类型.高效的select! ...
- Netbeans搭建Android环境
原文:Netbeans搭建Android环境 Netbeans环境的搭建主要依赖于NBAndroid插件,项目地址: http://www.nbandroid.org/p/installation.h ...
- css 自适应布局
转载一篇文章: 自适应网页设计(Responsive Web Design) 作者: 阮一峰 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小 ...
- Codeforces 235B Let's Play Osu! 概率dp(水
题目链接:点击打开链接 给定n表示有n个格子 以下每一个格子为O的概率是多少. 对于一段连续 x 个O的价值就是 x*x ; 问: 获得的价值的期望是多少. 思路: 把公式拆一下.. #include ...
- java String分类trim,substring,replaceAll,indexOf使用功能
1.trim性能 特征去掉字符串首尾空格,防止不必要的空格导致错误. public class TrimTest { public static void main(String[] args) { ...
- Jquery 遍历数组之grep()方法介绍
grep()方法用于数组元素过滤筛选. grep(array,callback,boolean);方法参数介绍. array ---待处理数组 callback ---这个回调函数用来处理数组中 ...
- ImageMagick 转换 progressive jpeg
什么是渐进式图片(Progressive JPEG)? 来自 张鑫旭-鑫空间-鑫生活 的解释: 不知诸位有没有注意到,这些jpg格式的图片在呈现的时候,有两种方式,一种是自上而下扫描式的,还有一种就是 ...
- POJ 1850 Code(找规律)
Code Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 7913 Accepted: 3709 Description ...