Input Placeholder

通配选择符( * ) 通常不建议使用通配选择符，因为它会遍历并命中文档中所有的元素，出于性能考虑，需酌情使用 相邻选择器（+） 会选择相邻的下一个的元素（不包括自己） 兄弟选择器（~） 会选择相邻的后面的所有兄弟元素（不包括自己） 属性选择器 E[att] { sRules } 选择具有att属性的E元素。 E[att="val"] { sRules } 选择具有att属性且属性值等于val的E元素 E[att~="val"] { sRules } 选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素（包含只有一个值且该值等于val的情况）。 E[att^="val"] { sRules } 选择具有att属性且属性值为以val开头的字符串的E元素 ;(包括)，如果有多个值，则写在开头的一个包括val则可以； E [att$="val"] { sRules } 选择具有att属性且属性值为以val结尾的字符串的E元素。 (包括该字符串)，如果有多个属性值，则不可以！ E[att*="val"] { sRules } 选择具有att属性且属性值 有 val 字母 的字符串的E元素。 如果属性有多个属性值，但属性值中包含有val的字符串，也可以。 E[att|="val"] { sRules } 选择具有 att 属性，其值是以 val 开头并用连接符"-

###1.Html5 Forms概述,在Html5中: 1.表单仍然使用<form>元素作为容器,我们可以在其中设置基本的提交特性 form的action指向一个服务器地址（接口） 2.当用户或开发人员提交页面时,表单仍然用于向服务端发送表单中控件的值 注意表单项的name属性必须有值，服务器才能获取表单 3.所有之前的表单控件都保持不变 4.仍然可以使用脚本操作表单控件 5.Htnl5之前的表单 标签为input type:text:文本框 type:password:密码框 type:radio:单选按钮 注意以name分组，确保单选关系，也为了后台能成功获取 必须有value属性，为了后台获取后的识别（不写统一为on） checked属性,选中控制 type:checkbox:复选框 注意以name分组，确保为一组，也为了后台能成功获取 必须有value属性，为了后台获取后的识别（不写统一为on） checked属性,选中控制 type:submit:提交按钮 type:reset:重置按钮 type:button:普通按钮 标签为select:下拉框 name属性在select标签上 multiple:可选多项 子项可以通过optgroup来进行分组 label属性用来定义组名 子项为option标签 selected属性,选中控制 必须有value属性

在很多网站上我们都看到input输入框显示提示文字，让我们一起来看看如果在input输入框中显示提示文字。我们只需要在<input>标签里添加：placeholder="提示文字即可"，那么如果要修改提示文字的样式呢？可以这样设置css样式： <! DOCTYPE html > < html > < head > < meta charset ="UTF-8" > < title > input输入框提示文字 </ title > < style > /* 修改提示文字的颜色 */ input::-webkit-input-placeholder { /* WebKit browsers */ color : red ; } input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color : red ; } input::-moz-placeholder { /* Mozilla Firefox 19+ */ color : red ; } input:-ms-input-placeholder { /* Internet Explorer 10+ */ color : red ; } </ style > </ head > < body > < input type ="text" placeholder =

下面是Vue的一些基本知识点相关学习跟应用，差缺补漏吧。Vue.js官网好好看一遍还是很香的。 Vue中的数据和DOM已经被关联起来，所有的东西都是响应式的。注意我们不再和HTML直接交互。一个Vue应用会将其挂载到DOM元素上然后对齐进行完全的控制，那个HTML是我们的入口，但是其他的都会发生在新创建的Vue实例内部。详情可见 MVVM原理极其实现 。 Vue实例 1、实例声明周期钩子函数 8个声明周期函数 模板语法 1、插值 ①、 v-once 指令 ，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。 ②、可以使用js表达式但是不能使用语句和流控制(if判断语句) 1 {{ ok ? 'YES' : 'NO' }} 2 {{ message.split('').reverse().join('') }} 3 ​ 4 <!-- 这是语句，不是表达式 --> 5 {{ var a = 1 }} 6 <!-- 流控制也不会生效，请使用三元表达式 --> 7 {{ if (ok) { return message } }} 2、指令 ①、动态参数 -2.60新增 可以使用动态参数为一个动态的事件名绑定处理函数： 约束：为某些字符，如空格和引号，放在 HTML attribute 名里是无效的。会触发警告。 1 < a v-on:[eventName] =

