js内置对象
string字符串
charAt(n)：返回该字符串位于第n位的单个字符.
indexOf(char)：返回指定char首次出现的位置.
lastIndexOf(char) ：跟 indexOf() 相似，不过是从后边开始找.
substring(start,end) ：返回原字符串的子字符串，该字符串是原字符串从start位
置到end位置的前一位置的一段.
substr(start,length) ：返回原字符串的子字符串，该字符串是原字符串从start位
置开始，长度为length的一段.
split(分隔符字符) ：返回一个数组，该数组是从字符串对象中分离开来的，<分隔
符字符>决定了分离的地方，它本身不会包含在所返回的数组中。
例如：'1&2&345&678'.split('&')返回数组：1,2,345,678。
Array数组
数组的定义方法：
var <数组名> = new Array();
这样就定义了一个空数组。以后要添加数组元素，就用：
<数组名>[下标] = 值;
如果想在定义数组的时候直接初始化数据，请用：
var <数组名> = new Array(<元素1>, <元素2>, <元素3>...);
还可以
var <数组名> = [<元素1>, <元素2>, <元素3>...];
join(<分隔符>) ：返回一个字符串，该字符串把数组中的各个元素串起来，用<分隔
符>置于元素与元素之间。
reverse() 使数组中的元素顺序反过来。如果对数组[1, 2, 3]使用这个方法，它将使数
组变成：[3, 2, 1]。
sort() ：使数组中的元素按照一定的顺序排列。如果不指定<方法函数>，则按字母顺
序排列。
对数字排序需要调用排序函数。
function sortNumber(a,b){
return a - b;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//声明数组
/* var a = new Array();
a[0] = 1;
a[1] = "ab";
a[2] = true;
a[4] = 3; */
/* var a = new Array(1,2,true,"abc"); */
/* var a = [1,2,3,true,"abc"];
a[5] = 9;
console.log(a); */
/* var a = [1,2,3,true,"abc"];
for (var i = 0; i < a.length; i++) {
console.log(a[i]);
} */
//var a = [1,2,3,true,"abc"];
//var s = a.join(":"); //把数组转换为字符串,指定一个连接符号
// a.reverse(); 数组逆序
//console.log(a);
//var a = ['b','c','a','d'];
//a.sort();
//console.log(a);
var a = [2,3,11,4,1];
a.sort(numbersort); //把numbersort排序函数,当做参数传入到sort函数中
console.log(a);
//自定义一个排序函数
function numbersort(a,b){
return a-b;
}
var date = new Date();
console.log(date.getFullYear());
console.log(date.getMonth()+1);
console.log(date.getDate());
console.log(date.getDay());
console.log(Math.abs(-1));
</script>
</head>
<body>
</body>
</html>Date
n e w D a t e ( )
返 回 当 日 的 日 期 和 时 间
g e t F u l l Ye a r ( )
返 回 四 位 数 字 年 份
g e t D a t e ( )
返 回 一 个 月 中 的 某 一 天 ( 1 ~ 3 1 )
g e t M o n t h ( )
返 回 月 份 ( 0 ~ 1 1 )
g e t D a y ( )
返 回 一 周 中 的 某 一 天 ( 0 ~ 6 )
g e t H o u r s ( )
返 回 D a t e 对 象 的 小 时 ( 0 ~ 2 3 )
g e t M i n u t e s ( )
返 回 D a t e 对 象 的 分 钟 ( 0 ~ 5 9 )
g e t S e c o n d s ( )
返 回 D a t e 对 象 的 秒 数 ( 0 ~ 5 9 ) )
Math
Math.abs(x) 绝对值计算；
Math.pow(x,y) 数的幂；x的y次幂
Math.sqrt(x) 计算平方根；
Math.ceil(x) 对一个数进行上舍入
Math.floor(x)
对一个数进行下舍入。
Math.round(x)
把一个数四舍五入为最接近的整数
Math.random()
返回 0 ~ 1 之间的随机数
Math.max(x,y)
返回 x 和 y 中的最大值
Math.min(x,y)
返回 x 和 y 中的最小值
计时
通 过 使 用 J a v a S c r i p t ， 我 们 有 能 力 做 到 在 一 个 设 定 的 时 间 间 隔 之 后 来 执
行 代 码 ， 而 不 是 在 函 数 被 调 用 后 立 即 执 行 。 我 们 称 之 为 计 时 事 件 。
方 法 :
s e t Ti m e o u t ( “ 函 数 ” , ” 时 间 ” ) 未 来 的 某 时 执 行 代 码
c l e a r Ti m e o u t ( ) 取 消 s e t Ti m e o u t ( )
s e t I n t e r v a l ( “ 函 数 ” , ” 时 间 ” ) 每 隔 指 定 时 间 重 复 调 用
c l e a r I n t e r v a l ( ) 取 消 s e t I n t e r v a l ( )
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function hello(){
alert("hello");
}
//var t= setTimeout("hello()",3000);//设置在指定时间后调用函数，只调用一次，setTimeout会返回一个变量，计时器编号
var t;
function start(){
t = setInterval("hello()",3000);
}
function stop(){
//clearTimeout(t);//取消定时器，传入计时器编号就可以停止计时器
clearInterval(t);
}
</script>
</head>
<body>
<input type="button" value="开始" onclick="start()" />
<input type="button" value="停止" onclick="stop()"/>
</body>
</html>vue概述
是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
vue.js的优点
1.体积小 压缩后 33K
2.更高的运行效率
用 JQuery 或者原生的 JavaScript DOM 操作函数对 DOM 进行频繁操作的
时候，浏览器要不停的渲染新的 DOM 树，导致页面看起来非常卡顿。
基于虚拟 dom，一种可以预先通过 JavaScript 进行各种计算，把最终的
DOM 操作计算出来并优化的技术，最后在计算完毕才真正将 DOM 操作提交。
3.双向数据绑定,简化 Dom 操作
通过 MVVM 思想实现数据的双向绑定，让开发者不用再操作 dom 对象,
把更多的精力投入到业务逻辑上.
MVVM 是 Model-View-ViewModel 的简写。MVVM 就是将其中的 View 的
状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。
vue的安装
方式1
下载vue.js并且导入js文件，他就类似以前的数据库与java连接，数据库官方的连接jar包，下载后导入即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 导入vue.js -->
<script src="v2.6.10/vue.js"></script>
</head>
<body>
<div id="app-6">
<p>{{ message }},{{name}}</p>
<!-- {{}}插值表达式，可以获取data中的数据 -->
<input v-model="message">
<input v-model="name">
</div>
<script>
var app6 = new Vue({
el: '#app-6',//绑定挂载点，可以使用其他选择器，建议使用id选择器
data: {
message: 'Hello Vue!',
name:"jack"
}
})
</script>
</body>
</html>方式2
安装教程给出了更多安装 Vue 的方式。请注意我们不推荐新手直接使用 vue-cli，尤其是在你还不熟悉基于 Node.js 的构建工具时。
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM
的系统：
代码解析:
{{ 变量 }} ,插值表达式获取 data 数据
new Vue();创建 Vue 对象(VM 对象)
el:数据挂载的 dom 对象
Vue 会管理 el 选项命中的元素及其内部的后代元素
可以使用其他的选择器，但是建议使用 ID 选择器
可以使用其他的闭合标签，不能使用 HTML 和 BODY
data:{ message:’hello world’} model 数据
Vue 中用到的数据定义在 data 中
data 中可以写复杂类型的数据,如对象,数组
vue指令
指令带有前缀 v- 开头，以表示它们是 Vue 提供的特殊属性。
v-text与v-html
v-text作用是设置标签的文本内容
默认写法会替换全部内容，使用差值表达式可以替换指定内容
内部支持写表达式
v-html作用是设置元素的 innerHTML
内容中有 html 结构会被解析为标签
内部支持写表达式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 导入vue.js -->
<script src="js/v2.6.10/vue.js"></script>
</head>
<body>
<!--
{{message}}插入一个值，不会影响标签中的·其他内容，
v-text="message"与v-html="message"会覆盖标签内的内容
v-text="message"与{{message}}不可以读取标签
v-html="message"可以读取标签并且解析出来
-->
<div id="app">
<p>{{message}}</p>
<p v-text="message"></p>
<p v-html="message"></p>
</div>
<script>
var app=new Vue(
{
el:'#app',
data:{
message:"<b>你好</b>！"
}
}
)
</script>
</body>
</html>v-on 与v-model
v-on作用是为元素绑定事件
事件名不需要写 on 指令可以简写为@
绑定的方法定义在 methods 属性中,可以传入自定义参数
<input type="button" value="按钮" v-on:click="test(1,2)" />
<input type="button" value="按钮" @click="test" />
v-model作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据<---->表单元素的值 双向数据绑定
<input type="text" v-model="message"/>
<p>{{message}}</p>
data:{
message:""
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/v2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<!--
v-on：click点击事件
@click点击事件
v-model只可以用在表单标签把表单元素的值绑定到vue对象data中去，数据同步
-->
<input type="button" value="按钮1" v-on:click="test1()"/>
<input type="button" value="按钮2" @click="test2()"/>
<input type="text" v-model="message"/>
<input type="text" v-model="name"/>
<p>{{message}}</p>
<p>{{name}}</p>
</div>
<script>
var t=new Vue({
el:'#app',
data:{
message:"!",
name:"12233"
},
methods:{
test1(){
alert(this.message);
},
test2(){
alert(this.name);
}
}
})
</script>
</body>
</html>v-show
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title><script src="js/v2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-show只是通过改变display属性none使img隐藏 -->
<img v-show="isshow" src="img/1.png" alt="" />
<img v-show="isshow" src="img/3.png" alt="" />
<input type="button" v-on:click="test()" value="隐藏" />
</div>
<script>
var t = new Vue({
el:'#app',
data:{
isshow:true
},
methods:{
test(){
this.isshow=false;
}
}
})
</script>
</body>
</html>v-if
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title><script src="js/v2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-if直接让标签消失了，效率低 -->
<!-- v-if可以和v-else连用，但必须连着不可以有其他的标签 -->
<img v-if="isshow" src="img/1.png" alt="" />
<img v-if="isshow" src="img/3.png" alt="" />
<img v-else src="img/2.png" alt="" />
<input type="button" v-on:click="test()" value="隐藏" />
</div>
<script>
var t = new Vue({
el:'#app',
data:{
isshow:true
},
methods:{
test(){
this.isshow=false;
}
}
})
</script>
</body>
</html>v-bind
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/v2.6.10/vue.js"></script>
<style>
.active{
color:red;
}
</style>
</head>
<body>
<!-- 标签的属性值可以动态修改
v-bind：属性名="变量名" 一旦为属性添加了v-bind 值就是一个在data中定义的变量
还可以简写为：属性名
-->
<div id="app">
<div v-bind:class="{active:isactive}">wwww</div>
<img v-bind:src="imgarr[index]" :title="titlearr[index]" />
<input type="button" value="切换" @click="test()"/>
</div>
<script>
var t =new Vue({
el:'#app',
data:{
imgarr:["img/1.png","img/2.png","img/3.png"],
index:0,
titlearr:["1","2","3"],
isactive:true
},
methods:{
test(){
this.index++;
this.isactive=!this.isactive;
}
}
})
</script>
</body>
</html>v-for
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/v2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<ol>
<!-- v-for对标签内容进行循环 -->
<li v-for="use in users">
姓名：{{use.name}}
年龄：{{use.age}}
性别：{{use.gender}}
</li>
</ol>
</div>
<script>
var t = new Vue({
el:'#app',
data:{
users:[{name:"jak",age:10,gender:"man"},
{name:"jak",age:10,gender:"man"},
{name:"jak",age:10,gender:"man"}]
}
})
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
