目录
一、Vue实例的属性和方法
1、什么是Vue实例
Vue实例:又称为Vue组件
(1)Vue2.0创建组件的方法
new 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>
<!-- vue2版本加速器 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
</head>
<body>
<div id="app">
{
{msg}}
</div>
<script>
var app=new Vue({
el:'#app',
data:{
msg:'Hello Vue!'
}
})
</script>
</body>
</html>
(2)Vue3.0创建Vue组件的方法:
Vue.createApp({…})
有两种写法:
方法一:
<!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>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
{
{ count }}
</div>
<script>
const obj = {
}
Vue.createApp({
data(){
return{
count:120
}
}
}).mount('#app')
</script>
</body>
</html>
方法二:(结构较清晰)
<!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>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">{
{count}}</div>
<script>
const obj ={
data(){
return{
count:120
}
}
}
let instance=Vue.createApp(obj).mount('#app') //instance就是Vue组件
</script>
</body>
</html>
2、Vue组件的属性
(1)存储属性(data):是一个函数。在组件创建时会调用此函数来构建响应性的数据系统。是组件的存储属性。
获取该属性值的方式:
- Vue组件名.变量名
- Vue组件名.$data.变量名
本质是访问的同一个数据块
举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content