1.在根目录下cmd:vue create myobj(没有切换淘宝镜像记得切换,这样创建项目运行快)
2.
3.(按空格键选中,选好回撤就到下一步了)
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.然后输入执行以下两步就已经运行项目了
以下是我的vue3练习题,复制上看一下:
<template>
<div>
{{msg}}
<hr>
{{arr}}
<hr>
<ul v-for="(item,index) in arr" :key="index">
<li>{{item}}</li>
</ul>
</div>
<div>
<button @click="abc()">修改</button>
</div>
<div>
<!-- 第一个div点击显示数组 -->
<button @click="divone()">点击第一个div</button>
<ul v-for="(item,index) in uls" :key="index">
<li>{{item}}</li>
</ul>
</div>
<div>
<!-- 第二个div点击显示随机数,大于5显示蓝色,小于五显示绿色-->
<button @click="divtwo()">点击第二个div</button>
<div :style="{'background-color': bgColor(two)}">
{{two}}
</div>
</div>
</template>
<script lang="ts">
// import { Options, Vue } from "vue-class-component";
import {defineComponent,ref} from 'vue'
export default defineComponent({
setup(){
var msg = ref<string>('nihao')
var arr = ref<any>(['nihao','aaaaaa'])
var abc = ()=>{
console.log(123456);
// 点击修改,msg变成 你好
msg.value = '你好'
}
// 第一个div
var uls = ref<any>()
var divone = ()=>{
uls.value = (['1111','222','3333','4444','5555'])
}
// 第二个div
var two = ref<number>(0)
var divtwo = ()=>{
two.value = Math.floor(Math.random()*10)
}
var bgColor = () => {
return two.value > 5 ? 'blue' : 'green';
};
return {msg,arr,abc,uls,divone,two,divtwo,bgColor}
},
})
</script>