vite-脚手架:
搭建脚手架指令 npm install -g @vue/cli
脚手架的来源于保证施工过程顺利搭建的平台
安装完之后可以通过一些命令来快速实现 -> 自动化生成
vue项目-文件详解
.vscode vscode工具的配置文件
node_moudles vue项目的依赖文件夹
public 资源文件夹(浏览器页标)
src 源码文件夹
.gittignore 协同开发文件
index.html 入口HTML文件
package.json 信息描述文件
README.md 注释文件
vite.config.js vue配置文件vue - 模板语法
文本绑定:
Mustache语法(即大括号) -> 文本插值
格式为<p> {{键}}</p>
在script标签里输入值 存放在<template>里构建内容插值 实例:
<template>
<p>{{ msg }}</p>
</template>
<script>
export default{
data(){
return {
msg:"hello_world"
}
}
}
</script>在APP.vue里进行搭载配置
<template>
<Hello_World/>
</template>
<script setup>
import Hello_World from './components/hello_world.vue'
</script>main.js配置如下
import { createApp } from 'vue'
import App from './App.vue'
// import App from './components/hello_world.vue'
createApp(App).mount('#app')index.html(入口文件)不做更改
此实例在通过npm run dev指令后可以在也页面中显示效果为:hello_world
属性绑定:
双大括号不能在HTML attributes中使用 想要绑定一个attributes 应该使用v-bind指令 v-bind: id 或 class 绑定值 指令指示元素的id与组建的属性值保持一致。如果绑定的值是:null或者undefined 那么该值会被移除
实例:
<template>
<div v-bind:id="act" v-bind:class="msg" >测试</div>
</template>
<script>
export default{
data(){
return{
msg:"actest",
act:"abtest"
}
}
}
</script>
<style>
.actest{
color: red;
}
</style>v-bind提供了简写方式:
实例:
<div :id="act" :class="msg" >测试</div>
布尔型Attribute
布尔型attribute依据true/false值来决定attribute是否应该存在该元素上,disabled就是常见的例子之一
实例:
<template>
<button :disabled="nameisbutton">按钮</button>
</template>
<script>
export default{
data(){
return{
nameisbutton:false
}
}
}
</script>其中nameisbutton为true则为不可点击,为false则可以点击
动态绑定多个值:
实例:
<template>
<div v-bind="ObjectAttr">测</div>
</template>
<script>
export default{
data(){
return{
ObjectAttr:{
id:"appid",
class:"appclass"
}
}
}
}
</script>