顯示具有 Vue 標籤的文章。 顯示所有文章
顯示具有 Vue 標籤的文章。 顯示所有文章

2019年10月21日 星期一

[Vue] 路由

簡單路由

  • Step1: 定義路由
const routes = {
  '/': Home,
  '/about': About
}
  • Step2: 在root設定
new Vue({
  el: '#app',
  data: {
    currentRoute: window.location.pathname
  },
  computed: {
    ViewComponent () {
      return routes[this.currentRoute] || NotFound
    }
  },
    render (h) { return h(this.ViewComponent) }
})

完整的官方Vue Router

https://router.vuejs.org/zh/
張貼者： 於 沒有留言:
標籤：

[Vue Loader] 簡介

Vue Loader

Vue Loader 是 webpack 的 loaderoader，可以幫助開發者用組件的概念開發 vue 專案。

若不想使用，想要達到同樣效果，可直接使用 vue cli 建立專案。

使用步驟

  • 建立npm套件記錄檔
npm init y
  • 安裝webpack
npm install webpack webpack-cli --save-dev
  • 建立預設資料夾
mkdir src
mkdir dist
  • 加入指令至package.json
"build": "webpack"
  • 加入 dist 中的 index.html
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app"></div>
    <script src="main.js"></script>
</body>

</html>
  • 加入 index.js 至 src 中
  • webpack基礎架構完成，後續進入vue環境設定
  • 安裝vue loader
npm install -D vue-loader vue-template-compiler
  • 加入web.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      // 它会应用到普通的 `.js` 文件
      // 以及 `.vue` 文件中的 `<script>` 块
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      // 它会应用到普通的 `.css` 文件
      // 以及 `.vue` 文件中的 `<style>` 块
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    // 请确保引入这个插件来施展魔法
    new VueLoaderPlugin()
  ]
}
  • 加入 Vue root 至  index.js 中(記得安裝vue, npm install vue --D)
import Vue from 'vue'

new Vue({
    el: '#app',
    mounted: function () {
        console.log('Hello World');

    }
})
  • 加入其他轉譯相關套件
npm install babel-core babel-loader --save-dev
npm install  vue-style-loader css-loader --save-dev

*. babel-loader改成^7.1.5
  • 加入 resolve 至 webpack config 中

resolve: { 
            alias: { 
                'vue': 'vue/dist/vue.js' 
            } 
        }
  • 使用babel預設參數
npm install babel-preset-env babel-preset-vue --save-dev

加入以下設定至 package.json 中

"babel": {
    "presets": [
      "env",
      "vue"
    ]
  }
張貼者： 於 沒有留言:
標籤：

2019年10月17日 星期四

[Vue CLI] 單文件組件


  • Vue.component是global組件
  • new Vue({    el: '#app' ... }) 可定義容器
通常透過以上2點就可構成 vue 的前台站台，為了方便管理，可用單文件組件的概念來開發。

單文件組件

  • 副檔名: *.vue
  • <template></template>中放html
  • <script></script>中放js
  • <style></style>中放css
  • 同一份檔案包含三個區塊

關注點分離

關注點分離不代表文件類型分離，和其他的框架認知上有根本上的差異

Vue Loader

.vue文件需要透過 vue loader 編譯成最後結果
張貼者： 於 沒有留言:
標籤：

2019年10月16日 星期三

[Vue CLI] CLI服務

@vue/cli-service

這包程式碼提供了開發、打包的指令。

使用vue cli建立的專案內建二了指令

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  }
}

vue-cli-service serve [options] [entry]

啟動開發站台

options
  •   --open    在服務器啟動時打開瀏覽器
  •   --copy    在服務器啟動時將 URL 複製到剪切版
  •   --mode    指定環境模式 (默認值：development)
  •   --host    指定 host (默認值：0.0.0.0)
  •   --port    指定 port (默認值：8080)
  •   --https   使用 https (默認值：false)

vue-cli-service build [options] [entry|pattern]

打包程式碼

