自己总结JS
作者：互联网
- 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>
<meta charset="utf-8">
<title>测试vue的入门案例</title>
<!-- 1.引入vue.js //别人写好的-->
<script src="vue.js">
</script>
</head>
<body>
<!-- 2.准备渲染数据(区),获取vue的数据 -->
<div id="app">
{{msg}}<br />
{{name}}
</div>
<!-- 3.准备数据,将被数据渲染区来获取 -->
<!-- 这个自己写的 -->
<script>
//准备数据,创建对象
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看做第一次定义的属性值
{{XXX}}
在渲染区<input type=”text” v-model=”XXX”>
在new Vue({
el:”#app”,
data(){
return{
XXX:’YYY’,
}
}
}).//使用return,是为了属性只在这个vue里使用,不会污染到其他数据.
我们启动这个页面会在页面显示YYY这些属性值,
如果我们在这些定义 的输入框里写入新的值,那么页面显示的YYY,就会变成我们输入的值.
- v-html和v-text
XXX看做属性名,YYY看做第一次定义的属性值
{{XXX}}
在渲染区<div v-html=”XXX”></div>
<div v-text=”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 v-on:click="show()">单击按钮</button>
<button v-on:dblclick="test()" >双击按钮</button>
<button @dblclick="test()" >双击按钮</button>
<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-->根据组件找到组件定义的属性值,并输出)
标签：总结,vue,YYY,自己,JS,组件,new,js,属性 来源： https://blog.csdn.net/m0_63657363/article/details/122012337