YKiOS-CSDN博客

原创 Vue.js实战学习-组件详解(二)

使用props传递数据基本用法组件不仅仅是要把模版的内容进行复用，更重要的是组件间要进行通信。通常父组件的模版中包含子组件，父组件要正向地向子组件传递数据或参数，子组件接收到后根据参数的不同来渲染不同的内容或执行操作。这个正向传递数据的过程就是通过props来实现的。在组件中，使用选项props来声明需要从父级接收的数据，props的值可以是两种，一种是...

2019-04-19 15:23:37 143

原创 Vue.js实战学习-组件详解(一)

组件与复用 1.组件用法组件与创建Vue实例类似，需要注册后才可以使用。注册有全局注册和局部注册两种方式。全局注册后，任何Vue实例都可以使用。全局注册实例代码如下：Vue.component('my-component', { //选项}) my-component就是注册的组件自定义标签名称，推荐使用小写加减号分割的形式命...

2019-04-11 10:44:25 314

原创 Vue.js实战学习-表单与v-model

一.基本用法 Vue.js提供了v-model指令，用于在表单类元素上双向绑定数据，如在输入框上使用时，输入的内容会实时映射到绑定的数据上。<div id="app"> <input type="text" v-model="message" placeholder="输入..."> <p>输入的内容是: {{ message ...

2019-04-04 14:08:59 263

原创 Vue.js实战学习-内置指令

一.基本指令 1.v-cloak v-cloak不需要表达式，它会在Vue实例结束编译时从绑定的HTML元素上移除，经常和CSS的display:none;配合使用：<div id="app" v-cloak> {{ message }}</div><script> var app = new Vue({ ...

2019-03-29 14:32:53 156

原创 Vue.js实战学习-v-bind及class与style绑定

一. 了解v-bind指令前面两章已经了解了v-bind的基本用法以及它的语法糖，它的主要用法是动态更新HTML元素上的属性。示例如下：<div id="app"> <a v-bind:href="url">链接</a> <img v-bind:src="imgUrl"> <!-- 缩写为 --&...

2019-03-22 11:09:14 381

原创 JavaScript学习(五)

JavaScript this关键字面向对象语言中this表示当前对象的一个引用。但在JavaScript中this不是固定不变的，它会随着执行环境的改变而改变。在方法中，this 表示该方法所属的对象。如果单独使用，this 表示全局对象。在函数中，this 表示全局对象。在函数中，在严格模式下，this 是未定义的(undefined)。 ...

2019-03-07 17:53:36 177

原创 JavaScript学习(四)

一.JavaScript对象 JavaScript中的所有事物都是对象：字符串、数字、数组、日期，等等。在JavaScript中，对象是拥有属性和方法的数据。属性和方法属性是与对象相关的值。方法是能够在对象上执行的动作。访问对象的属性访问对象属性的语法是：objectName.propertyName...

2019-02-28 17:36:37 213

原创 JavaScript学习(三)

一.JavaScript变量变量是存储信息的容器。变量必须以字母开头变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）变量名称对大小写敏感（y 和 Y 是不同的变量）提示：JavaScript语句和JavaScript变量都对大小敏感。当您向变量分配文本值时，应该使用双引号或单引号包围这个值。当您向变量赋的值是数值时，不要使用引号。...

2019-02-20 14:20:47 137

原创 JavaScript学习(二)

一.JavaScript输出 JavaScript通常用于操作HTML元素。 JavaScript访问某个HTML元素，可以使用document.getElementById(id)方法。如：<!DOCTYPE html><html><body><h1>我的第一张网页</h1><p id="...

2019-02-14 14:10:20 185

原创 JavaScript学习(一)

一.JavaScript使用 HTML中的脚本必须位于<script>与</script>标签之间。脚本可被放置在HTML页面的<body>和<head>部分中。 <script>标签如需在HTML页面中插入JavaScript，请使用<script>标签。 &l...

2019-02-11 10:22:51 184

原创 jQuery基础学习(四)

一.jQuery遍历什么是遍历？ jQuery 遍历，意为"移动"，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。图示解析：<div> 元素是 <ul> 的父元素，同时是其中所有内容的祖先。 <ul> 元素是 <li> 元素的父元素，...

2019-01-30 10:13:05 165

原创 jQuery基础学习(三)

一.jQuery-获取并设置CSS类 jQuery拥有若干进行CSS操作的方法。addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleClass() - 对被选元素进行添加/删除类的切换操作 css() - 设置或返回样式属性 jQuery addClass()方法示例：$("butto...

2019-01-23 16:15:51 128

原创 jQuery基础学习(二)

一.jQuery获取内容和属性 jQuery拥有可操作HTML元素和属性的强大方法。获得内容 - text()、html() 以及 val() 三个简单实用的用于 DOM 操作的 jQuery 方法：text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容（包括 HTML 标记） val() - 设置或返回表单字段的值...

2019-01-16 17:55:48 187

原创 jQuery基础学习(一)

一.jQuery语法 jQuery语法是为HTML元素的选取编制的，可以对元素执行某些操作。基础语法是：$(selector).action()美元符号定义 jQuery 选择符（selector）“查询”和“查找” HTML 元素 jQuery 的 action() 执行对元素的操作示例： $(this).hide() - 隐藏当前元素 ...

2019-01-09 10:30:26 223

原创 HTML5选择器学习

HTML选择器1、标签选择器直接将HTML元素中的标签作为选择器，可以是html、h1、a、strong等HTML标签，在CSS中直接展现。html {color:black;}h1 {color:blue;}h2 {color:silver;}2、ID选择器通常在编写页面的时候设定某些标签元素的ID,同一个HTML中ID不允许重复，例如，<div i...

2019-01-03 14:56:11 1027

原创构建HTML文档

1.学习HTML5的内容，首先让我们来看一下HTML的元素组成吧，本章内容如下： 1.1 构建基本的文档结构先从文档元素讲起，这些基础成分确定了HTML文档的轮廓以及浏览器的初始环境。文档元素只有4个，但是任何HTML文档都需要所有这些元素。 1.1.1 DOCTYPE元素 DOCTYPE元素独一无二，而且自成一类。每一个HTML文档都...

2018-12-27 17:20:46 225 1

原创 CSS基本用法

1.CSS引入方法内联式：通过标签的style属性，在标签上直接写样式。如： <div style="width: 200px;height: 400px;background: red">这是一个div标签</div> <p style="width: 300px;height: 80px;background: green">这是一个...

2018-12-20 15:19:08 1133

原创 Vue.js实战学习-计算属性

1.什么是计算属性？在表达式中如果有复杂的逻辑时就应该使用计算属性，所有的计算属性都以函数的形式写在Vue实例内computed选项内，最终返回计算后的结果，如：<!DOCTYPE html><html><head> <title>计算属性</title></head><body>

2018-12-13 10:20:07 180

原创 Vue.js实战学习-Vue.js理解及数据绑定

1.Vue.js是什么？ Vue.js是一个渐进式的javaScript框架，在项目中，可以选择从不同的维度去使用它。2.使用的模式： MVVM模式：Model-View-ViewModel,当View(视图层)变化时，会自动更新到ViewModel(视图模型)，反之亦然。View和ViewModel之间通过双向绑定(data-binding)建立联系。 ...

2018-12-06 15:47:30 379 3

YKiOS的博客