3-29 vue3基础

最新推荐文章于 2025-08-04 22:56:22 发布

t200718

最新推荐文章于 2025-08-04 22:56:22 发布

阅读量617

点赞数 15

CC 4.0 BY-SA版权

文章标签： arcgis

本文链接：https://blog.youkuaiyun.com/t200718/article/details/146635734

vue3基础1

关于vite
搭建vue3项目
单文件组件
mustach 表达式
组件创建及使用
vue指令

vue基础

声明式渲染：有自己独立模板语法 template

响应式数据： 不再需要操作dom，只要数据发生改变（使用了这个数据的dom）页面会自动更新

单页应用 (SPA) : 整个项目只有一个html文件（多页面的实现思路，借助hash 锚点---页面路由）

服务端渲染 (SSR)： SSR 为了SEO 关键字搜索引擎优化

开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

1.vite 创建vue3项目

开始 | Vite 官方中文文档

  # npm 7+，需要添加额外的 --：
  $ npm create vite@latest my-vue-app -- --template vue

运行项目

1.下载项目需要的三方包

  
  npm install

scripts 项目可以使用命令

  
    "scripts": {
      "dev": "vite",     #启动 编译 本地环境   npm run dev
      "build": "vite build",   #编译为 生产环境   npm run build 
      "preview": "vite preview"
    },

  
  npm run dev

打开浏览器访问

  
  http://localhost:5173

1.1 文件解读0

main.js

  //导入 vue的实例创建方法 createApp 
  import { createApp } from 'vue'
  //导入全局的默认样式
  import   './style.css'
  // 导入第一个vue组件  将这个组件放到页面上
  import App from './App.vue'
  
  //初始化vue的实例对象 并传入第一个组件的代码
  const app = createApp(App)
  
  //找页面的节点 id=app  将所有的vue代码都放到这个节点里面
  app.mount('#app')

2.单文件组件 SFC single File component

vue-official
vue 3 snippets

就是一个 .vue文件中能写什么内容

  
  <template>
    //html  
  </template>
  
  <script setup>
      //js代码
  </script>
  
  <style  lang="less | scss | stylus"  scoped>
  //css代码
      p{
          height:1000px;
      }
  </style>

  
  <template>
      <div class="box">
        <span>
          我是第一个vue组件
        </span>
      </div>
  </template>
  
  <script setup>
      let a = 100;
      let b =200;
      console.log(a+b);
  </script>
  
  <style scoped >
  .box{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  </style>

3.响应式数据 hooks -mustach 语法【双向绑定】

数据改页面自动改

页面改数据自动改

购物车计数器步进器

ref 定义响应式数据

  
  <template>
    //html中取值 不用写value 属性
     {{a}}
  </template>
  
  <script setup>
    import {ref} from 'vue'
      
    const a = ref()
    
    //js取值 a.value   改值  a.value = 新数据
      
  </script>

  
  <template>
    //html中取值 不用写value 属性
     {{data.a}}
  </template>
  
  <script setup>
    import {reactive} from 'vue'
      
    const data = reactive({
        a:''
    })
    
    //js取值 data.a   改值 data.a= 新数据
      
  </script>

计数器

  
  <template>
      <button v-on:click="add">+</button> 
      <span> {{ num }}</span> 
      <button @click="reduce">-</button>
  </template>
  
  <script setup>
  import {ref} from 'vue'
  // 响应式数据的变量   是一个对象
  const num = ref(1);
  const add = ()=>{
      num.value++;
      // 修改数据之后 拿到dom 重新渲染节点
      console.log(num.value);
  }
  const reduce = ()=>{
      num.value--;
      console.log(num.value); 
  }
  </script>

练习

请实现点击“生成验证码” 按钮，输出一个由字母和数字组成的四位随机数到页面上

  
  <template>
  
      <button @click="getyzm"> 生成验证码  </button>
      <div>
          {{yzm  }}
      </div>
  </template>
  
  <script setup>
      import {ref} from 'vue'
  
      const yzm = ref('')
  
      const getyzm = ()=>{
          let str = ''
          let defaultArr= 'qwertyuiopasdfghjklzxcvbnm0123456789'.split('');
          for(let i=0;i<4;i++){
              let index =parseInt(Math.random()*36)
              str+=defaultArr[index];
          }
          yzm.value = str;
      }
      getyzm()
  
  
  </script>

4.vue指令 14个 17:10

  
  <标签 v-xxx="xxxxxx" ></标签>
  xxx: 指令名 
  xxxxxx 指令触发做的事情

v-on 事件

  
  <div v-on:事件类型="事件的执行函数"> + </div>

最常见用法事件触发并传数据

  
  <template>
    <div v-on:click="btn(100)">
      点我啊
    </div>
  </template>
  <script setup>
  // 点击事件的函数
  const btn = (a) => {
    console.log('点你了~~~', a);
  }
  </script>

只触发事件不传数据默认带event

  
  <template>
    <div v-on:click="btn">
      点我啊
    </div>
  </template>
  
  <script setup>
  // 点击事件的函数
  const btn = (event) => {
    console.log('点你了~~~',event );
  }
  </script>

事件执行函数放在html里面

  
  <template>
    <div v-on:click="e=>console.log('点你了',e)">
      点我啊
    </div>
  </template>

传参数并传递event写法

  
  <template>
    <div v-on:click="e=>btn(100,e)">
      点我啊
    </div>
  </template>
  <script setup>
  // 点击事件的函数
  const btn = (a,event) => {
    console.log('点你了~~~', a,event);
  }
  </script>

简写事件将v-on: 简写为 @

  
  <template>
    <div @click="e=>btn(100,e)">
      点我啊
    </div>
  </template>
  <script setup>
  // 点击事件的函数
  const btn = (a,event) => {
    console.log('点你了~~~', a,event);
  }
  </script>

v-text v-html 节点渲染 {{}}

v-html ：将带有标签的字符串渲染到页面dom中 innerHTML

v-text :将纯文本渲染到页面dom中 innerText

  
  <template>
      <div> {{  '你好啊，我是'+name }}</div>
      <div v-text="name1"> </div>
      <div v-html="name1"></div>
  </template>
  
  <script setup>
          let str= '你好啊，我是邓金阳'
          let name = '邓金阳'
          let name1 = `<h1>邓金阳</h1>`
  </script>

v-show v-if 显隐

表达式结果为 true :显示 false：隐藏

  
  <div v-show="表达式">  </div>
  <div v-if="表达式">  </div>

  
  <template>
           <div v-show="gender==0">男</div>
           <div v-show="gender==1">女</div>
  </template>
  <script setup>
       let gender = 0;   //0显示男  1女
  </script>

v-if v-else-if v-else 判断

多条件判断

  
  <div v-if="条件1">  </div>
  <div v-else-if="条件2">  </div>
  <div  v-else>  </div>

根据成绩输出优良中差

  
  <template>
      <!-- 90 优秀  80良好  60及格  60以下 差 -->
       <div v-if="num>=90">优秀</div>
       <div v-else-if="num>=80">良好</div>
       <div v-else-if="num>=60">及格 </div>
       <div v-else>差</div>
  </template>
  
  <script setup>
      let num = 55
  
  </script>

v-model form双向绑定

获取表单数据的

  
  <template>
      <input v-model="formData.account" >
      <input v-model="formData.password">
      <button @click="getData">获取数据</button>
      
  </template>
  
  <script setup>
      import {reactive} from 'vue'
      
      const formData= reactive({
          account:'',
          password:''
      })
  
      const getData  = ()=>{
          console.log(formData );
          
      }
      
     
  </script>