官网文档里有介绍 , 但是加上事件后不管用 , 此处备注一下要加.native 例如下面的例子: <el-input placeholder= " 在信息流中搜索关键词 " v-model= " weiboSearch " v-on:keyup.enter.native= " searchWeibo " class = " input-with-select " > <el-button v-on:click= " searchWeibo " slot= " append " icon= " el-icon-search " ></el-button> </el-input> 上面的代码效果就是点击和回车都能执行绑定的函数 来源： oschina 链接： https://my.oschina.net/u/4369262/blog/4287522

如果简单使用的tree树形控件，按照Element ui Tree 树形控件 官方文档使用即可，基本上能够完成大部分的需求。 但是如果需要对树形结构进行额外操作，仅仅根据官方文档提供的方案的话，可能就不太够了，需要我们更深入的研究树形控件。 关于树形结构的增删改查操作，官方提供了append和remove两个方法，可以很方便的实现添加节点和删除节点，关键还有一个重命名的操作，并没有提供直接的方法，那就需要我们去变通。 以下提供两个方案： 1、利用append方法 官方说明： 　　 说提供两个参数，但是经过验证 <el-button type="text" size="mini" icon="el-icon-edit" @click.stop.prevent="() => append(node, data)">重命名</el-button> 　　所以需要为当前节点进行重命名的时候，可以依赖parentNode参数，获取父节点，然后操作就类似于为当前节点添加子节点差不多了，需要注意的是： 　　添加节点，是对当前节点的子节点children通过数组方法push，或者unshift； 　　重命名节点，是对当前节点的父节点的子节点children通过数组方法splice替换当前节点，需要先确定当前数据在该数组中的index const index = children.findIndex

条件渲染 有时候我们要根据数据的情况，决定标签是否进行显示或者有其他动作。最常见的就是，表格渲染的时候，如果表格没有数据，就显示无数据。如果有数据就显示表格数据。 Vue 帮我们提供了一个 v-if 的指令，帮助我们完成判断的模板处理。 < div id ="app" > < h1 v-if ="ok" > Yes </ h1 > < h1 v-else > No </ h1 > </ div > <!-- 当ok为true的时候，输出： Yes， 否则输出： No --> < script > var app = new Vue({ el: ' #app ' , data: { ok: true // true,返回：Yes， false=> No } }); </ script > v-if 指令可以根据数据绑定的情况进行插入标签或者移除标签。 当然，如果熟悉 js 的都清楚，有 if，肯定会有 else。 Vue 提供的是 v-else 指令。 v-if 在 Vue 中，我们使用 v-if 指令实现同样的功能： < h1 v-if ="ok" > Yes </ h1 > 也可以用 v-else 添加一个“else 块”： < h1 v-if ="ok" > Yes </ h1 > < h1 v-else > No </ h1 > 在 <template> 元素上使用 v-if

基础用法 1 < el-input v-model ="input1" palcehoder ="请输入" ></ el-input > 2 3 var Main = { 4 data() { 5 return { 6 input1: '' 7 } 8 } 9 } 10 var Ctor = Vue.extend(Main) 11 new Ctor().$mount('#app') 基础输入框 可指定不同的属性值对输入框进行设置 disabled ：输入框禁用；size：输入框大小（large、medium、small、mini）；clearable：可清空 带有 icon 的输入框 　　通过 prefix-icon 或 suffix 属性指定 input 组件头部或尾部显示图标。也可以通过 solt 方式来放置图标 　　1.属性方式 < el-input placeholder ="请输入" v-model ="input10" prefix-icon ="el-icon-search" ></ el-input > < el-input placeholder ="请输入" v-model ="input10" suffix-icon ="el-icon-search" ></ el-input > 　　2.solt 方式 < el-input placeholder =

input::-webkit-input-placeholder{} /* 使用webkit内核的浏览器 */ input:-moz-placeholder{} /* Firefox版本4-18 */ input::-moz-placeholder{} /* Firefox版本19+ */ input:-ms-input-placeholder{} /* IE浏览器 */ 来源： oschina 链接： https://my.oschina.net/u/3982771/blog/3168757