• 技术文章 >web前端 >前端问答

    vue结尾的是什么文件

    藏色散人藏色散人2022-11-19 16:54:06原创161

    vue结尾的是vue.js自定义的一种文件格式,称为单文件组件;一个“.vue”文件就是一个单独的组件,在文件内封装了该组件相关的html、css和js,实现了对一个组件的封装。

    大前端零基础入门到就业:进入学习

    本教程操作环境:windows7系统、vue3、Dell G3电脑。

    vue结尾的是什么文件?

    94810999020bf0c98ba21139f90a38d.jpg

    d03c06d8d1e23106e0d1c12c50a5edf.jpg

    单文件组件 :

    1、以.vue结尾的文件,是vue.js自定义的一种文件格式,称为单文件组件

    2、一个.vue文件就是一个单独的组件,在文件内封装了该组件相关的html、css和js,实现了对一个组件的封装。

    3、.vue文件由三部分组成

    <tenplate>
    <!--html,组件的页面结构-->
    </template>
    
    <script>
    //js,组件的功能配置
    </script>
    
    <style>
    /*css,组件的样式*/
    </style>

    自己定义一个组件:

    06ac5ae734f12641694f63492eb137a.jpg

    CompA.vue

    <template>
    <div>
    <h2>自定义组件</h2>
    <p>{{ name }}</p>
    <button @click="change">修改name</button>
    </div>
    </template>
     
    <script>
    export default{
    data(){
    return{
    name:"huit"
    }
    },
    methods:{
    change(){
    this.name="juju"
    }
    }
    }
    </script>
     
    <style>
    h2{
    color:red;
    }
    </style>

    4f20fd72ee72e914f49d8ac9459ea26.jpg

    App.vue

    <template>
      <!-- <img alt="Vue logo" src="./assets/logo.png">
      <HelloWorld msg="Welcome to Your Vue.js App"/> -->
      <!-- <comp-a></comp-a> -->
      <!-- <CompA></CompA> -->
      <CompA/>
    </template>
     
    <script>
    // import HelloWorld from './components/HelloWorld.vue'
    import CompA from './components/CompA'  //可以省略后缀名
     
    export default {
      name: 'App',
      components: {
        // HelloWorld
    // 'comp-a':CompA
    // CompA:CompA //驼峰式写法
    CompA  //帕斯卡式,首字母大写,ES6的简写
      }
      
    }
    </script>
     
    <style>
    #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

    浏览器输入:http://localhost:8080/

    88ed9f408aefd755657b0e3ec511506.jpg

    推荐学习:《vue.js视频教程

    以上就是vue结尾的是什么文件的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:Vue
    上一篇:jquery有trim方法吗 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• 实战:vscode中开发一个支持vue文件跳转到定义的插件• 深入理解vue2中的VNode和diff算法• Vue跳转页面如何隐藏底部导航tabbar?两种方法介绍• vue3安装太卡怎么办• vue中怎么实现点击切换页面
    1/1

    PHP中文网