cgb2107-day11-有解無憂

文章目錄

- 一,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檔案,實作松耦合

在這里插入圖片描述

創建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
在這里插入圖片描述

–2,使用步驟

匯入vue.js檔案(Vue框架提供的)

在這里插入圖片描述

入門案例

<!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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/298684.html

標籤：其他

上一篇：Web前端開發工程師知識體系_22_JavaScript core（三）

下一篇：雙鏈表【Java】