前端之js

目录 JavaScript简介 js注释 js的引入方式 js变量变量名的命名规范 js中常量 js中数据类型数值类型 字符类型字符串常用方法 模板字符串 布尔值(Boolean)null和undefined 对象数组 常用方法 forEach() splice() map() 运算符算术运算符 比较运算符逻辑运算符 赋值运算符 流程控制ifelse 多分支结构 switch for循环 三元运算 函数函数定义 函数的全局变量和局部变量 内置对象和方法自定义对

HTML5中<template>标签的详细介绍

HTML5中<template>标签的详细介绍(图文) 这篇文章主要介绍了HTML5中的template标签,是HTML5入门中的重要知识,需要的朋友可以参考  一、HTML5template元素初面 <template>元素,基本上可以确定是2013年才出现的。干嘛用的呢,顾名思意,就是用来声明是“模板元素”。 目前,我们在HTML中嵌入模板HTML,往往是类似这样的写法: &#13

vue-learning:13 - js - vue作用域概念:全局和局部

目录 全局作用域:Vue对象 全局api 局部作用域: 实例对象vm 实例api 组件component 组件配置选项 在引入Vue文件时,就相当于拥有了一个全局Vue对象。 在varvm=newVue(option)时,就相当于创建了一个实例对象vm 在注册一个组件后,就相当于创建了一个组件对象。 全局Vue对象的属性和方法能被所有实例对象共享,或者说继承。全局API调用是Vue打点调用。形式是:VUE.directive、VUE.filter。

vue-learning:12 - 2 - 区分:outerHTML - innerTHML - outerText - innerText - textContent

区分:outerHTML-innerTHML-outerText-innerText-textContent 获取值 <divid="outer"> 外部 <divid="inner"> 内部 <spanstyle="display:none">浙江省</span> <!--这是注释--> <span>杭州西湖美</span> </div> </div> vard_outer=document.qu

vue-learning:12-1- HTML5的<template>内容模板元素

HTML5的<template>内容模板元素 HTML内容模板<template>元素将它其中的内容存储在页面文档中,以供后续使用,该内容的DOM结构在加载页面时会被解析器处理,但最终内容不会在页面中显示。 <template>元素的特点 天生隐藏,不可见性:display:none及其内容 childNodes无效,即在js中不能像常规元素一样获取其内容,必须使用content属性获取。 文档任意位置:<head>/<body>

html5 canvas画流程图

<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"/> <title></title> </head> <body> <canvasid="myCanvas"width="1200"height="800"style="border:soli

vue-learning:22 - js - directives

