欢迎光临散文网 会员登陆 & 注册

vue3-初步接触/指令和条件渲染

2023-04-19 23:53 作者:芜湖小量化  | 我要投稿

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实例,同时可以在此文件中引用某些组件库或者全局挂载一些变量。

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>模板数字:&nbsp;{{number}}</p>
 <!-- {{}}在插值时还可以直接使用js的表达式 尝试修改:-->
 <!-- <p>模板数字:&nbsp;{{number ** 2}}</p>-->
 <p>模板结果:&nbsp;{{result}}</p>
 <!--  如果使用v-once指令那么一旦渲染则不再变化  尝试修改:-->
 <!--  <p v-once>模板结果:&nbsp;{{result}}</p>  -->
 <!--  对于html代码的插值则需要使用v-html  -->
 <p>html插值文字:&nbsp;<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服务

相关语法包含其中,可以尝试


vue3-初步接触/指令和条件渲染的评论 (共 条)

分享到微博请遵守国家法律