博客主页 😶
Vue3的学习 - Day 1&2
Vue3的学习 - Day 1&2

Author:

xuanSAMA

©

Wordage:

共计 4423 字

needs:

约 2 分钟

Popular:

218 ℃

Created:

目 录

当前状况

因为大一上半学期学习JAVA SE,本来我也会一些前端知识,但也知识基础,正好用Vue的学习来完善一下我的前端的欠缺,后面再学习以下Springboot来作为后端,Android Studio来做移动端的开发,这样的搭配大概是比较适合现在的我的,下面是我这两天学习的笔记。

Vue3 的构建

Vue环境的部署方法有很多,我使用的是vite的方法,首先得安装比较新版本的nodejs,大概是在13以上,否则安装Vue的过程中会报错,我就遇到了。。完成后在bash中打开要安装Vue的目录,执行代码
npm init vue@latest
bash中就会出现一些Vue中的一些选项,可以自行选择进行配置构建。
构建好后依次执行以下代码就可以进入开发者模式了。

  cd day2
  npm install // 自动安装需要的模块,仅仅第一次运行时需要使用
  npm run lint // 这个是用于修复错误的配置的
  npm run dev // 以开发者模式运行

进入开发者模式后打开它给的连接,界面如下,这样就代表Vue3成功的构建了出来
Vue安装成功

Vue常用语法

<script>
export default{
  data() {
    return{
      uName: "xuanSAMA",
      uAge: "19",
      msg: "<h2>这是v-html的测试</h2>",
      Did: "awesome",
      poem: "鹏北海,凤朝阳",
      Datt: "id",
      target: "awesome"
    }
  },
  methods: {
    ageIcrease:function(){
      this.uAge++;
    }
  }
}
</script>

<template>
  <!-- 双大括号是引入data里的属性 -->
  <p>uName: {{ uName }}</p>
  <br />
  <p>uAge: {{ uAge }}</p>
  <br />
  <!-- @是Vue中的一个语法糖 代表的是v-on 用于监听DOM事件-->
  <button v-on:click="ageIcrease">Age +</button>
  <br />
  <!--  这是@的写法与上面的代码效果一样 -->
  <button @click="ageIcrease">Age +</button>
  <br/>
  <!-- v-once 这个指令代表只渲染一次 -->
  <p v-once>当前年龄: {{ uAge }}</p>
  <br/>
  <!-- v-html 让内容以HTML的形式渲染 -->
  <!-- 有被XSS攻击风险!慎用!! -->
  <p v-html="msg"></p>
  <br/>
  <!-- v-bind 实现动态属性的指令 -->
  <p v-bind:id="Did">{{ poem }}</p>
  <br/>
  <!-- v-bind 的语法糖是 : -->
  <p :id="Did">又携书剑路茫茫。</p>
  <!-- 双大括号还可以在里面执行js代码  -->
  <!-- 例如随便来个文字翻转 -->
  {{ poem.split('').reverse().join('') }}
  <br/>
  <!-- []可以实现动态参数的效果 -->
  <p :[Datt]='target'>测试</p>
  <button @click="Datt='class'">改变Datt</button>
</template>

<style scoped>
#awesome {
  color: forestgreen;
}
.awesome {
  color: skyblue;
}
</style>

Vue的计算属性与方法

<script>
export default{
    data() {
        return{
            testContent: 'We1c0me t0 Vue3',
            testNumber: 0,
            testObj:{
                Num: 0
            }
        }
    },
    // computed的作用是可以将一个方法当作属性使用
    // 只要依赖值不变,那么不会从新计算
    computed:{
        timeStamp(){
            return Date.now();
            // 响应式依赖,永不更新
        },
    // 每个computed都有getter和setter
    // 以上只是简写,仅仅写了getter
    // 以下为完整写法
        reverseText: {
            get() {
                return this.testContent.split('').reverse().join('');
            },
            set(newValue) { //在设置或改变计算属性的时候会执行的代码
                //不知道为啥,在这个代码中改变不会执行set....ma一下,后面再来看
                console.log(newValue);
            }
        }
    },
    // watch是监听器可以检测属性的变化
    // 在watch中的函数名对应需要检测的属性名
    watch:{
        testContent(newData,oldData){// 这里代表要检测testcontent的变化
            // 第一个形参表示变化后的值,第二个表示之前的值
            console.log(oldData + "--->" + newData);
        },
        testNumber:{
            immediate:true,// 是否初始化时就检测
            handler:function(newData){
                console.log("我现在是"+newData);
            }
        },
        // 检测对象属性的变化
        // 这貌似就是深度监听
        "testObj.Num":function(newData){
            console.log("我现在是"+newData);
        }
    }
}
</script>
<template>
    <p>{{ timeStamp }}</p>
    <br>
    {{ reverseText }}
    <input type="text" v-model="testContent" />
    <button @click="testNumber++">{{ testNumber }}</button>
    <button @click="testObj.Num++">{{ testObj.Num }}</button>
</template>
<style>
</style>

条件渲染v-if v-show与列表渲染

<script>
export default {
    data(){
        return {
            goods: ["农夫三拳","康帅夫","雷碧"]
        }
    }
}
</script>
<template>
<p v-if="true">可以看见,并且渲染了</p>
<br/>
<p v-if="false">看不见,并且没渲染</p>
<br/>
<p v-show="true">可以看见,并且渲染了</p>
<br/>
<p v-show="false">不可看见,但渲染了</p>
<!-- 通过f12可知v-show仅仅在标签上加了display为不可见的标识 -->
<!-- 但需要注意的是v-if会增加性能负担适情况使用v-if和v-show是一个优化的点 -->
<!-- 以下是列表渲染 v-for -->
<br/>
商品列表
<ul>
    <li v-for="(item,key) of goods" :key="key">{{ item }}</li>
</ul>
<button @click="goods.push('可口可勒')">添加商品</button>
<!-- key为什么要添加? -->
<!-- key是列表元素的唯一标识 -->
<!-- 也是Vue维护状态的参照物 -->
<ul>
    <li v-for="(item,key) of goods" :key="key"><input type="checkbox" name="" id="">{{ item }}</li>
</ul>
</template>
<style>
</style>
文章二维码
Vue3的学习 - Day 1&2
共计 0 条评论,点此发表评论
博客主页 流光博客 欢迎来到我的博客,我会在这里分享我的学习笔记,纪录一些生活。 51统计
萌ICP备20220869号 本站已运行 1 年 99 天 17 小时 38 分 自豪地使用 Typecho 建站,并搭配 MyDiary 主题 Copyright © 2022 ~ 2024. 流光博客 All rights reserved.
打赏图
打赏博主
欢迎
搜 索
足 迹
分 类
  • 📚 学习生涯
  • 📔 日常纪录
  • 🖥️ 软件分享
  • 🗂️ 杂项
  • 🖼️ 相册