一、 Vue介紹
1、Vue 簡介
（1）官網：
? 英文官網
? 中文官網
2、介紹與描述
Vue是一套用來動態構建用戶界面的漸進式JavaScript框架- 構建用戶界面：把資料通過某種辦法變成用戶界面
- 漸進式：
Vue可以自底向上逐層的應用，簡單應用只需要一個輕量小巧的核心庫，復雜應用可以引入各式各樣的 Vue 插件 - 作者：尤雨溪
3、特點
- 采用組件化模式，提高代碼復用率、且讓代碼更好維護
2.宣告式編碼，讓編碼人員無需之間操作DOM，提高開發效率
3.使用虛擬DOM+優秀的Diff演算法，盡量復用DOM節點
4、與其他 JS 框架的關聯
- 借鑒 angular 的 模板 和 資料系結 技術
- 借鑒 react 的 組件化 和 虛擬DOM 技術
5、 Vue 周邊庫
- vue-cli：vue 腳手架
- vue-resource(axios)：ajax 請求
- vue-router：路由
- vuex：狀態管理（它是 vue 的插件但是沒有用 vue-xxx 的命名規則）
- vue-lazyload：圖片懶加載
- vue-scroller：頁面滑動相關
- mint-ui：基于 vue 的 UI 組件庫（移動端）
- element-ui：基于 vue 的 UI 組件庫（PC 端）
6、初識 Vue
（1）前置作業
- 給瀏覽器安裝[Vue Devtools](安裝 — Vue.js (vuejs.org))
- 標簽引入
Vue包 - （可選）阻止 vue 在啟動時生成生產提示
Vue.config.productionTip = false; - favicon 需要將頁簽圖示放在專案根路徑，重新打開就有了（shfit+F5 強制重繪）
（2）初識Vue:
- 想讓 Vue 作業，就必須創建一個 Vue實體 ，且要傳入一個配置物件
- root 容器里的代碼依然符合 html規范 ，只不過混入了一些特殊的 Vue語法
- root 容器里的代碼被稱為 Vue模板
- Vue 實體與容器是一一對應的
- 真實開發中只有一個 Vue實體 ，并且會配合著組件一起使用
- {{xxx}} 中的 xxx 要寫 js 運算式，且 xxx 可以自動讀取到 data 中的所有屬性
? 注意區分：js 運算式 和 js代碼（陳述句）
? a. 運算式：一個運算式會產生一個值，可以放在任何一個需要值的地方
? ①a
? ② a+b
? ③demo(1)
? ④x === y ? 'a' : 'b'
? b. js代碼（陳述句）
? ①if(){}
? ② for(){}
? 7.. 一旦 data 中的資料發生變化，那么模板中用到該資料的地方也會自動更新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初始Vue</title>
<!-- 引入Vue.js -->
<script type="text/javascript" src="https://www.cnblogs.com/DFshmily/archive/2022/10/js/vue.js"></script>
</head>
<body>
<!-- 初識Vue:
1. 想讓 Vue 作業，就必須創建一個 Vue實體 ，且要傳入一個配置物件
2. root 容器里的代碼依然符合 html規范 ，只不過混入了一些特殊的 Vue語法
3. root 容器里的代碼被稱為 Vue模板 -->
<!-- 準備好一個容器 -->
<div id="root">
<h1>Hello,{{name.toUpperCase()}},{{address}}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止啟動vue在啟動時生成生產提示
// 創建一個Vue實體
new Vue({
el:'#root' ,//el用于指定當前Vue實體為哪個容器服務，值通常為css選擇器字串
data:{//data用于指儲存資料,資料供el所指定的容器使用，值我們暫時先寫成一個物件
name:'DFshmily',
address:'China'
}
})
</script>
</body>
</html>
二、模板語法與資料系結
1、模板語法
Vue 模板語法包括兩大類
-
插值語法
功能：用于決議標簽體內容 寫法： {{xxx}} ，xxx 是 js 運算式，可以直接讀取到 data 中的所有區域
-
指令語法
功能：用于決議標簽（包括：標簽屬性、標簽體內容、系結事件…）
舉例： 或簡寫為 ，xxx 同樣要寫 js 運算式，可以直接讀取到 data 中的所有屬性
備注： Vue 中有很多的指令，且形式都是 v-xxx ，此處只是拿
v-bind舉例<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模板語法</title> <!-- 引入Vue.js --> <script type="text/javascript" src="https://www.cnblogs.com/DFshmily/archive/2022/10/js/vue.js"></script> </head> <body> <!-- 準備好一個容器 --> <div id="root"> <h1>模板語法</h1> <h3>你好，{{name}}</h3> <hr> <h1>指令語法</h1> <a v-bind:href="https://www.cnblogs.com/DFshmily/archive/2022/10/17/url" x="hello">點我開始學習</a><br> <a :href="https://www.cnblogs.com/DFshmily/archive/2022/10/17/url.toUpperCase()" x="school.hello">點我開始學習</a><br> <a :href="https://www.cnblogs.com/DFshmily/archive/2022/10/17/school.url" x="school.hello">點我開始{{school.name}}學習</a> </div> <script type="text/javascript"> Vue.config.productionTip = false; // 阻止啟動vue在啟動時生成生產提示 new Vue({ el:'#root', data:{ name:'DFshmily', url:'https://www.cnblogs.com/DFshmily', school:{ name:'Vue', url:'https://www.cnblogs.com/DFshmily/p/16799543.html', hello:'你好' } } }) </script> </body> </html>
2、資料系結
Vue 中有2種資料系結的方式
a. 單向系結 v-bind 資料只能從 data 流向頁面
b. 雙向系結 v-model 資料不僅能從 data 流向頁面，還可以從頁面流向 data
備注 ：a. 雙向系結一般都應用在表單類元素上，如 <input> <select> <textearea> 等
? b. v-model:value 可以簡寫為 v-model ，因為 v-model 默認收集的就是 value 值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板語法</title>
<!-- 引入Vue.js -->
<script type="text/javascript" src="https://www.cnblogs.com/DFshmily/archive/2022/10/js/vue.js"></script>
</head>
<body>
<!-- 準備好一個容器 -->
<div id="root">
<!-- 普通寫法 -->
單向資料系結：<input type="text" v-bind:value="https://www.cnblogs.com/DFshmily/archive/2022/10/17/name"><br>
雙向資料系結：<input type="text" v-model:value="https://www.cnblogs.com/DFshmily/archive/2022/10/17/name"><br>
<!-- 簡寫 -->
單向資料系結：<input type="text" :value="https://www.cnblogs.com/DFshmily/archive/2022/10/17/name"><br>
雙向資料系結：<input type="text" v-model="name"><br>
<!-- 如下代碼是錯誤的，因為v-model只能應用在表單元素（輸入類元素）上 -->
<h2 v-model:x="name">你好！</h2>
</div>
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止啟動vue在啟動時生成生產提示
// 創建一個Vue實體
new Vue({
el:'#root' ,
data:{
name:'DFshmily',
}
})
</script>
</body>
</html>
三、el與data的兩種寫法
el 與 data 的兩種寫法：
（1）el 有2種寫法
? a. 創建 Vue 實體物件的時候配置 el 屬性
? b. 先創建 Vue 實體，隨后再通過 vm.$mount('#root') 指定 el 的值
（2）data 有2種寫法 ：
? a. 物件式： data： { }
? b. 函式式： data() { return { } }
? 如何選擇：目前哪種寫法都可以，以后到組件時， data 必須使用函式，否則會報錯 一個重要的原則
由 Vue 管理的函式，一定不要寫箭頭函式，否則 this 就不再是 Vue實體 了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板語法</title>
<!-- 引入Vue.js -->
<script type="text/javascript" src="https://www.cnblogs.com/DFshmily/archive/2022/10/js/vue.js"></script>
</head>
<body>
<!-- 準備好一個容器 -->
<div id="root">
<h1>你好，{{name}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止啟動vue在啟動時生成生產提示
// el的兩種寫法
new Vue({
//el:'#root' , //第一種寫法
data:{
name:'DFshmily',
}
})
console.log(v)
v.$mount('#root') //第二種寫法
//設定時間的例子
setTimeout(()=>{
v.$mount('#root')
},1000)
//data的兩種寫法
new Vue({
el:'#root',
//data的第一種寫法：物件式
// data:{
// name:'DFshmily',
// }
//data的第二種寫法：函式式
data(){//等同于data:function(){}
console.log('@@@',this) //此處的this是Vue實體物件
return{
name:'DFshmily',
}
}
})
</script>
</body>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/516424.html
標籤：其他
下一篇：記錄--圖解 Vue 回應式原理