options
  •   --mode        指定環境模式 (默認值：production)
  •   --dest        指定輸出目錄 (默認值：dist)
  •   --modern      面向現代瀏覽器帶自動回退地構建應用
  •   --target      app | lib | wc | wc-async (默認值：app)
  •   --name        庫或 Web Components 模式下的名字 (默認值：package.json 中的 "name" 字段或入口文件名)
  •   --no-clean    在構建項目之前不清除目標目錄
  •   --report      生成 report.html 以幫助分析包內容
  •   --report-json 生成 report.json 以幫助分析包內容
  •   --watch       監聽文件變化

vue-cli-service inspect [options] [...paths]

檢查 vue cli 的 web config

張貼者： 於 沒有留言:
標籤：

[Vue CLI] 預設配置

.vuerc

在 windows 作業系統中，User/安裝過vue的登入者底下，會有一個.vuerc的檔案，裡面紀錄用vue create建立專案時，的預設配置。
張貼者： 於 沒有留言:
標籤：

2019年10月14日 星期一

[Vue CLI] 插件

vue ui

可用圖形化介面了解整個框架的全貌

vue add

  • 可在現存的vue專案中，加入第三方套件
  • 主要目的為控管vue專案的第三方套件，跟vue無關的套件不要用vue add安裝
e.g. vue add eslint

router和vuex

  • 加入router
vue add router

*. 內件基本架構，使用非常方便
  • 加入vuex
vue add vuex

vue invoke

套件已安裝，但是想改參數的時候，可以使用這個命令

e.g. 

之前已經做過這個指令 vue add eslint，但是想改eslint的參數

可以下這個指令 vue invoke eslint --config airbnb --lintOn save
張貼者： 於 沒有留言:
標籤：

2019年10月13日 星期日

[Vue CLI] 安裝

安裝Vue CLI

npm install -g @vue/cli

安裝完成後檢查版本

vue --version

建立專案

  • 命令安裝
vue create project-name
  • 介面安裝(易上手)
vue ui

快速原型開發

  • 需額外安裝service
npm install -g @vue/cli-service-global

  • 安裝完可使用以下指令
  1. vue serve
  2. vue build
張貼者： 於 沒有留言:
標籤：

2019年10月6日 星期日

[Vue] 動態組件&異步組件

動態組件

<component v-bind:is="currentTabComponent"></component>
  • 在切換component時, 預設會重新渲染DOM
  • <keep-alive></keep-alive> 可以不用重新渲染DOM
<keep-alive>
    <component v-bind:is="currentTabComponent"></component>
</keep-alive> 

異步組件

  • 在非同步, 有條件的情境下, 載入組件
Vue.component('function1', function (resolve, reject) {
    setTimeout(() => {
        resolve({
            template: `
            <div>        
                <counter></counter>
                <counter></counter>
            </div>`
        })
    }, 3000);
})

延伸關鍵字 webpack + async vue component

張貼者： 於 沒有留言:
標籤：

2019年10月3日 星期四

[Vue] 插槽 2/2

作用域插槽

  1. 父組件可以使用子組件的data
  2. 被綁定在slot上的prop稱為: 插槽 prop
  • 父組件
<my-tab>
</my-tab>
  • 子組件
Vue.component('my-tab', {
    data: function () {
        return {
            tabName: 'Default Tab Name'
        }
    },
    template: `
    <div>
    <br>
    <a style="border: 1px solid black;">
        <slot v-bind:tabName="tabName">預設內容</slot>
    </a>
    <br>
    <slot name="content"></slot>
    </div>
    `
})

自定義插槽prop名稱

  1. 在子組件上, 用v-slot可自定義插槽prop的名稱
  2. 簡寫: <my-tab v-slot="myChildVariable">...</my-tab>
  3. 簡寫和作用愈插槽寫法不可混用
  • 父組件
        <my-tab>
            <template v-slot:default="childProp">
                {{childProp.tabName}}
            </template>
        </my-tab>
  • 子組件
Vue.component('my-tab', {
    data: function () {
        return {
            tabName: 'Default Tab Name'
        }
    },
    template: `
    <div>
    <br>
    <a style="border: 1px solid black;">
        <slot v-bind:tabName="tabName">預設內容</slot>
    </a>
    <br>
    <slot name="content"></slot>
    </div>
    `
})

