vue3-初步接触/指令和条件渲染
vue环境的配置
在终端进入项目目录并进行如下操作
请确保已经安装node.js
npm init vue@latest
初步学习不需要开启额外的功能 选择no 否则会进入ts的启动
cd <your-project-name>
npm install
npm run dev
框架构建完成

初步认识vue文件结构
部分设置没有启用 图片展示的是最基本的vue框架

assets:是用于存放着各种静态文件,比如图片,css等。
components:用于存放自定义的公共组件,即非路由组件,区别views包下的page组件。router:vue-router路由文件。index.js中引入views包下的.vue。store:是vuex的文件,主要用于项目里边的一些状态保存。比如state、mutations、actions、getters、modules。
views:用于存放我们写好的各种页面,即路由组件,比如Login.vue,Home.vue。
App.vue:是主vue模块,主要是使用router-link引入其他模块,App.vue是项目的主组件,所有的页面都是在App.vue下切换的。
main.js:程序入口文件,主要作用是初始化vue实例,同时可以在此文件中引用某些组件库或者全局挂载一些变量。


使用npm run dev 可以打开html的服务

指令和条件渲染
展示相关文件

vue主模块
<script setup>
import Start from "@/components/start.vue";
import ModelInsert from "@/components/model-insert.vue";
import ConditionalRender from "@/components/Conditional-Render.vue";
</script>
<template>
<main>
<start />
<ModelInsert />
<ConditionalRender />
</main>
</template>
<style scoped>
main{
}
</style>

子组件1
<template id="app">
<!--紧跟着的并列元素 可以通过v-if/v-else-if/v-else来实现条件渲染-->
<div class="top" v-if="number>50">
<p v-if="number>200">渲染:大于200</p>
<p v-else-if="50<number<200">渲染:50-200</p>
<p v-else>渲染:小于50</p>
</div>
<div v-else>不渲染</div>
<!-- 通常更推荐template来代替包装 因为使用div包装会渲染div标签自身 而template不会-->
<template v-if="show">
<p>静夜思</p>
<p>李白</p>
<p>床前明月光</p>
</template>
<!-- v-show是通过css样式不展示来实现条件渲染 当条件为假时 v-show元素依然会存在DOM结构中-->
<!-- 在实际的条件渲染中,v-if在频繁切换时的性能消耗更高 若组件渲染条件频繁切换建议使用v-show -->
<div v-show="number>200">
v-show渲染
</div>
</template>
<script>
export default {
name: "Conditional-Render",
data(){
return{
number:100,
show:true,
}
}
}
</script>
<style scoped>
@import "@/assets/Conditional-Render.css";
</style>

子组件2
<template id="app">
<h1>开始Vue的旅程</h1>
<!-- 使用v-bind来实现来动态绑定便签的样式表 尝试修改:-->
<!-- <h1 v-bind:id="id_1">hello</h1>-->
<p>模板数字: {{number}}</p>
<!-- {{}}在插值时还可以直接使用js的表达式 尝试修改:-->
<!-- <p>模板数字: {{number ** 2}}</p>-->
<p>模板结果: {{result}}</p>
<!-- 如果使用v-once指令那么一旦渲染则不再变化 尝试修改:-->
<!-- <p v-once>模板结果: {{result}}</p> -->
<!-- 对于html代码的插值则需要使用v-html -->
<p>html插值文字: <span v-html="insert_html_code"></span></p>
<!-- v-if是条件渲染 只有其为布尔值true时才会被渲染-->
<p v-if="true">这是一段会被渲染的文字</p>
<p v-if="false">这是一段不会被渲染的文字</p>
<!-- 在参数后面还可以增加修饰符 修饰符会为vue增加额外的功能 以下指令修饰符可以去除输入框首尾的空格-->
<input v-model.trim="content" placeholder="请输入备注!">
<br>
<button class="btn-1" v-on:click="clickButton">换算</button>
<p class="text-1">对于v-bind可以省略 直接使用:来绑定 对于v-on可以把v-on:缩写成@</p>
<p>本节小结:初步接触一些模板指令 v-on/v-if/v-html/v-bind/v-once</p>
</template>
<script>
export default {
name: "modelInsert",
data(){
return{
number:0,
result:0,
insert_html_code:"<span style=\"font-family: 楷体, sans-serif; color: #a261e8\">理论化学</span>",
id_1:'top_hello'
}
},
methods:{
clickButton() {
this.number = this.number + 1
this.result = this.number ** 2
}
}
}
</script>
<style scoped>
@import "@/assets/model-insert.css";
</style>

子组件3
<template>
<button class="btn" @click="count++">第 {{count}} 次点击</button>
</template>
<script>
export default {
name: "start",
data(){
return{
count:0,
}
}
}
</script>
<!--实现对组件css的引用-->
<style scoped>
@import "@/assets/start.css";
</style>

css1
*{
margin: 0;
}
.top{
margin-top: 20px;
}
p{
color: #41c557;
}

css2
*{
margin: 0;
}
h1{
color: #2a9fde;
font-family: 楷体, sans-serif;
letter-spacing: 2px;
font-size: 20px;
}
p{
height: 20px;
color: #5bc8ea;
font-family: 楷体, sans-serif;
}
.btn-1{
margin-top: 5px;
margin-left: 50px;
background-color: #e2d1f3;
color: #128625;
border: 2px solid #5bc8ea;
}
.text-1{
text-indent: 2em;
margin-top: 10px;
}
input{
margin-top: 10px;
width: 200px;
text-align: center;
}

css3
.btn{ font-family: 楷体, sans-serif;
color: #dc1919;
background-color: #e2d1f3;
border: 2px solid #bfcfd9;
}

启动html服务
