vue3学习DAY1️⃣

写在前面:本人大二在读,优快云的第一篇学习笔记,一切贵在坚持✊希望早日实现全栈自由🆓如有错误之处,欢迎指正!当然也欢迎大家讨论学习,共同进步!

今日学习内容:

  • 创建vue项目
npm init vue@latest
  • vue项目目录

node_modules——vue项目运行依赖文件

public——资源文件夹

src——源码文件夹

.gitignore——git忽略文件

index.html——入口文件

package——信息描述文件

README——注释文件

vite.config.js——配置文件

  • 文本差值
<template>
<h3>
  <p>{{msg}}</p>
</h3>
</template>

<script>
export default{
  data(){
     return{
      msg: 'Hello Vue.js!'
     }
  }
}
</script>
  • 模版语法
<template>
<h3>
  <!-- {{}}中return的内容已定要有具体的表达值,因此建议把运算这些都放在return中,不建议放在{{}}中 -->
  <p>{{msg}}</p>
  <p>{{number+1}}</p>
  <p>{{ok?'YES':'NO'}}</p>
  <!-- 反转操作 -->
  <p>{{message.split('').reverse().join('')}}</p>
  <!-- 嵌套标签,超链接 -->
  <p v-html="rawHtml"></p>
</h3>
</template>

<script>
export default{
  data(){
     return{
      msg: 'Hello Vue.js!',
      number:10,
      ok: true,
      message: 'Hello Vue.js!',
      //  嵌套标签,超链接
      rawHtml: "<a href='https://www.baidu.com'>百度</a>"
     }
  }
}
</script>
  • 属性绑定 
<template>
  <div v-bind:id="dynamicID" v-bind:class="msg">测试</div>
//简写
  <div :id="dynamicID" :class="msg">测试</div>
</template>

<script>
export default{
  data(){
     return{
      msg: "active",
      dynamicID: "appid"
     }
  }
}
</script>

  • 条件渲染 
<template>
    <div>
        <h3>条件渲染</h3>
        <div v-if="isShow">显示</div>
        <div v-else>隐藏</div>
        <div v-if="type==='A'">A</div>
        <div v-else-if="type==='B'">B</div>
        <div v-show="isShow">你能看见我吗?</div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isShow: false,
            type: 'A'
        }
    }
}
</script>

v-if:如果说初始值为false,那么页面不渲染

v-show:始终渲染【通过css的display属性(如block等等)】

若果需要频繁切换,建议使用v-show

  • 列表渲染

简单数据的渲染如下: 

<template>
    <h3>列表渲染</h3>
    <!-- item代表names中的每一项 -->
    <p v-for="item in names">{{ item }}</p>
</template>

<script>
export default{
    data(){
        return{
            names: ['张三', '李四', '王五']
        }
    }
}
</script>

但大部分时候,渲染的数据来源于后端,以json格式为主,此时的处理方式如下:

<template>
    <div>
        <h3>列表渲染</h3>
        <!-- item代表names中的每一项 -->
        <p v-for="item in names">{{ item }}</p>
        <div v-for="item in result">
            <p>{{ item.name }}</p>
            <img :src="item.avator" :alt="item.name" />
        </div>
    </div>
</template>

<script>
export default{
    data(){
        return{
            names: ['张三', '李四', '王五'],
            result: [
                {"id":234,
                "name":"张三",
                "avator":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b4b1b7b0b7b7b7b7b7b7b7b7b7b7b7.jpg",
                },
                {"id":235,
                "name":"李四",
                "avator":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b4b1b7b0b7b7b7b7b7b7b7b7b7b7b7.jpg",
                },
                {"id":236,
                "name":"王五",
                "avator":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b4b1b7b0b7b7b7b7b7b7b7b7b7b7b7.jpg",
                }
            ]
        }
    }
}
</script>

这个时候代码可能会报错,但是不影响正常运行,这是因为Elements in iteration expect to have 'v-bind:key' directives.没有key属性,也就没有办法确定唯一索引

