Vue3学习——第一天Vue基础

（一）项目创建

1、 创建vue3项目——打开要创建的位置，cmd打开命令行

npm init vue@latest

E:\vue3Sturdy>npm init vue@latest


Vue.js - The Progressive JavaScript Framework

√ Project name: ... vue-sturdy
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes
√ Add Vue DevTools 7 extension for debugging? (experimental) ... No / Yes

Scaffolding project in E:\vue3Sturdy\vue-sturdy...

Done. Now run:

  cd vue-sturdy
  npm install
  npm run dev


//显示创建成功

2、Project name: ... 项目名称 /*创建项目名称*/

3、cd vue-sturdy
      npm install /*安装*/
      npm run dev/*运行项目文件*/

  cd vue-sturdy
  npm install
  npm run dev

4、npm run dev//运行项目

  VITE v5.2.12  ready in 2591 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

        运行成功效果，或者localhost效果。

打开浏览器效果，vue项目创建成功！！！！

环境使用VScode和Volar拓展。

打开项目搜索插件Volar

项目打开效果

        

至此项目全部创建完成。

（二）Vue项目目录结构

.vscode        ---VSCode工具的配置文件
node_modules   ---Vue项目的运行依赖文件
public         ---资源文件夹（浏览器图标）
src            ---源码文件夹
.gitigonre     ---git忽略文件
index.html     ---如果HTML文件
package.json   ---信息描述文件
README.md      ---注释文件
viti.config.js ---Vue配置文件

（三）模板语法

       3.1文本差值

最基本的数据绑定形式是文本差值，它使用的是"Mustache"语法（双大括号）：

App.vue

<template>
  <h3>模板语法</h3>
  <p>{{ msg }}</p>
</template>
<script>
export default{
  data(){
    return {
      msg: '神奇的语法'
    }
  }
}
</script>

3.2使用JS表达式

        每一个绑定仅仅支持单一表达式，也就是一段能够被求值的JS代码。一个简单的判断方法是是否可以合法的写在return后面

注：语句非表达式。条件控制也不支持（不可做逻辑操作，接受返回值）

代码：

<template>
  <h3>模板语法</h3>
  <p>{{ msg }}</p>
  <p>{{ num+1 }}</p><!--num+1=11-->
  <p>{{ ok ? 'yes':'No' }}</p><!--如果ok为true输出yes，反之为false输出No-->
  <p>{{ mes.split("").reverse().join("") }}</p><!--通过split进行字符串切割，使用reverse对字符串进行翻转join进行组合，输出结果为"好家大"-->
</template>
<script>
export default{
  data(){
    return {
      msg: '神奇的语法',
      num:10,//初始化num值为10
      ok:true,//初始化ok为true，
      mes:"大家好"
    }
  }
}
</script>

输出结果：

3.3原始HTML

双大括号将会将数据差值为纯文本，而不是HTML。若想插入HTML，你需要使用v-html指令

<template>
  <h3>模板语法</h3>
  <p>{{ msg }}</p>
  <p>{{ num+1 }}</p><!--num+1=11-->
  <p>{{ ok ? 'yes':'No' }}</p><!--如果ok为true输出yes，反之为false输出No-->
  <p>{{ mes.split("").reverse().join("") }}</p><!--通过split进行字符串切割，使用reverse对字符串进行翻转join进行组合，输出结果为"好家大"-->
  <p v-html="reaHTML"></p>
</template>
<script>
export default{
  data(){
    return {
      msg: '神奇的语法',
      num:10,//初始化num值为10
      ok:true,//初始化ok为true，
      mes:"大家好",
      reaHTML:"<a href='https://www.runoob.com/vue3/vue3-tutorial.html'>菜鸟Vue3教程</a>"
    }
  }
}
</script>

（四）属性绑定

        双大括号不能在HTML attributes中使用。想要响应式的绑定一个attribute，应该使用v-bind指令。v-bind:属性名

<template>
  <div v-bind:class="msg">测试</div>
</template>
<script>
  export default{
    data(){
      return{
        msg:"active"//初始化值
      }
    }
  }
</script>

绑定动态CSS

v-bind 指令指示Vue将元素的Id attribute 与组件的dynamicId 属性保持一致。如果绑定值是null或者undefined，那么该attribute将会从渲染的元素上移除

简写