個人簡介
👩🚀
作者簡述
：大家好，我是陳春波【花名：水香木魚】，來自于東北【黑龍江】慶安小城😜
🌏
：木秀于林風或許會摧，堆高于岸流或許湍，但是，初心不改，奮鬥不息。🔥人生格言
1、CDN引入
<script src="https://unpkg.com/vue@next"></script>
案例：
<body>
<div id="app">
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
//vue相關代碼
const why = {
template: '<h1>歡迎來到vue3</h1>'
}
//将app挂載到id為app的div上
const app = Vue.createApp(why);
app.mount('#app')
</script>
</body> 2、本地下載下傳與引入
vue@next 官網
①打開官網後ctrl+A 複制源代碼
②本地建立vue3.js
③将複制的源代碼粘貼到vue3.js當中
④使用
<body>
<script src="./js/vue3.js"></script>
</body> 3、計數器案例
① 原生寫法
原生寫法
<body>
<div style="text-align: center;">
<h1 class="counter">0</h1>
<button class="increment">+1</button>
<button class="decrement">-1</button>
</div>
<script src="./js/vue3.js"></script>
<script>
//擷取DOM上的所有元素
const counterEl = document.querySelector('.counter')
const incrementEl = document.querySelector('.increment')
const decrementEl = document.querySelector('.decrement')
//2.定義變量
let counter = 0;
counterEl.innerHTML = counter
//監聽按鈕點選事件
incrementEl.addEventListener('click', () => {
// 加1
counter += 1;
counterEl.innerHTML = counter
})
decrementEl.addEventListener('click', () => {
// 減1
counter -= 1;
counterEl.innerHTML = counter
})
</script>
</body> ② vue寫法
vue寫法
<body>
<div id="app"></div>
<script src="./js/vue3.js"></script>
<script>
Vue.createApp({
template: `
<div style="text-align: center">
<h1>{{msg}}</h1>
<h1>{{counter}}</h1>
<button @click="increment">+1</button>
<button @click="decrement">-1</button>
</div>
`,
data: function () {
return {
msg: 'Hello Word 電腦',
counter: 59
}
},
//定義方法
methods: {
increment() {
this.counter += 1
},
decrement() {
this.counter -= 1
}
}
}).mount('#app')
</script>
</body> 4、聲明式和指令式：
原生開發和Vue開發的模式和特點，我們發現是完全不同的，其中涉及到兩種不同的程式設計風格。
- 指令式注重的是:how to do
- 聲明式注重的是:what to do【由架構（機器）完成how 的一個過程】
5、MVVM模型
MVC和MVVM都是一種軟體的體系結構
①MVC是Model-View-Controller 的簡稱【iOS、前端】
② MVVM 是Model-View-ViewModel 的簡稱【目前非常流行的架構模式】
【注意：vue 并沒有完全遵守MVVM的模型，整個設計是受MVVM的啟發】
6、template 寫法一
在 script 中定義 type="x-template"
<body>
<div id="app"></div>
<script type="x-template"id="sxmy">
<div style="text-align: center" >
<h1>{{msg}}</h1>
<h1>{{counter}}</h1>
<button @click="increment">+1</button>
<button @click="decrement">-1</button>
</div>
</script>
<script src="./js/vue3.js"></script>
<script>
Vue.createApp({
template: '#sxmy',
data: function () {
return {
msg: 'Hello Word 電腦',
counter: 59
}
},
//定義方法
methods: {
increment() {
this.counter += 1
},
decrement() {
this.counter -= 1
}
}
}).mount('#app')
</script>
</body> 7、template 寫法二
使用 tamplate标簽
<body>
<div id="app"></div>
<template id="sxmy">
<div style="text-align: center">
<h1>{{msg}}</h1>
<h1>{{counter}}</h1>
<button @click="increment">+1</button>
<button @click="decrement">-1</button>
</div>
</template>
<script src="./js/vue3.js"></script>
<script>
Vue.createApp({
template: '#sxmy',
data: function () {
return {
msg: 'Hello Word 電腦',
counter: 59
}
},
//定義方法
methods: {
increment() {
this.counter += 1
},
decrement() {
this.counter -= 1
}
}
}).mount('#app')
</script>
</body> 8、data 屬性
該屬性傳入一個函數，并且該函數需要傳回一個對象
- Vue2.x 可以傳入對象
-
Vue3.x 必須傳入一個函數
浏覽器中報錯
9、methods屬性
- 這些方法被
綁定到template 模闆
- 該方法中，我們可以
使用this 關鍵字