P1-P3 安装
1.安装Vue
npm install -g @vue/cli
2.查看版本
vue -V
3.创建项目
vue create vue-demo
P4 setup和组合式API
<!-- 1.App.vue -->
<template>
<HelloWorld/>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
</style>
<!-- 2.子组件 HelloWorld.vue -->
<template>
<div>
{{res}}
</div>
<button @click="show1">Show1</button>
<button @click="show2">Show2</button>
<button @click="show3">Show3</button>
</template>
<script>
export default {
// 组合式API的入口
setup() {
const res = 123
// 几种定义方法的方式
function show1() {
console.log('show1');
}
// ES6方式
const show2 = () => {
console.log("show2");
}
const show3 = function(){
console.log("show3");
}
return {res, show1, show2, show3}
}
}
</script>
<style scoped>
</style>
P5-P6 ref和this (响应式数据,会变的数据)
如何修改name ?
1.直接 name = '修改后' , 不行
2.使用this.name = '新值', 不行.(vue2的方式)
答案: 先使用ref定义 name
再通过 name.value = '新内容'
name是一个ref对象(RefImpl)
<template>
<div>
<h1>姓名: {{name}}</h1>
<h1>年龄: {{age}}</h1>
<h1>公司: {{company}}</h1>
<h1>{{obj}}</h1>
<h1>{{arr}}</h1>
</div>
<button @click="updateName">更新姓名</button>
</template>
<script>
import {ref} from 'vue'
export default({
setup() {
const name = ref('马云')
const age = ref(50)
const company = ref('Alibaba')
const obj = ref({taobao:'淘宝',tmall:'天猫'})
const arr = ref([1,2,3])
function updateName() {
console.log(name);
name.value = "马化腾"
age.value = 40
company.value = '腾讯'
obj.value.tmall = "拼多多"
arr.value = [3,4,5]
}
return {name,age,company,obj,arr,updateName}
}
})
</script>
