- 博客(16)
- 收藏
- 关注
原创 操作 vue.js基础-计算机属性
计算机属性模板内的表达式是非常便利的,但是它们实际上只用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护。例如:<div id="example"> {{ message.split('').reverse().join('') }}</div>在模板中放入逻辑会影响加载速度,使得模板不再简单和清晰,对于任何复杂逻辑,你都应当使用计算属性例子HTML代码:<div id="examp
2017-08-07 14:38:46 588
原创 vue.js基础-模板语法-指令
指令指令(Directives)是带有 v- 前缀的特殊属性。指令属性的值预期是单一 JavaScript 表达式(除了 v-for),指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。<p v-if="seen">Now you see me</p>这里, v-if 指令将根据表达式 seen 的值的真假来移除/插入 <p> 元素。参数:一些指令能接受一个“参数”,在指令后以冒
2017-08-03 10:04:17 305
原创 vue.js基础-模板语法-插值
插值文本: 数据绑定最常见的形式就是使用 “Mustache” 语法(双大括号)的文本插值:<span>Message: {{ msg }}</span>{{msg}}将会被替代为对应数据对象上 msg 属性的值。无论何时,绑定的数据对象上 msg 属性发生了改变,插值处的内容都会更新。通过使用 v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。但请留心这会影响到该节
2017-08-02 18:52:46 445
原创 vue.js基础-属性与方法和实例生命周期
属性和方法每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a: 1 }var vm = new Vue({ data: data})vm.a === data.a // -> true// 设置属性也会影响到原始数据vm.a = 2data.a // -> 2// ... 反之亦然data.a = 3vm.a // -> 3实例生命周期每个
2017-08-02 11:08:30 793
原创 vue.js基础-组件
组件组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型、自包含和通常可复用的组件构建大型应用。组件是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能。在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展。全局注册组件//注册组件Vue.component('todo-i
2017-08-01 10:51:30 764
原创 vue.js基础-处理用户输入与双向数据绑定
处理用户输入使用 v-on 指令 来增加事件监听器,触发事件后会调用 Vue 实例中 methods 下定义的方法。html代码:<div id="app-5"> <p>{{ message }}</p> <!--v-on 指令 来增加一个点击事件监听器--> <button v-on:click="reverseMessage">翻转 message</button></div>Ja
2017-07-31 17:34:32 2358
原创 vue.js基础-声明式渲染和条件与循环
绑定 DOM 元素文本值html代码:<div id="app"> {{ message }}</div>JavaScript代码:var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }})运行结果:Hello Vue!总结:数据和 DOM 已经被关联在一起,当我们改变app.message的数据,所
2017-07-31 15:04:15 1434
原创 阅读Vue.jsAPI
Vue.extend( options ) 参数:options(选择),参数是一个包含组件选项的对象。data 选项是特例,需要注意 - 在 Vue.extend() 中它必须是函数。// 创建构造器 var Profile = Vue.extend({ template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
2017-07-31 10:57:29 1052
原创 关于display:inline-block问题总结
问题一:内联块之间会有一小段空白。原因:两个有内联元素性质的div之间的空格解决方式:(1)不换行(2)加注释(3)取消标签闭合,但最后一个要加(兼容)(4)给父容器加font-size:0,子元素另行设置(5)父元素Letter-spacing:-3px,子元素letter-spacing:0(6)父元素Word-spacing:-6px,子元素lette
2017-07-18 20:18:27 892
原创 HTML5背景属性、盒子模型和选择器
2.3 背景相关属性body{ background-color:#37ff68; background-image:url("../pic/js.jpg"); background-repeat:no-repeat; background-position:bottom;} background-color:背景色backgro
2017-07-13 20:28:52 1671
原创 H5第四天学习
CSS基础知识1.1 基本概念CSS指层叠样式表(Cascading Style Sheets)为什么需要用CSSHTML描述了要展现的内容,而CSS则定义了这些内容的呈现形式,比如字体、颜色等。使用CSS能够将页面内容和呈现形式有效分离,有利于分工合作,也有利于快速更换不同的呈现形式。使用样式表可以有三种方式(1)内联样式将样式定义在style属性中,只对当前标签有效
2017-07-12 20:48:56 910
原创 HTML5第三天学习
4.10文件选择框type=”file“accept属性指定可选择的文件类型。上传文件需指定对应表单的属性。4.11 下拉列表使用下拉列表的好处:(1)节省页面空间,使得页面更加简洁。(2)方便输入(3)规范输入定义一个下拉列表 name属性定义了提交的参数名定义一个选项,value属性定义了,选择该选项时所传递的参数值。multiple:多选,Ct
2017-07-10 20:26:59 854
原创 HTML5第三天学习
4.10文件选择框type=”file“accept属性指定可选择的文件类型。上传文件需指定对应表单的属性。4.11 下拉列表使用下拉列表的好处:(1)节省页面空间,使得页面更加简洁。(2)方便输入(3)规范输入定义一个下拉列表 name属性定义了提交的参数名定义一个选项,value属性定义了,选择该选项时所传递的参数值。multiple:多选,Ct
2017-07-10 20:24:36 867
原创 HTML第二天学习
**列表标签 3.1 无序列表 :unordered list,定义一个无序列表 :list item,定义一个列表项 type属性指定无序列表的符号,取值有: disc:实心圆点 circle:空心圆 square:实心正方形 3.2 有序列表 ordered list,有序列表,即列表项带有序号 type属性指定序号的类型,其取值: 1:序号
2017-07-09 13:12:58 874
原创 HTML基础
1 HTML基础知识1.1 什么是计算机语言人与人之间是通过语言进行交流,那么人和计算机之间如何交流呢?计算机只知道“0”和“1”,所以我们就通过“0”和“1”这种语系来和计算机交流,这就是计算机语言。机器语言对于人来讲太难以理解,编制程序太困难。为了解决这个问题,我们将一串特定的“01”进行符号化,这就是汇编语言。机器语言和汇编语言都是属于低级语言,即体现了机器的特性
2017-07-06 17:25:30 834
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人