文章目录
一,复习
–1,测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>复习</title>
<script>
// 创建json对象 的串
let x = '{"name":"tony","age":"20"}' ;
//把一个json串(对象/数组)变成JS对象
let xobj = JSON.parse(x);
console.log(xobj);//{name: 'tony', age: '20'}
// 1,创建JS对象并调用
//方式2:
let u2 = {
name : 'tony' ,
age : 20 ,
study : function(){
return this.name+this.age ;
}
}
console.log(u2.name+u2.age);
let aa = u2.study();
console.log(aa);
//方式1:
function User(){
}
let u = new User();
u.name='tony';
u.age=20;
u.study=function(){
return this.name+this.age ;
}
console.log(u.name+u.age);
let a = u.study();
console.log(a);
</script>
</head>
<body>
</body>
</html>
二,JSON
–1,测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 JSON对象</title>
<script>
//1,JSON对象用来把 json字符串 和 js对象互转
//JSON.parse():json字符串 和 js对象,
//好处是方便的解析对象中的属性值
//JSON.stringify():js对象 和 json字符串,
//好处是方便的处理字符串,顺序可以把数据发给后端
//需求:定义一个json串
let a = '{"name":"tony","age":"20"}';
let b = JSON.parse(a);//json字符串 和 js对象
console.log(b.name);//解析name属性的值
console.log(b.age);//解析age属性的值
//需求:定义一个js对象
let c = {
name:"rose",age:30};
let cstr = JSON.stringify(c);//把js对象转成json字符串
console.log(cstr.length);//求长度
console.log(cstr.concat(100));//拼接
console.log(cstr.substring(1,5));//截取[1,5)
</script>
</head>
<body>
</body>
</html>
三,DOM
–1,概述
是由JS提供的技术, 用来像CSS的选择器一样, 使用JS提供的一套API, 就可以选中网页中的各种元素
会把HTML网页翻译成一个Document.
–2,Document对象
window.document---获取Document对象
getElementById()---通过id属性的值,获取元素,只有一个
getElementsByName()---通过name属性的值,获取元素,会得到多个,存入数组
getElementsByClassName()---通过class属性的值,获取元素,会得到多个,存入数组
getElementsByTagName()---通过标签名,获取元素,会得到多个,存入数组
title--获取标题
innerHtml--获取内容
innerText--获取内容
–3,测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 DOM</title>
</head>
<body>
<div id="d1" onclick="test1()">我是div1</div>
<div class="a">我是div2</div>
<div name="b">我是div3</div>
<p class="a">我是p1</p>
<p class="a">我是p2</p>
<p name="b">我是p3</p>
<span>我是span1</span>
<span>我是span2</span>
<script>
//练习6:点击我是div1时,打印name="b"的第一个元素的内容
function test1(){
var x = document.getElementsByName("b");
//x是数组,存了多个数据,可以用下标操作数据
console.log(x[0].innerHTML);
//练习7:点击我是div1时,修改 我是span2 的内容
var y = document.getElementsByTagName("span");
//y是数组,存了多个数据,可以用下标操作数据
y[1].innerHTML='我也变了....';
}
//1,利用DOM技术,操作网页中的元素
//练习5:修改id="d1"的元素的内容
var e = document.getElementById('d1');
e.innerHTML='我变了';
// e.style.color='red';//修改样式
//了解:innerHTML和innerText的区别?前者能解析HTML标签后者不解析
//练习4:获取class="a"的第二个的内容
var d = document.getElementsByClassName("a");
console.log( d[1].innerHTML );
//练习3:获取id="d1"的元素的内容
var c = document.getElementById("d1");
console.log( c.innerHTML );
//练习1:获取id="d1"的元素
var a = window.document.getElementById("d1");
console.log(a);
//练习2:获取class="a"的元素
var b = document.getElementsByClassName("a");
console.log(b);
</script>
</body>
</html>
–4,把HTML和JS代码分离
HTML中引入js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 DOM</title>
</head>
<body>
<div id="d1" onclick="test1()">我是div1</div>
<div class="a">我是div2</div>
<div name="b">我是div3</div>
<p class="a">我是p1</p>
<p class="a">我是p2</p>
<p name="b">我是p3</p>
<span>我是span1</span>
<span>我是span2</span>
<!-- 引入js文件 -->
<script src="1.js"></script>
</body>
</html>
创建js文件
//练习6:点击我是div1时,打印name="b"的第一个元素的内容
function test1(){
var x = document.getElementsByName("b");
//x是数组,存了多个数据,可以用下标操作数据
console.log(x[0].innerHTML);
//练习7:点击我是div1时,修改 我是span2 的内容
var y = document.getElementsByTagName("span");
//y是数组,存了多个数据,可以用下标操作数据
y[1].innerHTML='我也变了....';
}
//1,利用DOM技术,操作网页中的元素
//练习5:修改id="d1"的元素的内容
var e = document.getElementById('d1');
e.innerHTML='我变了';
// e.style.color='red';//了解修改样式
//了解:innerHTML和innerText的区别?前者能解析HTML标签后者不解析
//练习4:获取class="a"的第二个的内容
var d = document.getElementsByClassName("a");
console.log( d[1].innerHTML );
//练习3:获取id="d1"的元素的内容
var c = document.getElementById("d1");
console.log( c.innerHTML );
//练习1:获取id="d1"的元素
var a = window.document.getElementById("d1");
console.log(a);
//练习2:获取class="a"的元素
var b = document.getElementsByClassName("a");
console.log(b);
四,Vue
–1,概述
是一个轻量级的 MVVM的框架.可以使用数据驱动/双向绑定,组件化,路由…
特点:
1, 综合了HTML CSS JS 技术
2, 渐进式的框架: 按需配置, vue.js + ???
3, 优化了DOM操作网页元素的方式, 使用了CSS的选择器
使用步骤:
1, 在网页中引入 vue.js 文件
–2,入门案例
<!DOCTYPE html>
<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}}
</div>
<!-- 3.准备数据,将被数据渲染区来获取 -->
<script>
//准备数据
var a = {
msg : 'hello vue~'
}
//创建对象
new Vue({
//挂载点:即将在这个位置展示vue数据
el : "#app" , //element元素,使用了CSS里的id选择器
//数据:给挂载点准备数据
data : a
})
</script>
</body>
</html>
–3,MVVM
是Vue框架的一种设计思想,实现代码间的松耦合.
–4,改造入门案例
<!DOCTYPE html>
<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}}
<h1> {
{name}} </h1>
</div>
<h1> {
{name}} </h1>
<!-- 3.准备数据,将被数据渲染区来获取 -->
<script>
//创建对象
let vm = new Vue({
//挂载点:即将在这个位置展示vue数据
el : "#app" , //element元素,使用了CSS里的id选择器
//数据:给挂载点准备数据
data :{
//准备数据
msg : 'hello vue~',
name: 'tony'
}
})
</script>
</body>
</html>
–5,练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue的练习</title>
<script src="vue.js"></script>
</head>
<body>
<div id="a">
姓名: {
{name}}
年龄: {
{age}}
</div>
<script>
new Vue({
el:"#a",
data:{
name:'tony',
age:20
}
})
</script>
</body>
</html>
五,Vue的基础语法
–1,运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js"></script>
</head>
<body>
<div id="a">
算术运算符: {
{3+2}} {
{3-2}} {
{3*2}} {
{3/2}} {
{3%2}}
三元运算符: {
{age > 18 ? '成年人' : '未成年'}}
<div>字符串的内容是: {
{str}}</div>
<div>字符串的长度是: {
{str.length}}</div>
<div>字符串拼接后: {
{str.concat(100)}}</div>
<div>字符串截取后: {
{str.substring(1,3)}}</div>
</div>
<script>
new Vue({
el:"#a",
data:{
age:10,
str:'hello'
}
})
</script>
</body>
</html>
–2,创建函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js"></script>
</head>
<body>
<div id="a">
算术运算符: {
{3+2}} {
{3-2}} {
{3*2}} {
{3/2}} {
{3%2}}
三元运算符: {
{age > 18 ? '成年人' : '未成年'}}
<div>字符串的内容是: {
{str}}</div>
<div>字符串的长度是: {
{str.length}}</div>
<div>字符串拼接后: {
{str.concat(100)}}</div>
<div>字符串截取后: {
{str.substring(1,3)}}</div>
<div>调用函数:{
{show()}}</div>
<div>函数传参:{
{add(1,2)}}</div>
<div>函数的返回值:{
{sum(1,2)}}</div>
</div>
<script>
new Vue({
el:"#a",
data:{
age:10,
str:'hello'
}
,
methods:{
//vue里创建函数,必须放在methods里
//函数名:函数的声明
show(){
alert(1)
},
add(x,y){
alert(x+y)
},
//sum:function(x,y){
sum(x,y){
//效果同上,简写形式
return x+y;
}
}
})
</script>
</body>
</html>
–3,解析复杂的数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试vue解析复杂的数据</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<h1>vue解析简单的数据: {
{name}} {
{age}}</h1>
<h1>vue解析对象的数据: {
{person.name}} {
{person.age}}
{
{person.coding()}} {
{person.tostring()}}
</h1>
<h1>vue解析数组的数据:{
{hobby}} {
{hobby[0]}} {
{hobby[1]}} </h1>
<h1>vue解析数组的数据:{
{list}} {
{list[0]}} {
{list[1]}}
{
{list[0].name}} {
{list[1].name}}
</h1>
</div>
<script>
new Vue({
el:"#app",
data:{
name : "jack",
age : 20,
//对象名:声明
person : {
name : "rose",
age : 18,
coding:function(){
alert(100)
},
tostring:function(){
return this.name+this.age ;
}
},
hobby:["足球","篮球"],
list:[
{
name:"jack",age:20},
{
name:"rose",age:10}
]
}
})
</script>
</body>
</html>
–4,vue的data的三种写法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue里data的三种写法</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<h1>解析对象的数据: {
{person.name}} {
{person.age}}</h1>
<h1>解析数组的数据: {
{hobby[0]}} {
{hobby[1]}}</h1>
</div>
<script>
new Vue({
el:"#app",
//data的数据用函数方式返回:将来方便组件化的思想
//data:function(){
data(){
//效果同上,简写形式
return {
person:{
name:'tony',
age:20
},
hobby:["唱","跳rap"]
}
}
})
</script>
</body>
</html>