zoukankan      html  css  js  c++  java
  • vue中html、css、js 分离

    在正常的创建和引用vue文件都是html、css、js三者在一起的,这样写起来虽然方便了,但是页面比较大或者代码比较多的情况下,即使使用组件有时代码也比较多,简单来说查找不变不利于编程,大的来说影像优化性能。将代码中的html、css、js分离出来是个很好的选择。

    首先,在 .vue文件中设置如下:

    <template src="./record.html"></template>
    <script src="./record.js"></script>
    <style src="./record.scss" lang="scss"></style>

    新建index.js文件,如下:

    import record from './record.vue';
    
    export default record;

    建立相对应的record.html、record.js、record.scss的文件,就可以了,拿.js来说:

    // -- NAME --
    
    const name = 'record';
    
    // -- DATA --
    
    const data = function () {
      return {
        
      };
    };
    
    // -- COMPUTED --
    
    const computed = {
     
    };
    
    // -- COMPONENTS -- 
    
    const components = {
    }
    
    // -- WATCH --
    
    const watch = {
      
    };
    
    // -- METHODS --
    
    const methods = { 
      
    };
    
    // -- HOOKS --
    
    function mounted() {
    }
    
    // == EXPORT ==
    
    export default {
      name: name,
    
      data: data,
    
      components: components,
    
      computed: computed,
    
      watch: watch,
    
      methods: methods,
    
      mounted: mounted
    };

    另一种方法可以直接引用:

    <template>
      <div>html</div>
    </template>
    <script src="./***.js"></script>
    <style src="./***.css"></style>

    形式多样,但根本思想都是分离独立文件,引入加载

  • 相关阅读:
    结合php ob函数理解缓冲机制
    php中的require-once
    PHP面试题基础问题
    Jquery显示与隐藏input默认值的实现代码
    win7下cmd常用命令
    采用cocos2d-x lua 的listview 实现pageview的翻页效果之上下翻页效果
    采用cocos2d-x lua 制作数字滚动效果样例
    luac++
    lua相关笔记
    cornerstone知识点
  • 原文地址:https://www.cnblogs.com/wy120/p/10179901.html
Copyright © 2011-2022 走看看