VUE的四种引用方式:
- CDN(内容分发网络)
通过相互连接的网络系统,利用最靠近每个用户的服务器,更快更可靠地将网络内容传输给用户
<script src="https://unpkg.com/vue@next"></script>
举个例子:
<body>
<div id="app"></div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
const Obje = {
template:'<h2>我是object对象里面装的内容</h2>'
}
Vue.createApp(Obje).mount("#app")
</script>
- 下载VUE的js文件,手动引入
- 通过npm包管理工具安装使用(webpack)
- 直接通过Vue cLI创建项目并使用
VUE的开发体验
vue3的data不能是对象,必须是函数。
data:function() {
return {
}
}
method函数
注意,不应该使用箭头函数来定义method函数(例如plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向组件实例,this.a 将是undefined。
this作用域问题
在全局环境下,this 始终指向全局对象(window), 无论是否严格模式;
普通函数内部的this分两种情况,严格模式和非严格模式。
非严格模式下,this 默认指向全局对象window
而严格模式下, this为undefined
对象内部方法的this指向调用这些方法的对象,
函数的定义位置不影响其this指向,this指向只和调用函数的对象有关。
多层嵌套的对象,内部方法的this指向离被调用函数最近的对象(window也是对象,其内部对象调用方法的this指向内部对象, 而非window)
原型链中的方法的this仍然指向调用它的对象
构造函数中的this与被创建的新对象绑定。
注意:当构造器返回的默认值是一个this引用的对象时,可以手动设置返回其他的对象,如果返回值不是一个对象,返回this
代码体验
<!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>
</head>
<body>
<h2 class="counter">0</h2>
<button class="incre">+</button>
<button class="decre">-</button>
<div id="app"></div>
<script type="x-template" id="my-app">
<div><h2>{{message}}</h2>
<h2>{{count_vue}}</h2>
<button @click='increment'>+</button>
<button @click='decrement'>-</button></div>
</script>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
const count = document.querySelector(".counter")
const incre = document.querySelector(".incre")
const decre = document.querySelector(".decre")
let counter = 100;
count.innerHTML=counter
incre.addEventListener('click',()=>{
counter+=1;
count.innerHTML = counter
})
decre.addEventListener('click',()=>{
counter-=1;
count.innerHTML = counter
})
const Obje = {
template:`#my-app`,
data :function() {
return {
message:'Hello Message',
count_vue:100
}
},
methods: {
increment(){
this.count_vue+=1
},
decrement(){
this.count_vue-=1
}
}
}
Vue.createApp(Obje).mount("#app")
</script>
</html>
MVC和MVVM
MVC Model-View-Controller
MVVM Model-View-ViewModel
dom相当于view层,js相当于model层,而vue框架相当于viewmodel