Vue入门

准备工作

安装node.js?

下载地址：传送门
安装：一路next就行
验证：进入命令提示符窗口，分别输入以下命令，显示版本号，则安装成功
node -v：显示安装的nodejs版本
npm -v：显示安装的npm版本

创建vue3项目

使用vite构建工具创建vue3项目
命令：

npm init vite-app vuedemo    //vuedemo 项目名称
cd vuedemo 					//切换目录到vuedemo项目目录下
npm install					//加载资源
npm run dev					//运行项目

上机展示：

Windows PowerShell
版权所有（C） Microsoft Corporation。保留所有权利。

安装最新的 PowerShell，了解新功能和改进！https://aka.ms/PSWindows

PS C:\Users\Administrator\Desktop\VueStudy> npm init vite-app  vuedemo
Scaffolding project in C:\Users\Administrator\Desktop\VueStudy\vuedemo...

Done. Now run:

  cd vuedemo
  npm install (or `yarn`)
  npm run dev (or `yarn dev`)

PS C:\Users\Administrator\Desktop\VueStudy>  cd vuedemo
PS C:\Users\Administrator\Desktop\VueStudy\vuedemo> npm install

added 290 packages in 10s
PS C:\Users\Administrator\Desktop\VueStudy\vuedemo> npm run dev

> vuedemo@0.0.0 dev
> vite

[vite] Optimizable dependencies detected:
vue

  Dev server running at:
  > Network:  http://192.168.31.14:3000/
  > Network:  http://192.168.93.1:3000/
  > Network:  http://192.168.48.1:3000/
  > Local:    http://localhost:3000/

目录结构

开始练习

按什么格式写？

在App.vue中写点什么吧!

<!-- App.vue -->
<template>
<!-- 这里放标签 -->
  <!-- 使用{{变量名}}获取打印变量的值 -->
  <span>{{myname}}</span>
  <br>
  <span>{{students}}</span>
  <div id="App">
      <button @click="alterWin">点我</button>
  </div>
  <HelloVueApp :msg="hello"></HelloVueApp>
</template>
<script>
//导入组件
import HelloVueApp from './components/HelloWorld.vue'
export default {
  name: 'App',//组件名称
  components: {
    //此处引入组件
    HelloVueApp
  },
  data(){
    return{
      //此处定义变量
      myname:"你好呀小盆友",   //属性名：值  key: value
      students:['小李','小王','小白']
    }
  },
  methods:{
    //此处定义方法
    alterWin(){
      alert('Hello Vue' + this.myname + '!')
    }

  }
}
</script>

遍历

数组遍历

使用v-for关键字，格式 循环变量 in 集合/对象/整数

<template>
    <h3>数组遍历</h3>
    <ol>
        <li v-for="student,index in students" :key="index">
           <span>编号：{{index}} 名称:{{student.name}} 年龄:{{student.age}}</span>
        </li>
    </ol>
</template>
<script>
export default {
    name:"TraversalTest",
    data(){
      return{
        students:[
        { name: '小白',age:21 },
        { name: '小菜',age:20},
        { name: '阿杰',age:22 }]
	    }
	 }
  
}
</script>

对象遍历

 <h3>对象遍历</h3>
    <ul>
        <li v-for="value,key in object" :key="key">
            {{key}}---{{value}}
        </li>
    </ul>
export default {
    name:"TraversalTest",
    data(){
      return{
      object:{
        name:"蔡文姬",
        age:16,
        high:'155cm'
      }
    }
}

整数遍历

   <h3>迭代整数</h3>
    <ul>
        <li v-for="i in 10" :key="i">
            {{i}}
        </li>
    </ul>

显示过滤/排序后的结果

    <h3>显示过滤/排序后的结果</h3>
    <ul>
        <li v-for="n in evenNumbers" :key="n">
        {{n}}
        </li>
    </ul>
    export default {
    name:"TraversalTest",
    data(){
      return{
      numbers: [ 1, 2, 3, 4, 5 ]
      }
    },
    computed:{
        evenNumbers(){
            return this.numbers.filter(number => number % 2 === 0)
        }
    }
  
}