文章目錄
- 一、Vue概述
- 二、基本使用
-
- 2.1 原生JS
- 2.2 jQuery
- 2.3 Vue.js基本步驟
- 2.3.2 Vue練習
- 三、JS練習
一、Vue概述
Vue：漸進式JavaScript架構
聲明式渲染（基礎）
元件系統（通用代碼）
用戶端路由（單頁面應用：頁面局部更新、浏覽器曆史回退功能等）
集中式狀态管理（項目規模比較大有大量的業務資料，為了友善管理可以使用Vuex子產品）
項目建構（前端項目獨立開發、測試、部署上線）
官網：https://cn.vuejs.org/
易用：熟悉HTML、CSS、JavaScript知識後，可快速上手Vue
靈活：在一個庫和一套完整架構之間自如伸縮
高效：20kB運作大小，超快虛拟 DOM
二、基本使用
各開發模式對比
2.1 原生JS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>原生JS</title>
</head>
<body>
<div id="msg"></div>
</body>
<script>
var msg = "hello,world;";
var div = document.getElementById('msg');
div.innerHTML=msg;
</script>
</html>
2.2 jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery</title>
</head>
<body>
<div id="msg"></div>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script>
var msg = 'hello,world;';
$('#msg').html(msg);
</script>
</html>
2.3 Vue.js基本步驟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue</title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'Hello,world;'
}
})
</script>
</html>
2.3.2 Vue練習
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>練習2-4</title>
</head>
<body>
<div id="app">
<p>大家好，我是{{name}}</p>
<p>我今年{{age}}歲</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
name:'張三',
age:"30"
}
})
</script>
</html>
三、JS練習
JavaScript 控制表單 - 周遊表單
提示：HTML表單對象（Form）中定義有一個elements集合屬性，可以傳回表單中所有元素的數組集合。
通過for循環就可以實作周遊表單中全部項目了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS周遊表單</title>
</head>
<body>
<div style="margin: 0 auto;">
<form id="form" action="#">
<h2>JavaScript控制表單-周遊表單</h2>
<hr>
<div>FirstName: <input type="text" name="fname"></div>
<div>lastName: <input type="text" name="lname"></div>
<input type="submit" value="Submit">
</form>
</div>
</body>
<script>
var form = document.getElementById('form');
var text='';
for(var i=0;i<form.length;i++){
text += 'element type：'+form.elements[i].type+',element name：'+form.elements[i].name + '\n';
}
console.log(text);
</script>
</html>