<template>
    <div>
        <h3>列表渲染</h3>
        <p v-for="item in names" :key="item">{{ item }}</p>
        <div v-for="item in result" :key="item.id">
            <p>{{ item.name }}</p>
            <img :src="item.avator" :alt="item.name" />
        </div>
    </div>
</template>

以上就是今天所有的内容! 🤭

coding的过程中还出现了其他的error,如下:

[plugin:vite-plugin-vue-inspector] Element is missing end tag. /Users/alisa/Desktop/baseball/baseball/src/App.vue 

该报错表明App.vue 文件中存在未闭合的标签,要格外注意的是.vue文件的格式问题,这里提供一个正确的格式

<script setup>
import Helloworld from './components/Helloworld.vue'
import Ifdemo from './components/Ifdemo.vue'
</script>

<template>
  <div>
    <Helloworld/>
    <Ifdemo/>
  </div>
</template>

错误格式也写在下方: 

<script setup>
import Helloworld from './components/Helloworld.vue'
import Ifdemo from './components/Ifdemo.vue'
</script>

<template>
    <Helloworld/>
    <Ifdemo/>
</template>

错误原因分析:

如果直接使用 <template> 包裹组件,而没有使用 v-ifv-for 或插槽等特殊指令,Vue 会将其视为一个普通的模板块。在这种情况下,<template> 本身不会生成任何 DOM 元素,但它的内容会被渲染。如果 <template> 内部的结构有问题(例如未闭合的标签),Vue 会报错。

使用 <div> 包裹组件时,<div> 会被渲染为一个普通的 HTML 元素,其内部的组件也会被正常渲染。只要内部的组件和标签没有问题,就不会报错。

学习资料如下(供参考🤝🏻):

Vue.js - 渐进式 JavaScript 框架 | Vue.js

【2023最新版】Vue3从入门到精通,零基础小白也能听得懂,写得出,web前端快速入门教程

https://kimi.moonshot.cn/

<view class="income-box"> <view class="u-flex u-row-between" v-if="data.rec?.dutyAllAmount || data.rec?.dutyAllAmount == 0"> <view class="income-item" :style="initJson.phoneStyle ? initJson.phoneStyle.split(&#39;@&#39;)[0] : &#39;&#39;"> <view>累计收益</view> <view class="income-info" :style="initJson.phoneStyle ? initJson.phoneStyle.split(&#39;@&#39;)[1] : &#39;&#39;"> ¥ <text>{{ numVal(data.rec?.dutyAllAmount + data.rec?.agentAllAmount, 2) }}</text> </view> </view> <view class="income-item" :style="initJson.phoneStyle ? initJson.phoneStyle.split(&#39;@&#39;)[0] : &#39;&#39;"> <view>本月预估</view> <view class="income-info" :style="initJson.phoneStyle ? initJson.phoneStyle.split(&#39;@&#39;)[1] : &#39;&#39;"> ¥ <text>{{ numVal(data.rec?.dutyMonthAmount + data.rec?.agentMonthAmount, 2) }}</text> </view> </view> <view class="income-item" :style="initJson.phoneStyle ? initJson.phoneStyle.split(&#39;@&#39;)[0] : &#39;&#39;"> <view>昨日预估</view> <view class="income-info" :style="initJson.phoneStyle ? initJson.phoneStyle.split(&#39;@&#39;)[1] : &#39;&#39;"> ¥ <text>{{ numVal(data.rec?.dutyYesterAmount + data.rec?.agentYesterAmount, 2) }}</text> </view> </view> </view> <view class="income-box-btn"> <view @click="pageNavUrl(&#39;/mgtPages/rec/day&#39;)" :style="initJson.phoneStyle ? initJson.phoneStyle.split(&#39;@&#39;)[2] : &#39;&#39;">收益记录</view> <view @click="pageNavUrl(&#39;/mgtPages/incomeUserOrder/index&#39;)" :style="initJson.phoneStyle ? initJson.phoneStyle.split(&#39;@&#39;)[2] : &#39;&#39;">历史结算单</view> </view> </view>帮我解析并优化一下
03-08
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值