Vue学习笔记

发表于 2020-12-03本文字数 字阅读时长 分钟
vue前端全栈

rgba(250,250,250,var(--un-bg-opacity))

通过一天时间了解了一下vue,把一些对于新人来说比较混淆/不清楚的概念总结了一下

Vue基本组件学习记录

简单组件sample

Image

局部注册

Image

基础指令

v-bind

v-bind解释

Image

v-bind动态赋值给prop

html
    <div id='app'>
    <a v-bind:href="url">link</a>
    
    </div>


    <script>
    var vm = new Vue({
        el:'#app',
        data:{
            url:'http://www.baidu.com/'
        }
    })


    
    </script>
Image

v-on

监听事件指令:v-on

Image

v-if

html
 <div id='app'>
    <h1 v-if="awesome">Vue is awesome!</h1>
    <h1 v-else>Oh no 😢</h1>
    
    </div>


    <script>
    var vm = new Vue({
        el:'#app',
        data:{
            awesome:false
        }
    })


    
    </script>

单文件组件

项目基础

Image

然后在你需要创建项目的文件夹路径下输入:vue ui

然后 创建项目

目录结构

public 打包后部署到生产环境

src 开发目录

src -components 组件目录

App.vue 入口文件

helloword.vue 单文件按钮

如何运行

如图

Image
Image

访问终端显示的地址

单文件组件的结构

script 声明数据,属性,方法

img

然后在App.vue import这个单文件组件,然后在components中局部注册这个组件

阅读次数
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v3.3.0
Valaxy v0.18.6 驱动 | 主题 - Hairy v1.2.4