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

vue3自学笔记

前端2024-02-29 16:17:20

文章目录

  • 前言
  • 一、创建项目
  • 二、模板语法
    • 1.创建一个新项目
    • 2.使用JS表达式
    • 3.原始html

前言

Vue.js是一个流行的JavaScript前端框架，用于构建用户界面和单页面应用程序（SPA）。Vue 3是Vue.js的最新版本，它带来了许多新特性和改进，包括性能优化、更好的TypeScript支持、组合式API等。

一、创建项目

创建vue命令，在创建项目的文件夹下：
npm init vue@latest
项目内容全选否
项目构建完成，可执行以下命令：

  cd vue-base
  npm install
  npm run dev

local内的网址在浏览器内打开，说明项目创建成功。
添加文件目录：vscode-文件-文件夹
vue3自学笔记,在这里插入图片描述111,第1张
1 和我们关系不大
2 依赖文件夹，npm install命令安装的东西
3 储存图标
4 储存源码，内容的文件夹
5 团队用到的协同工具
6 入口HTML文件，这里引用了编译出来的vue文件以及初始化的结构，所有的代码都在这个文件中运行
7 信息描述文件 包括项目名 版本 如何运行，依赖什么（vue3），依赖的详细信息
vue3自学笔记,在这里插入图片描述,第2张
8 注释文件，写什么都行
9 vite.config.js vue的配置文件，跨域，打包都在这里

二、模板语法

Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。

1.创建一个新项目

只保留

<script>
</script>

<template>
  
</template>

此时，输入以下代码

<script>
export default{
  data(){
    return{
      msg:"神奇的语法"
    }
  }
}
</script>

<template>
<h3>模板语法</h3>
<p>{{ msg }}</p>
</template>

相当于把msg的内容放在template中呈现
这时还有样式，删除main中的import './assets/main.css’，就只剩下最基本的h3标签了。

2.使用JS表达式

vue3自学笔记,在这里插入图片描述,第3张
以下代码，注意msg后面的‘，’

<script>
export default{
  data(){
    return{
      msg:"神奇的语法",
      number:10,
      ok:true,
      message:"大家好啊"
    }
  }
}
</script>

<template>
<h3>模板语法</h3>
<p>{{ msg }}</p>
<p>{{ number+1 }}</p>
<p>{{ ok ? 'Yes' : 'No' }}</p>
<p>{{ message.split("").reverse().join("") }}</p>
</template>

以上为有效结果，下面展示无效结果，他们不符合模板语法。

{{ var a = 1 }}//这不是return结果，这是语句。
{{  if (ok) 	{ return message} }}//条件控制也不支持，也会报错

所以，不要在模板中做任何逻辑的操作，而是在script中去做，把返回后的结果放到这里显示，就有效避免了这个问题。

3.原始html

vue3自学笔记,在这里插入图片描述,第4张
代码如下

<script>
export default{
  data(){
    return{
      rawHtml:"<a href='https://baidu.com'>百度</a>"
    }
  }
}
</script>

<template>
<p v-html="rawHtml"></p>
</template>

下一节：属性绑定。
未完待续。


https://www.xamrdz.com/web/2us1849004.html

相关文章：