Vue是什么？
Vue是一套用于構建用戶界面的漸進式JavaScript框架
-
構建用戶界面：用vue往html頁面中填充資料
-
漸進式：Vue可以自底向上逐層的應用，從輕量小巧核心庫的簡單應用，到引入各式各樣插件的復雜應用，
-
框架：一整套現成的解決方案，遵守框架的規范，學習框架，就是學習框架中的規定用法
誰開發的？
https://zhuanlan.zhihu.com/p/58335278
Vue特點
- 采用組件化模式，提高代碼復用率，且讓代碼更好維護，
- 宣告式編碼，開發人員無需操作DOM，提高開發效率，
Vue檔案
https://v2.cn.vuejs.org/
https://cn.vuejs.org/
起步
<!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="https://www.cnblogs.com/gfhcg/archive/2023/03/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="https://www.cnblogs.com/gfhcg/archive/2023/03/17/vue.js"></script>
<script>
const vm=new Vue({
data(){ //此處this指向vue實體
return{
username:'zs'
}
}
})
vm.$mount=('#app')//掛載
//data:物件式和函式式，組件時只能用后者，不能用箭頭函式this會指向window而不是vue
</script>
</body>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/547211.html
標籤：其他
上一篇：前端設計模式——組合模式