directives 在讲解视图层指令时,我们讲到ref特性,使用它我们可以获取当前DOM元素对象,以便执行相关操作。 <divid="app"> <inputref="ipt"type="text"v-model="value"/> </div> newVue({ el:"#app", data:{ value:'' }, methods:{ handleEle(){ letele=this.$refs.ipt //dosomthing } } }) 如果某个DOM操

vue-learning:23 - js - leftcycle hooks

vue生命周期钩子函数 每一个Vue实例在创建时都需要经过一系列初始化。根据vue实例化过程中执行的逻辑,可以分为5个阶段: 初始化阶段 模板编译阶段 虚拟DOM挂载阶段 响应更新阶段 卸载阶段 这个过程构成了vue实例的生命周期。在每个阶段前后都暴露了一个钩子函数,称为生命周期函数,可以让我们在特定阶段注入自定义的执行逻辑。 下面列出每个阶段的初始逻辑

vue-learning:21 - js - mixins

mixins 混入是一种对重复代码的组织方式,可以在多个组件间复用代码。 如果在项目中,在多个组件间有一段逻辑代码是共同的。那常见的处理方式是: 每个组件都复制粘贴代码(显然这是最不好方式) 将以共同的代码逻辑抽离成多个函数,并存储到util文件里,在组件使用时引入这个方法。 直接将共同的代码剥离出来,并存储到你定义的mixin文件里,在组件使用时引入,并在

vue-learning:19 - js - filters

filters 基本使用 仅限在插值{{}}和v-bind指令中使用 管道符|分隔 链式调用 传入参数 全局注册和局部注册 纯函数性质(不能使用this) 基本使用 我们看下之前用计算属性实现的例子,用过滤器实现 <!--假设后端返回的价格单位是分,显示格式要求¥0.00元--> <!--expression--> <div>price:¥{{(price/100).toFixed(2)}}元</div> <!--computed--> &lt

vue-learning:18 - js - watch

watch watch可以监听data和computed中值的变化。 watch在实例对象作用域中可以监听实例对象的数据,即varvm=newVue(options)时作为配置对象属性传入。监听组件作用域内的数据,可以在组件的配置选项中传入。 基本语法形式: key:porp|obj.prop|arr[idx]|computed value:String|Function|Array|Object(handler|[deep|immediate]) retuan:Function 点击查看DEMO:例子

vue-learning:16 - js - computed

computed 在指令章节讲过,插值{{}}和指令都接受变量和表达式的写法,使用表达式可以进行简单的二元或三元运算。但如果要执行更加复杂的计算或频繁重复的计算,如果还是直接写在指令的表达式中会让代码过于臃肿,不好看不优雅。这个时候可以使用computed属性。 比如: <!--假设后端返回的价格单位是分,显示格式要求¥0.00元--> <!--bad--> <div>总价:¥{{(price/100).to

vue-learning:17- js - methods

methods 函数是十分优雅的语言特性,它让我们可以采用可复用的方式存储一段逻辑,从而不用重复代码就可以在多处调用。函数、组件、模块等都有复用代码的考虑,函数应该是最早组织复用代码的实现。 在vue中,函数被定义为方法来使用,配置在methods属性中,methods是一个对象,函数名和函数体分别作为methods对象的键值对。 newVue({ el:"#app", data:{ count:0, }, methods:{ increase:function(

vue-learning:15 - js - data

data data属性是一个对象,存放最纯粹的数据,这些数据可以在模板template、计算属性computed、方法methods、监听器watch、过滤器filters、生命周期函数中使用,并且可能会更新它。 vue在实例创建过程中,对data数据解析时会对每个定义的数据变量作响应式封装,以便在其它地方改变它时能触发该数据变量所相关联的其它内容的更新。(具体见响应式原理章节) 在newVue()实例化中,data是

vue-learning:12-vue获取模板内容的方式

vue获取模板内容的方式 目录 outerHTML获取内容 template属性获取内容 ES6的字符串模板 <template>标签 <srcipttype="text/x-template></script> render()函数 render(createElement=>createdElement(标签名称,数据对象,子节点列表)) JSX语法:render(()=>{return(JSX)}) vue遵循数据驱动的理念,在视图层通过模板处理数

vue-learning:7-template-v-bind-with-class-and-style

绑定元素样式的指令v-bind:class和v-bind:style 在HTML元素结构中,class和style特性(attribute)是非常突出的,可以为元素添加样式属性(property)。 在Vue中,如果我们有动态添加类的需求,比如根据数据条件判断是否需要添加某个类,就可以用v-bind指令绑定。因为元素的class列表和内联样式syle是数据绑定中非常频繁的操作,所以vue中做了专门的增加,可以非常灵活的使用各种形式来动态绑

vue-learning:10-template-ref

使用ref直接访问DOM元素 传统DOM操作或jQuery操作DOM,都必须是选择器先选择对应的DOM元素。比如: <buttonid="btn">按钮</button> vardom=document.getElementById("btn"); var$dom=$("#btn") console.log(dom===$dom[0])//true 在vue中提供了更为便捷的方法,只需要在元素开始标签内添加ref特性即可。然后在js部分使用this.$refs获取DOM元素。这个元

vue-learning:9-template-v-model

表单元素的双向绑定指令v-model 目录 v-model的基础用法 v-model双向绑定实现的原理 v-model绑定值的输出类型(字符串、数组、布尔值、自定义) v-model修饰符:.lazy.number.trim VUE为表单元素交互提供了一个能实现双向数据绑定的指令:v-model v-model基础用法 <inputtype="text"v-model="value"/> v-model双向绑定实现的原理 点击查看DEMO:v-model双向绑定实现的原理 我们先理解下双向绑定

vue-learning:8-template-v-on-and-modifier

绑定元素事件的指令v-on及事件和修饰符 目录 对比原生事件绑定、jQuery事件绑定 Vue事件绑定 Vue绑定事件中获取事件对象event 事件修饰符 事件行为修饰符:stop/prevent/capture/self/once/passvise 键盘事件修饰符:按键码keycode/按键别名 鼠标事件修饰符:left/middle/right 系统修饰键修饰符:ctrl/shift/alt/meta,以及exact 前面介绍的所有指令,包括插值{{}}、v-html、v-if、v-show、v-

vue-learning:6-template-v-bind

绑定元素特性的指令v-bind 回顾下,从HTML元素的结构看,在VUE框架中,内容由插值{{}}和v-html绑定;v-if和v-show可以控制元素的可见性;v-for可以用于批量生成列表元素。 这一节介绍下绑定元素特性的指令v-bind的用法: v-bind:attribute=value v-bind:attribute=expression //v-bind简写: :attribute=value :attribute=expression 点击查看DEMOv-bindonattribute