cgb2107-day11 朱雀 2021-09-11 02:06 325阅读 0赞 ### 文章目录 ### * * 一,json * * \--1,概述 * \--2,测试 * \--3,优化HTML 和 JS文件,实现松耦合 * * 创建js文件 * 修改html文件 * 二,Vue * * \--1,概述 * \--2,使用步骤 * * 导入vue.js文件(Vue框架提供的) * 入门案例 * 改造入门案例 * 三,Vue的语法 * * \--1,基础语法 * \--2,vue的方法 * \--3,vue解析各种形式的data * \--4,vue的data里定义函数 ## 一,json ## ### –1,概述 ### 是一个字符串,用来完成 前后端数据交互的 格式. 是一种轻量级的数据交换格式,而且数据格式看起来很简洁 JSON对象: 可以把 json字符串 和 js对象 互转 1, json字符串 转成 js对象: 方便的通过对象,调用属性 函数 JSON.parse(json字符串) :接受一个json字符串作为参数,返回 js对象 2, js对象 转成 json字符串: 方便对字符串操作(拼接,长度,截取…) JSON.stringify(js对象) : 接受一个js对象,返回一个 json字符串 ### –2,测试 ### <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试 JSON对象</title> <!-- JSON对象用来完成 js对象和json字符串的 互转 --> <script> //定义函数,点击div1时触发 function test1(){ // 1. json字符串,对象的写法 var a ='{"name":"jack","age":"20"}'; // 2. json字符串,数组的写法 var b ='[{"name":"tony","age":"20"},{"name":"rose","age":"30"}]'; //3. JSON对象 //3.1 json字符串的转成js对象:目的是方便的调用对象封装的属性 var jsobj = JSON.parse(a);//json字符串的转成js对象 console.log(jsobj);//{name: 'jack', age: '20'} console.log(jsobj.name);//获取对象里name属性的值 console.log(jsobj.age);//获取对象里age属性的值 //需求: 利用dom技术,把解析到的name属性的值,展示在id="d2"位置 document.getElementById("d2").innerHTML=jsobj.name ; //练习: var jsobj2 = JSON.parse(b);//json字符串的转成js对象 console.log(jsobj2);//类似于数组结构 console.log(jsobj2[1].name);//获取到数组里第二个对象的name属性的值 console.log(jsobj2[0].age);//获取到数组里第一个对象的age属性的值 //需求: 利用dom技术,把解析到的20,展示在id="d3"位置 document.getElementById("d3").innerHTML = jsobj2[0].age ; //3.2 js对象转成json字符串:目的是方便的操作字符串,也可以发送给服务器 //创建js对象 var obj = { name:"jack" , age:20 } ; var jsonstr = JSON.stringify(obj);//js对象转成json字符串 console.log(jsonstr);//得到json字符串 console.log(jsonstr.length);//获取字符串的长度 console.log(jsonstr.concat('hello'));//拼接字符串 } </script> </head> <body> <div id="d1" onclick="test1()">我是div1,点我</div> <div id="d2">我是div2</div> <div id="d3">我是div3</div> </body> </html> ### –3,优化HTML 和 JS文件,实现松耦合 ### ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAY2dibHB4_size_15_color_FFFFFF_t_70_g_se_x_16] #### 创建js文件 #### //定义函数,点击div1时触发 function test1(){ // 1. json字符串,对象的写法 var a ='{"name":"jack","age":"20"}'; // 2. json字符串,数组的写法 var b ='[{"name":"tony","age":"20"},{"name":"rose","age":"30"}]'; //3. JSON对象 //3.1 json字符串的转成js对象:目的是方便的调用对象封装的属性 var jsobj = JSON.parse(a);//json字符串的转成js对象 console.log(jsobj);//{name: 'jack', age: '20'} console.log(jsobj.name);//获取对象里name属性的值 console.log(jsobj.age);//获取对象里age属性的值 //需求: 利用dom技术,把解析到的name属性的值,展示在id="d2"位置 document.getElementById("d2").innerHTML=jsobj.name ; //练习: var jsobj2 = JSON.parse(b);//json字符串的转成js对象 console.log(jsobj2);//类似于数组结构 console.log(jsobj2[1].name);//获取到数组里第二个对象的name属性的值 console.log(jsobj2[0].age);//获取到数组里第一个对象的age属性的值 //需求: 利用dom技术,把解析到的20,展示在id="d3"位置 document.getElementById("d3").innerHTML = jsobj2[0].age ; //3.2 js对象转成json字符串:目的是方便的操作字符串,也可以发送给服务器 //创建js对象 var obj = { name:"jack" , age:20 } ; var jsonstr = JSON.stringify(obj);//js对象转成json字符串 console.log(jsonstr);//得到json字符串 console.log(jsonstr.length);//获取字符串的长度 console.log(jsonstr.concat('hello'));//拼接字符串 } #### 修改html文件 #### <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试 JSON对象</title> <!-- JSON对象用来完成 js对象和json字符串的 互转 --> <!-- 引入一个外部的js文件 --> <script src="1.js"></script> </head> <body> <div id="d1" onclick="test1()">我是div1,点我</div> <div id="d2">我是div2</div> <div id="d3">我是div3</div> </body> </html> ## 二,Vue ## ### –1,概述 ### 是一个轻量级 渐进式的 前端框架 特点: 数据驱动 MVVM 组件化 好处: 封装了DOM操作元素的API ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAY2dibHB4_size_20_color_FFFFFF_t_70_g_se_x_16] ### –2,使用步骤 ### #### 导入vue.js文件(Vue框架提供的) #### ![在这里插入图片描述][d085bfcd4bc343ff8ba99329889a0d31.png] #### 入门案例 #### <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试 Vue框架</title> <!-- 1. 引入外部的vue.js文件 --> <script src="vue.js"></script> </head> <body> <!-- 2. 准备数据渲染区 { {插值表达式}}--> <div id="app"> { {msg}} </div> <!-- 3. 使用Vue准备数据 --> <script> // 3.2 准备即将要在浏览器展示的数据 var d = { msg:'hello vue~' } // 3.1 创建Vue对象 new Vue({ //element的简称,即将把准备好的数据 渲染 到指定区域--挂载点 //#app 是利用CSS的id选择器,选中了一个HTML元素 el:"#app", data: d //准备即将要在浏览器展示的数据 }) </script> </body> </html> #### 改造入门案例 #### <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试 Vue框架</title> <!-- 1. 引入外部的vue.js文件 --> <script src="vue.js"></script> </head> <body> <!-- 2. 准备数据渲染区 { {插值表达式}}--> <div id="app"> <h2>{ {msg}}</h2> <h1>{ {name}}</h1> </div> { {msg}} <!-- 不是Vue指定的挂载点的范围,不能解析Vue代码 --> <!-- 3. 使用Vue准备数据 --> <script> // 3.1 创建Vue对象 new Vue({ //element的简称,即将把准备好的数据 渲染 到指定区域--挂载点 //#app 是利用CSS的id选择器,选中了一个HTML元素 el:"#app", data: { // 3.2 准备即将要在浏览器展示的数据 msg:'hello vue~', name:"jack" } }) </script> </body> </html> ## 三,Vue的语法 ## ### –1,基础语法 ### <!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"> Vue运算符: 加法:{ {3+2}} 减法:{ {3-2}} 乘法:{ {3*2}} 除法:{ {3/2}} 取余:{ {3%2}} 三元运算符:{ { 1 > 2 ? 'yes':'no' }} <!-- 字符串操作: 求长度,拼接,截取 --> 字符串:{ {name}} 长度:{ {name.length}} 拼接:{ {name.concat(666)}} 截取:{ {name.substring(2)}} </div> <!-- 3.创建Vue对象 --> <script> new Vue({ el:"#app",//指定挂载点,把数据展示在指定位置(利用了css选择器) data:{ //准备要展示的数据 name:"jack" } }) </script> </body> </html> ### –2,vue的方法 ### <!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"> 调用函数:{ {save()}} { {add(1,2)}} </div> <!-- 3.创建Vue对象 --> <script> new Vue({ el:"#app",//指定挂载点,把数据展示在指定位置(利用了css选择器) data:{ //准备要展示的数据 name:"jack" } , methods:{ //添加方法 save:function(){ console.log(100); }, add:function(a,b){ console.log(a+b); } } }) </script> </body> </html> ### –3,vue解析各种形式的data ### <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试 Vue解析各种形式的data</title> <script src="vue.js"></script><!--1. 引入vue.js文件 --> </head> <body> <p id="p1"> <!-- 2.准备了数据渲染区--> { {name}} 获取对象的属性值:{ {person.name}} { {person.age}} 调用对象的函数(必须有小括号的标志): { {person.eat()}} { {person.sleep(10)}} <br /> 调用数组里的数据:{ {arr}} 根据下标获取组里的数据:{ {arr[0]}} { {arr[0].age}} </p> <script> <!-- 3.创建Vue对象--> new Vue({ el:"#p1", //挂载点 data:{ //准备数据 name:'jack', person:{ //data的数据准备一个js对象 name:'rose', age:20, eat:function(){ console.log(200); }, sleep:function(a){ console.log(a); } } , arr : [ //data的数据准备一个js数组 { name:"jack", age:20 } , { name:"rose", age:30 } ] } }) </script> </body> </html> ### –4,vue的data里定义函数 ### <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试 Vue的data中写js函数</title> <!--1. 引入vue.js文件 --> <script src="vue.js"></script> </head> <body> <!-- 2.准备了数据渲染区--> <div id="app"> { {msg}} </div> <!-- 3.创建Vue对象--> <script> new Vue({ el:"#app",//挂载点 // data:function(){//准备展示的数据 data(){ //简写 return { //返回JS对象 msg:'hello vue' } } }) </script> </body> </html> [watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAY2dibHB4_size_15_color_FFFFFF_t_70_g_se_x_16]: /images/20210911/b09cbaa65a274c099128f4589636e9cb.png [watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAY2dibHB4_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20210911/5118953b0da74dd5b7cc679b5c6be2a1.png [d085bfcd4bc343ff8ba99329889a0d31.png]: /images/20210911/74b0e492e5684551991316a922f417bd.png
相关 cgb2107-day08 文章目录 一,模拟 服务器解析浏览器发来的数据 二,CSS选择器 \--1,概述 \--2,简单选择器 旧城等待，/ 2021年09月11日 03:36/ 0 赞/ 283 阅读
相关 CGB2107-DAY11总结复习 DAY11 浮点数据运算不精确解决方案 BigDecimal(String) 1. 注意构造函数的参数是String,不是double,传double还会不精确 浅浅的花香味﹌/ 2021年09月09日 10:42/ 0 赞/ 218 阅读
小鱼儿
我就是我
我不是女神ヾ
╰+攻爆jí腚メ
傷城~
朱雀
还没有评论，来说两句吧...