Vue.js

暴力入门与组件开发

MVVM

感觉已经被掏空

10秒钟上手

{{前端模板}}
→双向绑定←
数据驱动$data
<!DOCTYPE html>
<html lang="en">
    <head>
      <title>Document</title>
    </head>

    <body>
      <div id="weibo" class="panel callout radius">
        <h1>{{ haha }}</h2>
      </div>
    
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
      new Vue({
          el: "#weibo",
          data() {
            return {
              haha: 2333,
            };
          },
      })
    </script>
    </body>
</html>

主要概念

  • 构造器
  • 组件系统
  • 指令
  • 生命周期

构造器

new Vue({
    el: '<jQueryStyleSelector>',
    
    template: '<id || inline template>',
    
    data: {
        props: 'that are visible in templates',
        they: 'can be referenced from methods with this.propName'
        first_name: "John",
        last_name: "Doe"
    },

    computed: {
        full_name(){
            return this.first_name + this.last_name; //John Doe    
        }
    },  

    methods: {
        customMethodsAlso(){
            //here we have access to data, computed methods also
        }
    },
    // 生命周期钩子
    created: function(){},
    destroyed: function(){},

})

构造器常见选项

  • data
  • created
  • methods
  • computed
  • components
  • watch
  • props

组件系统

HTML
CSS
JS

<template></template>
<style></style>
<script></script>

m.weibo.cn v8
组件划分

CSS 选择器执行效率

1.id选择器(#myid)
2.类选择器(.myclassname)
3.标签选择器(div,h1,p)
4.相邻选择器(h1+p)
5.子选择器(ul < li)
6.后代选择器(li a)
7.通配符选择器(*)
8.属性选择器(a[rel="external"])
9.伪类选择器(a:hover, li:nth-child)

指令

Vue.directive('my-directive', {
  bind: function () {
    // 准备工作
    // 例如,添加事件处理器或只需要运行一次的高耗任务
  },
  update: function (newValue, oldValue) {
    // 值更新时的工作
    // 也会以初始值为参数调用一次
  },
  unbind: function () {
    // 清理工作
    // 例如,删除 bind() 添加的事件监听器
  }
})
<div v-my-directive="someValue"></div>

生命周期

v8目录结构

.
├── build/                      # webpack 配置文件
│   └── ...
├── config/                     
│   ├── index.js                # 项目配置文件
│   └── ...
├── src/
│   ├── main.js                 # 全局入口
│   ├── routers.js              # 路由配置
│   ├── views/                  # 路由入口文件
│   │   ├── Main.vue           # 首页feed
│   │   ├── Messages.vue       # “消息”
│   │   └── ...
│   ├── components/             # 组件们
│   │   └── ...
│   ├── filters/                # 全局过滤器
│   │   └── ...
│   └── assets/                 # 资源文件(会被 webpack 处理)
│       └── ...
├── static/                     # 纯静态资源 (不会被 webpack 处理,直接拷贝)
├── test/                       # 测试用例(暂无)
├── .babelrc                    # babel 配置
├── .editorconfig.js            # 编辑器风格配置
├── .eslintrc.js                # eslint 配置
├── index.html                  # 入口静态页模板
└── package.json                # npm 配置
Made with Slides.com