1.目录构建规范

2.src 文件说明

assets: 放置静态资源，包括公共的 css 文件、 js 文件、iconfont 字体文件、img 图片文件以及其他资源类文件。之所以强调是公共的 css 文件，是因为要在组件的 css 标签里加入 ‘scoped‘ 标记，将其作用范围限制在此组件以及调用它的父级组件中，避免污染全局样式；
common：公共的动态的脚本、样式。在实际中，样式可能是各种预处理语言写的，请自行组织目录结构。
components：放置通用模块组件。项目里总会有一些复用的组件，例如弹出框、发送手机验证码、图片上传等，将它们作为通用组件，避免重复工作；
config: 放置与后台 api 相关的文件。这里面有 axios 库的实例配置文件、使用配置的 axios 实例接入 api 获取数据的函数的集合的文件；
mixins: 放置混合选项的文件。具体来说，相当于是公用函数的集合，在组件中引用时，可以作用于组件而不必书写重复的方法；
plugins：放置插件的文件。例如ant-design-vue.js和vuetify.js；
router: 放置路由设置文件，指定路由对应的组件；
store: 数据中心。放置 vuex 需要的状态关联文件，设置公共的 state、mutations 等；
util：放常用的函数。
views：所有业务逻辑的页面。例如登录页、用户信息页等。通常是这里的组件本身写入一些结构，再引入通用模块组件，形成完整的页面；
App.vue: 入口组件，pages 里的组件会被插入此组件中，此组件再插入 index.html 文件里，形成单页面应用；
main.js: 入口 js 文件，影响全局，作用是引入全局使用的库、公共的样式和方法、设置路由等。

3.组件/实例的选项顺序

<script> 
  export default {
    name: 'ExampleName',     // 这个名字推荐：大写字母开头驼峰法命名。
    props: {},               // Props 定义。
    components: {},          // 组件定义。
    directives: {},          // 指令定义。
    mixins: [],              // 混入 Mixin 定义。
    data () {                // Data 定义。
      return {
        dataProps: ''        // Data 属性的每一个变量都需要在后面写注释说明用途
      }
    },
    computed: {},            // 计算属性定义。
    created () {},           // 生命钩子函数，按照他们调用的顺序。
    mounted () {},           // 挂载到元素。
    activated () {},         // 使用 keep-alive 包裹的组件激活触发的钩子函数。
    deactivated () {},       // 使用 keep-alive 包裹的组件离开时触发的钩子函数。
    watch: {},               // 属性变化监听器。
    methods: {               // 组件方法定义。
      publicbFunction () {}  // 公共方法的定义，可以提供外面使用
      _privateFunction () {} // 私有方法，下划线定义，仅供组件内使用。
    }
  }
</script>

4.元素特性的顺序

定义 (提供组件的选项)

is
列表渲染 (创建多个变化的相同元素)

v-for
条件渲染 (元素是否渲染/显示)

v-if / v-else-if / v-else / v-show / v-cloak
(v-cloak ：设置样式指令，这些样式会在 Vue 实例编译结束时，从绑定的 HTML 元素上被移除。可用于解决屏幕闪动)

渲染方式 (改变元素的渲染方式)

v-pre / v-once
(v-once：只渲染DOM第一次渲染的值，以后不会改变了)
(v-pre：不和绑定的数据冲突,用于对数据做原封不动的展示,例下：)

<div id="app">
    <h2 >{{message}}</h2>
    <h2 v-pre>{{message}}</h2>
</div>

<script>
  const app = new Vue({
    el : '#app',
    data : {
      message:"你好啊",

    }
  })
</script>

显示如下：

全局感知 (需要超越组件的知识)

唯一的特性 (需要唯一值的特性)

ref / key / slot

双向绑定 (把绑定和事件结合起来)

v-model

其它特性 (所有普通的绑定或未绑定的特性)
事件 (组件事件监听器)

v-on

内容 (覆写元素的内容)

v-html / v-text

<div id="app">
    <h2 >{{message}}</h2>
    <h2 v-text="message"></h2>
</div>
<script>
  const app = new Vue({
    el : '#app',
    data : {
      message:"你好啊",

    }
  })
</script>

// {{ message }} 与v-text=“message” 两种写法效果一致，
// 但是 {{ message }} 这种方式在网络较慢的情况下，
// 会出现不友好的页面显示方式， 所以推荐 v-text 这种写法

<div id="app">
    <h2 v-html="message"></h2>
    <h2 v-text="message"></h2>
</div>
<script>
  const app = new Vue({
    el : '#app',
    data : {
      message:"你好啊",

    }
  })
</script>

// 在语句中存在标签的情况下，v-text会将标签解析为文本；所以要用 v-html 这种写法

效果如下：

5.事件的控制

不要使用 this.parent / this.root 进行控制, 会导致流程难以跟踪. 可使用事件中心进行代替.
事件中心每添加事件, 需要注明事件的名称 / 来源文件 / 流向文件, 以及事件的作用.
事件移除时需要移除事件中心对应事件注明.
组件当中有原生绑定事件, 注意在组建注销前进行移除

cc-blogs

VUE规则说明

1.目录构建规范

2.src 文件说明

3.组件/实例的选项顺序

4.元素特性的顺序

5.事件的控制