当前位置：首页 > article >正文

vue3的学习（1）

article 2024/11/17 5:28:50

如何创建一个vue3的文件

首先在配置这个vue3的前提是需要配置node.js

首先在经常放项目的文件盘中创建一个文件夹一边之后放文件

这个vue的文件创建和之前创建项目不同的是，这个是在cmd里面进行配置。
按住win+R打开这个window的控制台

打开这个后先不要着急按确定，应为直接打开就是没有管理员权限，当我们使用npm下载依赖的时候就会报错，我们可以按ctrl+shift+enter组合键就可以以管理员运行这个。

然后我们进行黑控制台之后就输入盘

像这个就是进入了D盘的意思

然后我们进入自己创建的文件夹中，通过cd语句就进入当前文件夹中的文件夹或者文件

，然后输入

npm init vue@latest

之后就会出现这样的样式，这样写选项目前都是选择否，知道看见，控制台上出现的三行绿字（这个绿字就是后面告诉接下来的操作是什么）

我们只要一次输入每一行的绿字然后按下回车键。

当控制台出现这个页面之后，我们将Local复制下来用网页打开（注意这个时候控制台不要关闭）

最后出现这个界面就算我们所有的东西全部配置完成。

文本插值

在以往的html的标签中展示的值一般是静态数据，然后我们想要将这个标签里面的值进行改变的时候需要获取到这个标签的id然后进行更改，这样比较麻烦，而且为每一个标签进行赋值显得冗余麻烦，所以这个时候就可以考虑选择这个文本插值进行重新赋值，使标签里面的值为动态的值。

<template>
  <h3>{{msg}}</h3>
  <p>{{npm}}</p>
</template>


<script>
  export default {
    data(){
      return {
        msg:"生气动物园",
        npm:"想你了"
      }
    }
  }
</script>

看上面的这代码，在template标签中有h3标签还有p标签，其中有两个双{}，在这个{{}}中放入js语句中return括号中的msg和npm就会将其对应的值赋值给h3标签中和p标签中。

效果就是这样的（注：由于这边没有将原先自带的css语句删干净，就导致两个词都是居中进行展示的）。

值得注意的是在{{}}中间必须要有明确的值，像一个明确的字符串或者是数字等等，如果在这个扩种放的是{{var temp}}或者是{{let temp}}就会报错，里面可以放的是一个表达式，像什么判断这句是否是错的

这个ok就是放在中的键值对形式的数据，如果ok的是true,那么这个就会显示'YES',如果这个ok是false就会显示NO

<template>
  <h3>{{msg}}</h3>
  <p>{{npm}}</p>
  <p>{{ok?'Yes':'No'}}</p>
</template>


<script>
  export default {
    data(){
      return {
        msg:"生气动物园",
        npm:"想你了",
        ok:true
      }
    }
  }
</script>

像这个就会显示Yes.

这个同时还可以显示一个字符串各种变换后的模样

像这个最后就会展示 message变量值中倒转过来的样式。

<template>
  <h3>{{msg}}</h3>
  <p>{{npm}}</p>
  <p>{{ok?'Yes':'No'}}</p>
  <p>{{ message.split('').reverse().join() }}</p>
</template>


<script>
  export default {
    data(){
      return {
        msg:"生气动物园",
        npm:"想你了",
        ok:true,
        message:"郑美玲"
      }
    }
  }
</script>

最终效果展示就是