Vue是什麼? Vue是一套用於構建用戶界面的漸進式JavaScript框架 構建用戶界面:用vue往html頁面中填充數據 漸進式:Vue可以自底向上逐層的應用,從輕量小巧核心庫的簡單應用,到引入各式各樣插件的複雜應用。 框架:一整套現成的解決方案,遵守框架的規範,學習框架,就是學習框架中的規定用 ...
Vue是什麼?
Vue是一套用於構建用戶界面的漸進式JavaScript框架
-
構建用戶界面:用vue往html頁面中填充數據
-
漸進式:Vue可以自底向上逐層的應用,從輕量小巧核心庫的簡單應用,到引入各式各樣插件的複雜應用。
-
框架:一整套現成的解決方案,遵守框架的規範,學習框架,就是學習框架中的規定用法
誰開發的?
https://zhuanlan.zhihu.com/p/58335278
Vue特點
- 採用組件化模式,提高代碼復用率,且讓代碼更好維護。
- 聲明式編碼,開發人員無需操作DOM,提高開發效率。
Vue文檔
起步
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 準備好一個容器 -->
<div id="root">
<h1>Hello World!</h1>
<h1>Hello {{name}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;//阻止 vue 在啟動時生成生產提示
//創建Vue實例
//容器和實例 一一對應
const vm=new Vue({
el:'#root',//用於指定當前Vue為哪個容器服務,值通常為css選擇器字元串,不能基於body和html初始化
data:{//data中用於存儲數據,供el指定的容器使用
name:'張三',
}
})
</script>
</body>
</html>
el和data的第二種寫法:
<body>
<div id="app">{{username}}</div>
#導入腳本文件
<script src="vue.js"></script>
<script>
const vm=new Vue({
data(){ //此處this指向vue實例
return{
username:'zs'
}
}
})
vm.$mount=('#app')//掛載
//data:對象式和函數式,組件時只能用後者,不能用箭頭函數this會指向window而不是vue
</script>
</body>