自己总结JS

2024-02-16 22:28:58

JS是javascript是脚本语言.
Js是基于对象和事件驱动的脚本语言
基于对象:js也能象java一样通过new自定义js对象
事件驱动:js可以让网页动起来,什么时候要触发执行js代码
JS的特点:
直译式:不需要编译过程
弱类型:js不关系类型
JS出现位置:行内JS&内部JS&外部JS.
鼠标单击双击划过事件--点击YYYY,鼠标箭头弹出XXXX

<div οnclick=”alert(‘XXXX’)”>YYYY</div>;//单击事件
<div οndblclick=”alert(‘XXX’)”>YYYY</div>//双击事件
<div onmouseenter=”alter(XXXX)”>YYYYY</div>划过事件

这个弹出的YYY是页面上弹出来一个小窗口.

<script>JS代码写到这个区域</script>
JS里赋值用var(容易出现误差)或let(用这个最好)
Alert()是输出语句,--这是打开网页弹出的设置
Console.log()是输出语句,这在浏览器console这页面平台.F12.
运算符

A==B:字面值相等就是true;

A===B:绝对等于需要字面值和类型都一样才true;

%是取余;

/是5/2=2.5,结果需要小数.

Prompt():请客户输入数据

Typeof查看数据类型:是number-string------

创建数组

Let x=[1,2,3,4]

Let x=new Array(1,2,3,4);

遍历数组 for(let y in x){console.log(x[y])};

y是数组下标,要用 in

Js是弱类型语言,js数组可以存放各种类型的数据,java里的object[]也可以.js里的数组长度,随时可以变.

如:x[100]=89;

输出x的长度就是101;(console.log(x.length))

JS的函数

创建函数:

Let x=function(){};

Function x(){};

自定义对象方式:

Function x(){} let y=new x();//创建x对象

这个方法y.play(){};y是对象,play是方法.

Let x={ X:Y }//X是属性名 Y是属性值

这个的方法A:function(){};//A是函数名,

Josn:是一种轻量级的数据交互, 格式本质上就是一个子符串文本.

作用:用来完成前后端数据的交互格式存储管理数据

Let x=’”a”:”b”’;//字符串

Let x=’{“a”:”b”,”c”:”d”}’;//对象

Let x=’[{“a”:”b”,”c”:”d”},{“a”:”b”,”c”:”d”},{“a”:”b”,”c”:”d”}]’//数组

把josn串转换为js对象

Var y=JSON.parse(x);//将字符串数组 c 转换为js对象y,

第一个{}下标是0 ,输出语句是console.log(y[0].a),输出b.

把js对象转换为字符串

let e1={

Name:”你爸爸”,

Age:20

}

Let e=JSON.stringify( e1);

转换以后e={"name":"你爸爸","age":20}

DOM

Document对象

window.document---获取Document对象
getElementById()---通过id属性的值,获取元素,只有一个
getElementsByName()---通过name属性的值,获取元素,会得到多个,存入数组
getElementsByClassName()---通过class属性的值,获取元素,会得到多个,存入数组
getElementsByTagName()---通过标签名,获取元素,会得到多个,存入数组
title--获取标题
innerHtml--获取内容
innerText--获取内容

var Z= document.getXXXX('YYYY');

YYY是渲染区<div >里的内容器的标记,id class name,XXX是方法,

通过YYY利用方法将数据存入Z数组.

输出数据:console.log(Z[1].innerText);//console.log(Z[1].innerHtml);

修改得到的数组:Z.innerHTML='我变了';//Z.innerText='我变了';

Vue

是一个基于JavaScript的渐进式前端框架.其核心思想是数据驱动,组件化的前端开发.
是一个轻量级的mvvm框架,双向绑定,数据动态更新,gzip后大小只有20k+
原生html页面是通过js操作的是dom,而vue.js操作的是数据.
和传统的前端开发开发的关注点完全不同,传统的方式关注的是象document结构的api,而vue关注的是数据
优点显而易见,从而屏蔽了使用复杂晦涩难记的dom结构api
Vue是一个用于构建用户界面的渐进式spa(single page applications)

单一页面框架.从一开始就被设计为按需搭建.

在html文件中:

在<title></title>后面插入

vue.js//<script src=”vue.js”></script>,表示路径

vue.js系统准备好的,把附件拉入到创建的文件里,
在<body>XXX</body>,XXX区域准备数据渲染区,先整标签创建属性id=”SB”,//属性赋值SB,下面调用
内容YYYY写到2个花括号里{{YYY}}.
在<body>XXX</body>,

XXX区域创建<script>AAA</script>,

在AAA区域创建vue对象,

New Vue({

el:”#SB”,//el后写上面创建的id值,前面写#号

Data:{

YYYY:”CCCC”,

//YYY为属性名上面花括号里的内容,CCC为属性值

}

})

具体如下

<html>

<head>

<title>测试vue的入门案例</title>

</script>

</head>

<body>

{{msg}}<br />

</div>

//准备数据,创建对象

new Vue({

//挂载点:即将在这个位置展示vue数据

el:"#app", //element,元素挂载点--使用了CSS里的id选择器

//数据:给挂载点准备数据

data:{

msg :'我是你爸爸888,养你这么大,你还不听话,',

name :'---爸爸的名字是ddy'

}

})

</script>

</body>

</html>

算术运算符

如果{{}}写的是 + - * / %的算式,在vue对象的data里,可以什么也不用写
如果{{}}写的是三目运算符,或者字符串的相关方法(求长度,拼接,截取),在vue对象的data里,给三目运算赋值,给字符串赋值;