解構插槽prop

1. 插槽原理: 將插槽內容包括在一個傳入單個參數的函數裡，如下

function (props) {
  // 插槽內容
}

所以可以套入"解構"的概念，控制子組件的屬性
<my-tab>
    <template v-slot="{tab}">
        {{tab.tabName2}}
    </template>
</my-tab>

2. 解構之餘，同時也可重新命名屬性
<my-tab>
    <template v-slot="{tab: myTabCollection}">
        {{myTabCollection.tabName2}}
    </template>
</my-tab>

*.v-slot的縮寫符號: #


張貼者： 於 沒有留言:
標籤：

2019年10月2日 星期三

[Vue] 插槽 1/2

<slot></slot>

  1. 可以在自定義的component中，預留一個空間，給父組件插入內容。
  2. 子組件和父組件的作用域各自獨立，不可交互使用。
  • 子組件
Vue.component('my-tab', {
    template:`
    <a style="border: 1px solid black;">
        <slot></slot>
    </a>
    `
})
  • 父組件
<my-tab>
     slot content
     <br>
    {{currentTab}}
</my-tab>

後備內容

<slot></slot>中可以設定預設內容，在無任何資料時，自動顯示
  • 子組件
Vue.component('my-tab', {
    template:`
    <a style="border: 1px solid black;">
        <slot>預設內容</slot>
    </a>
    `
})
  • 父組件
<my-tab>
     slot content
     <br>
    {{currentTab}}
</my-tab>

具名插槽

  1. slot可以給定名稱(name)，就可以預留多個空間給父組件。
  2. 沒有名稱(name)的slot，預設名稱: default。
  • 子組件
Vue.component('my-tab', {
    template:`
    <div>
    <a style="border: 1px solid black;">
        <slot>預設內容</slot>
    </a>
    <br>
    <slot name="content"></slot>
    </div>
    `
})
  • 父組件
<my-tab>
    slot content
    <br>
    {{currentTab}}
    <template v-slot:content>
        具名slot，給定名稱content，插入指定位置
    </template>
</my-tab>

張貼者： 於 沒有留言:
標籤：

2019年10月1日 星期二

[Vue] 自定義事件

自定義事件命名

  • 駝峰命名不會自動轉換成kebab-case，盡量使用kebab-case
e.g.

this.$emit('myCustomEvent');

// 這行不會有效果
<component v-on:my-custom-event="onEvent"></component>
  • 但是會自動轉成小寫
上面那個宣告需要使用以下寫法才監聽的到
<component v-on:myCustomEvent="onEvent"></component>

原生事件綁定至自製組件(進階)

1. 使用自製組件，綁定原生事件的作法
  • 父組件
<my-checkbox v-model="YesOrNo" v-on:focus.native="onFocus"></my-checkbox>
  • 子組件
<input
        type="checkbox"
        v-bind:checked="checked"
        v-on:change="$emit('change',$event.target.checked)"
    >
以上可以監聽子組件根元素(input)的focus事件，並觸發父組件的onFocus

2. 當根元素不是input，卻又想要做到上面這件事情時

$listeners(進階)

  • 父組件
<my-checkbox v-model="YesOrNo" v-on:click.native="onClick"></my-checkbox>
  • 子組件
computed: {
        checkboxListener: function () {
            var vm = this;
            return Object.assign({},
                this.$listeners,
                {
                    click: function (event) {
                        vm.$emit('click', event.target.checked)
                    },
                    change: function (event) {
                        vm.$emit('change', event.target.checked)
                    },
                })
        }
    },
    template: `
    <label>
    {{label}}
        <input
            type="checkbox"
            v-bind="$attrs"
            v-bind:checked="checked"         
            v-on="checkboxListener"
        >
    </label>
    `
關鍵字預留 : .sync
張貼者： 於 沒有留言:
標籤：

2019年9月29日 星期日

[Vue] Prop

prop命名


  • Vue.component('myInput', ...) 等同於 Vue.component('my-input', ...)

