(一)项目创建
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将会从渲染的元素上移除
简写