0
点赞
收藏
分享

微信扫一扫

IOS面试题object-c 136-140

月白色的大狒 03-18 07:00 阅读 4

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>
举报

相关推荐

0 条评论