prop類型

  • 預設寫法
 props: ['value']
  • 型別指定寫法
    props: {
        value: any,
        prefix: String,
        ...
    }

prop特性


  • 沒給值預設值為true
<my-input type="text" v-model="title" show-prefix>


Vue.component('myInput', {
    props: {
        value: String,
        prefix: String,
        showPrefix: Boolean
    },
...

單向資料流

  • 父組件的props更新後 => 更新子元件的props
  • 子組件的props更新不會 => 更新父組件的props
  • 不應該在子組件中變更props
  • 若props的型別為Object或Array，子組件變更時，會影響到父組件

prop驗證

  • 無驗證
props: {
    value: [String, Number]
}
  • 加入驗證
props: {
    value: {
        type: [String, Number],
        required: true, // 必填
        default: 'success', // 預設值
        // 自定義驗證
        validator: function (value) {
        // 這個值必須匹配下列字符串中的一個
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    },
    ...
}

type

可以是任一原生型別
  • String
  • Number
  • Boolean
  • Array
  • Object
  • Date
  • Function
  • Symbol
也可以是自定義型別

class和style

從父組件給值時, 會和子組件合併
e.g.
  • 子組件
<input class="AAA">
  • 父組件
<my-input class="BBB">

最後渲染出來會是 <input class="AAA BBB">

張貼者： 於 沒有留言:
標籤：

2019年9月26日 星期四

[Vue] 組件註冊

組件名稱

  • Vue.component('組件名稱', {...})
  • 建議命名時
    • 全小寫
    • 用一個前缀詞加上hyphon符號(-), 避免和其他名稱重複
    • e.g. my-header

作用域

  • 全域註冊
註冊方式: Vue.component('組件名稱', {...})
  • 區域註冊
    • 好處: 在component沒被使用時，就不會被build，產生多餘的程式碼
    • 在子組件裡面也要使用的話，也需要在子組件中，再宣告一次

component宣告方式

const FooterComponent = {
    template: '<div>copyright @ blabalbala</div>'
}

根組件宣告方式

new Vue({
  ...
  components: {
    'my-footer': FooterComponent
  }
 ...
})

模塊系統

全域組件
  • 將各個component獨立成一個檔案，匯入匯出在根組件前載入
局部組件
  • 若有配合webpack或babel再深入研究
關鍵字: require, import

張貼者： 於 沒有留言:
標籤：

[Vue] 組件基礎 2/2

組件的HTML規則


  • 只能有一個根元素
e.g. 根結點不能二個元素並列, 一定要有明確的一個根結點
  • 不行:
<h1></h1>
<div></div>
  • 可以: (再包一層)
<div>

    <h1></h1>
    <div></div>
</div>
  • 模板字符串(``) 不支援IE, 需用折行轉譯字符代替
  • 不支援IE
Vue.component('component-name', {
template:`content
                line2
                line3`
}
  • 可支援IE
Vue.component('component-name', {
template:"content\
                line2\
                line3"
}

監聽子組件事件

子組件向外發出事件的方法
  • 子組件
Vue.component('my-header', {
    props: ['title'],
    template: `<div>
    <h1>{{title}}</h1>
    <button v-on:click="$emit('event-emit-test')">event emit</button>
</div>
    `
})
  • 父組件
<my-header title="Vue練習" @event-emit-test="catchClickCount+=1"></my-header>

*. $emit('事件名稱')
*. 接收方用事件名稱直接接收

監聽子組件事件(含參數傳遞)

  • 子組件
Vue.component('my-header', {
    props: ['title'],
    template: `<div>
    <h1>{{title}}</h1>
    <button v-on:click="$emit('event-emit-test',2)">event emit</button>
</div>
    `
})
  • 父組件
<my-header title="Vue練習" @event-emit-test="catchClickCount+=$event"></my-header>

v-model

v-model 就是一個bind和一個event組成的
  • 子組件
Vue.component('my-input', {
    props: ['value'],
    template: `
    <div>
    Hi~~~my input
    <input
        v-bind:value="value"
        v-on:input="$emit('input', $event.target.value)"
    />
    </div>
    `
})
  • 父組件
<my-input v-model="variableName"></my-input>

插槽(slot)

可在自定義的組建中預留空間, 讓父組件放置
  • 子組件
Vue.component('my-block', {
    template: `
    <div class="block">
        <slot></slot>
    </div>
    `
})
  • 父組件
<my-block>
    // 把內容裝進來
</my-block>

動態組件

<component v-bind:is="要綁定的組件"></component>
要綁定的組件有二種用法
  • 組件的名稱
  • 組件本身

其他關鍵字

  • vue is
is="這邊可塞入component"
  • 字符串 (例如：template: '...')
  • 單文件組件 (.vue)
  • <script type="text/x-template">
張貼者： 於 沒有留言:
標籤：

2019年9月25日 星期三

[Vue] 組件基礎 1/2

Vue的組件(Component)使用

  • 可透過 Vue.component 來自定義組件
Vue.component('counter', {
data: function () {
    return {
        count: 0
    }
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

  • 要在 new Vue({ el: '#app' }) 的作用愈中才能使用

<div id="app">
<counter></counter>
</div>

  • new Vue(...)中有的方法Vue.component(...)中絕大多數都有
    • e.g. data, computed, watch, methods 生命週期鉤子(life cycle hook)等
  • Vue.component(...)的data是函數

組件註冊

分為二種類型
  • 全域註冊
    • 顧名思義就是在根組件之下任何地方皆可使用
    • 透過 Vue.component(...)產生
  • 局部註冊

Prop

  • 傳入參數給組件
  • 可搭配v-for v-if ...等指令使用
張貼者： 於 沒有留言:
標籤：

2019年9月23日 星期一

[Vue] 表單輸入綁定

v-model

可用在
  • <input>
<input v-model="userName" placeholder="user name">
<p>User name is: {{userName}}</p>
  • <textarea>
<textarea v-model="remark" placeholder="remark"></textarea>
<p style="white-space: pre-line">{{remark}}</p>
  • <input type="checkbox"> 
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{checked}}</label>
  • group <input type="checkbox"> 
<input type="checkbox" id="memo1" value="memo1" v-model="checkedMemo">
<label for="memo1">Memo1</label>
<input type="checkbox" id="memo2" value="memo2" v-model="checkedMemo">
<label for="memo2">Memo2</label>
<input type="checkbox" id="memo3" value="memo3" v-model="checkedMemo">
<label for="memo3">Memo3</label>
<p>Checked Memo: {{checkedMemo}}</p>
  • <input type="radio">
<input type="radio" id="first" value="first" v-model="picked">
<label for="first">first</label>
<input type="radio" id="second" value="second" v-model="picked">
<label for="second">second</label>
<p>Picked: {{picked}}</p>
  • <select>
<select v-model="selected">
<option disabled value="">請選擇</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<p>Selected: {{selected}}</p>
  • group <select>
<select v-model="selected2" multiple>
<option disabled value="">請選擇</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<p>Selected: {{selected2}}</p>

修飾符

  • .lazy
    • onchange時才改變值
  • .number
    • 將值轉換為number, 轉換失敗變成預設值
  • .trim
    • 去除左右空白
張貼者： 於 沒有留言:
標籤：

[Vue] 事件處理

v-on

  • v-on:事件名稱="簡易邏輯"; e.g. v-on:click="total = total + 1"
  • v-on:事件名稱="自定義事件"; e.g. v-on:click="onClick"
  • v-on:事件名稱="自定義事件(傳入參數)"; e.g. v-on:click="doSomething(var1)"
  • v-on:事件名稱="自定義事件(傳入參數, $event)"; $event為原生DOM事件

事件修飾符

常見的修飾符
  • .stop
    • 停止propogation
    • event.stopPropagation()的意思
  • .prevent
    • 停止default event
    • event.preventDefault()的意思
  • .capture
    • 使用capture監聽事件
    • 由外而內觸發事件(預設是冒泡, 由內而外)
  • .self
    • 只處理單一層DOM的事件
  • .once
    • 只觸發一次事件
  • .passive
    • 被動監聽scroll
張貼者： 於 沒有留言:
標籤：

2019年9月19日 星期四

[Vue] 列表渲染

v-for

  • 可以額外顯示 index
  • in 可改 of

index.html

        <ul>
            <li v-for="(item, index) of items">
                {{item.message}}
            </li>
        </ul>

index.js

var app = new Vue({
    el: '#app',
    data: {
    items: [
         { message: 'message 1' },
        { message: 'message 2' }
    ]
}
})

v-for 可和 Object 一起使用

  • 可以額外顯示屬性名稱
  • 可以額外顯示 index
  • 順序是依照 Object.keys() 的順序, 不保證每個瀏覽器順序相同
  • 建議和 "key" 屬性相互搭配,, 避免順序變動時, 顯示異常

index.html

        <ul>
            <li v-for="(value, name) in object">
                {{value}}
            </li>
        </ul>

index.js

var app = new Vue({
    el: '#app',
    data: {
     object: {
         name: 'Shawn',
         sex: 'male',
         phone: '0912345678'
     }
}
})


張貼者： 於 沒有留言:
標籤：

2019年9月16日 星期一

[Vue] 條件渲染

v-if

  • 可搭配 v-else 使用
    • 必須緊跟在 v-if 或 v-else-if 之後
  • 也可搭配 v-else-if 使用
    • 必須緊跟在 v-if 之後
  • 可搭配<template>使用
    • 實際渲染時, 不會存在的元素

index.html

<div v-if="showHint">看情況顯示文字</div>

index.js

var app = new Vue({
    el: '#app',
    data: {
showHint: true
}
})

渲染機制

  • v-if, v-else 在使用時, 重複的內容"不會"重新渲染
  • 若要重新渲染, 應加上"key"屬性
  • 沒被加上key的元素, 依然會重複使用
        <div v-if="showHint">
            看情況顯示文字 <br>
            <input type="text" key="input1">
        </div>
        <div v-else>
            Hi v-else顯示 <br>
            <input type="text" key="input2">
        </div>

v-show

  • 單純的css display切換
  • DOM在一開始就會渲染

v-if , v-show

  • 頻繁的切換用 v-show
  • v-if 耗用的資源較多

v-if 和 v-for 同時使用

  • v-for先執行, v-if後執行
  • 官方不建議這樣使用
張貼者： 於 沒有留言:
標籤：

2019年9月15日 星期日

[Vue] Class與Style綁定

Class動態綁定(v-bind:class-name)

  • 動態class可和一般class共存
  • 可綁定一個或多個class
  • vue component 也可套用

index.html

        <div v-bind:class="{'name-block':true}">
            內容文字
<button @click="changeColor">Change background color</button>
        </div>

index.css

.name-block {
  background-color: antiquewhite;
  margin: 8px;
  padding: 8px;
}

.dark-theme {
  background-color: brown;
  color: white;
}

index.js

var app = new Vue({
    el: '#app',
    data: {
isDark: false
},
methods: {
changeColor: function () {
            this.isDark = !this.isDark
        }
}
)

Class動態綁定 - 2

  • 可將整個class object放在javascript中

index.html

        <div class="block age-block" :class="classObject">
            你幾歲?
            <div>Reply: {{reply}}</div>
            <input type="text" v-model="age">
        </div>

index.css

.block {
  margin: 8px;
  padding: 8px;
}
.age-block {
  background-color: bisque;
}

index.js

var app = new Vue({
computed: {
        classObject: function () {
            return { 'dark-theme': this.isDark }
        }
    }
})

Inner Style動態綁定(v-bind:style-name)

  • 若有需要的話，vue會自動補上瀏覽器引擎前綴詞, e.g. transform

index.html

        <div class="block hello-world-block" :style="{fontSize: fontSize + 'px'}">
            <input type="text" v-model="title">
            <div>{{title}}</div>
            <div>Reverse Title: {{reverseTitle}}</div>
        </div>

index.css

.hello-world-block {
  background-color: burlywood;
}

index.js

var app = new Vue({
    el: '#app',
    data: {
     fontSize: 30
}
})

張貼者： 於 沒有留言:
標籤：
訂閱： 文章 (Atom)