方法

如果{{}}写的是个方法,如{{ show() }};

那么在new Vue({DDD})对象的DDD区域methods:{EEE}的EEE区域要详细写show方法;
show:function(){FFFF};其中function可以省略写成show(){FFF};
FFF区域结果的输出可以使用3中方法,
alert()是打开页面时弹出,
console.log()是输出到控制台
Return是输出到页面.
方法必须写在methods代码段中;
方法体中访问数据代码段中声明的变量,前面加this;
方法和属性声明方式的差异在于function(){};
方法和属性在调用时的差异是{{属性名}}{{方法名()}},名称后加小括号

解析数据--数组--对象的属性

如果{{}}写的是对象的属性和对象的方法;那么new vue({})里的data:{}的花阔里对对象的属性和方法进行定义;

如:{{p.name}} {{p.coding()}}

定义:new vue({

el:”#id值”,

Data:{

P:{

Name:””,//定义属性值

Coding(){

Alter()或者console()或者return()//输出语句

}

})

如果是josn数组--{{list[0].name}}{{list}}

new vue({

el:”#id值”,

Data:{

list:[{"name":"jack","age":"10"},{"rose'":"88"}]

}

如果是char数组-{{hobby[0]}}{{hobby}}

new vue({

el:”#id值”,

Data:{

hobby:[236,589,"死球",6,5,4]

}

三种data方法的书写

new vue({

el:”#id值”,

Data:{}//第一种

Data:function(){}//第二种

Data(){}

};

高级用法-v-命令

Vue指令,是一些特殊指令,有标识 v-*;

使用方式:在标签上,当作一个属性来用

常用指令:v-model v-if v-for v-bind ----

v-cloak指令用来解决闪现问题,给数据渲染区添加v-cloak,选中有v-cloak属性的元素,然后隐藏.

用<style> </style>标签写 [v-cloak]{display:none;}

在渲染区,给元素赋值, <div id=”app” v-cloak>

v-model是双向绑定数据

XXX看做属性名,YYY看做第一次定义的属性值

在渲染区<input type=”text” v-model=”XXX”>

在new Vue({

el:”#app”,

data(){

return{

XXX:’YYY’,

}

}).//使用return,是为了属性只在这个vue里使用,不会污染到其他数据.

我们启动这个页面会在页面显示YYY这些属性值,

如果我们在这些定义的输入框里写入新的值,那么页面显示的YYY,就会变成我们输入的值.

v-html和v-text

XXX看做属性名,YYY看做第一次定义的属性值

在渲染区<div v-html=”XXX”></div>

在new Vue({

el:”#app”,

data(){

return{

XXX:’YYY’,

}

YYY是带有html标签的属性值,v-html得到去除标签后的数据.v-text是获取YYY所有的数据.

v-for

指令是循环获取数据.

V-for加在行上,就会循环产生多行.

如果是数组:<p v-for=”X,Y in Z”>;X代表数组里的数据,Y代表下标,Z代表数组的名称.

V-on

指令给元素添加vue的事件,

v-on可以简写成一个@

Click是单击,dblclick是双击.

<button @click="sum()">点赞{{count}}</button>

直接调的方法需要放到methods:{}里,与data()平级.

点赞在的那个方法,this.count++,也需要在data里用count数据接收.

V-bind

这个没搞明白

Vue组件

是vue框架提供的恶一个功能,扩展了HTML的标签,我们象使用HTML标签一样,直接使用vue组件就可以,可以提高代码的复用性.

分类:

全局组件可以被多个vue对象使用,封装了前端的代码提高了复用性,放在new vue(),之前的,表示所用对象都能用.

局部组件:只能在当前的vue对象(数据渲染区)使用

全局组件:vue.component(组件名.组件的功能)

局部组件:给vue对象添加新的属性components.

全局组件:我们要现在<script></script>里,new Vue对象的前,创建一个与之同级的全局组件,

如

<script>
Vue.component(‘XXX’,{ template:’YYY’})
New Vue({el:”#id值”})
</script>
XXX是全局组件的标签,YYY是标签代表的属性值
我们在渲染区利用id值调用全局组件.

局部组件:

局部组件需要在new Vue({})里来创建,

如:

New Vue({ el:”#id值”,

Components:{ XXX:{ template:’YYY’

}}})
XXX是局组件的标签,YYY是标签代表的属性值

路由

路由排列顺序
插入vue.js
插入vue-router.js
渲染区<div>
路由组件
创建的路由对象
创建的new vue({})对象

根据用户的请求,决定交给哪个组件来处理这次请求.
他的关键字<router-link>----<router-view>
开发步骤:
要先导入vue.js文件.
在导入vue-router.js文件.

在new vue({})中,写入路由:router;
创建路由对象:let router=new VueRouter({
Routes:[

{path:"/XXX",component:YYY},

]}) --//XXX是写到渲染区的路径,YYY是路由组件.

创建路由组件

let YYY={ template:'<h1>我是帮助页</h1>'

使用路由

在渲染区,找到写入router的这个new vue({})对象,对应的id值.在此渲染区写入

<router-link to="/XXX">帮助页</router-link>

<router-view></router-view>

启动页面,会显示帮助页三个字.点击帮助页,会出现我是帮助页这几个字.

(点击后-->new vue({})对象里的router属性-->找创建的router对象-->在根据路径”/XXX”找到组件YYY-->根据组件找到组件定义的属性值,并输出)

码农公寓

Document对象

相关文章