실습해보기

 

{{ message }}

 

마우스를 글에 올려보세요

 

  1. {{ todo.text }}

 

{{ message }}

 

{{ message }}



소스코드

1.
<div id="app" class="demo">{{ message }} </div>
<script>
var app = new Vue({
  el: '#app',
  data: {
    message: '안녕하세요 Vue!'
  }
})
</script>
<p>&nbsp;</p>

2.
<div id="app-2" class="demo"><span v-bind:title="message"> 마우스를 글에 올려보세요 </span></div>
<script>
var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '이 페이지는 ' + new Date() + '에 로드 되었습니다'
  }
})
</script>

3.
<div id="app-4" class="demo">
<ol>
<li v-for="todo in todos">{{ todo.text }} </li></ol></div>
<script>
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'JavaScript 배우기' },
      { text: 'Vue 배우기' },
      { text: '무언가 멋진 것을 만들기' }
    ]
  }
})
</script>

--> 보통 ul을 많이 쓰게되겠죠

4.
<div id="app-5" class="demo">
<p>{{ message }}</p><button v-on:click="reverseMessage">메시지 뒤집기</button> </div>
<script>
var app5 = new Vue({
  el: '#app-5',
  data: {
    message: '메시지 뒤집기!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
</script>

5.
<div id="app-6" class="demo">
  <p>{{ message }}</p>
  <input v-model="message" size="100">
</div>
<script>
var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'write some text..'
  }
})
</script>


6. TEXTAREA로 양방향 바인딩 응용하기


Multiline message is:

{{ message }}




7. checkbox 와 radio button


Checked names: {{ checkedNames }}




Picked: {{ picked }}

다양한 예제는 
https://vuejs.org/v2/guide/ 를 참조


'MEAN Stack > Vue.js' 카테고리의 다른 글

뷰제이에스(vue.js) 실습해보기  (0) 2017.06.03
Vue.js 참고자료  (0) 2017.05.21

http://kr.vuejs.org/

 

 

핵심태그 정리

 

1. 기본 디렉티브

 

1) v-bind

2) v-if 조건문

3) v-for 배열데이터의 화면출력

 

2. 사용자 입력 핸들링

 

1) v-on 이벤트 리스너

2) v-model 양방향 바인딩

 

3. 컴포넌트

1) Vue.component

 

 

 

'MEAN Stack > Vue.js' 카테고리의 다른 글

뷰제이에스(vue.js) 실습해보기  (0) 2017.06.03
Vue.js 참고자료  (0) 2017.05.21

Node.js는 높은 확장성을 고려해 디자인된 웹사이트/애플리케이션 frameWork

 

https://ko.wikipedia.org/wiki/Node.js 참조

 

- Node.js의 활용

 

  1) REST 같은 웹 서비스 API

  2) 실시간 멀티플레이 게임

  3) 도메인 교차 기능이나 서버 측 요청과 같은 웹서비스 백엔드

  4) 웹기반 어플리케이션

  5) 채팅방

 

 

Node.js 설치 - http://nodejs.org

Node.js 설치 위치 - node, npm, node_modules

 

Node.js 패키지 저장소 - http://npmjs.org

 

IDE는 개취이나 웹스톰을 추천합니다. https://www.jetbrains.com/products.html?fromMenu#lang=js

 

 

 

 

package.json 최상위 디렉토리에는 반드시 존재

 

- 해당모듈 및 의존 모듈 정보를 담고 있음, 노드 패키지 관리자에 제공할 다양한 모듈 관련 정보를 포함하고 있음

 

{
  "version": "3.10.10", 
  "name": "npm", --> 패키지의 고유이름
  "description": "a package manager for JavaScript",
  "keywords": [ --> npm 검색 시 사용된 키워드
    "install",
    "modules",
    "package manager",
    "package.json"
  ],
  "preferGlobal": true, --> 모듈의 전역 설치 선호 표시
  "config": {
    "publishtest": false
  },
  "homepage": "https://docs.npmjs.com/",
  "author": "Isaac Z. Schlueter <i@izs.me> (http://blog.izs.me)",
  "repository": {
    "type": "git",
    "url": "https://github.com/npm/npm"
  },
  "bugs": {
    "url": "https://github.com/npm/npm/issues"
  },
  "directories": {
    "bin": "./bin",
    "doc": "./doc",
    "lib": "./lib",
    "man": "./man"
  },
  "main": "./lib/npm.js",
  "bin": "./bin/npm-cli.js", --> 프로젝트와 같이 설치될 바이너리
  "dependencies": { --> 종속성이 있는 모듈과 버전, x를 와일드카드로 사용가능
    "abbrev": "~1.0.9",
    "ansicolors": "~0.3.2",
    "ansistyles": "~0.1.3",
    "aproba": "~1.0.4",
    "archy": "~1.0.0",
    "asap": "~2.0.5",
    "chownr": "~1.0.1",
    "cmd-shim": "~2.0.2",
    "columnify": "~1.5.4",
    "config-chain": "~1.1.11",
    "dezalgo": "~1.0.3",
    "editor": "~1.0.0",
    "fs-vacuum": "~1.2.9",
    "fs-write-stream-atomic": "~1.0.8",
    "fstream": "~1.0.10",
    "fstream-npm": "~1.2.0",
    "glob": "~7.1.0",
    "graceful-fs": "~4.1.9",
    "has-unicode": "~2.0.1",
    "hosted-git-info": "~2.1.5",
    "iferr": "~0.1.5",
    "inflight": "~1.0.5",
    "inherits": "~2.0.3",
    "ini": "~1.3.4",
    "init-package-json": "~1.9.4",
    "lockfile": "~1.0.2",
    "lodash._baseuniq": "~4.6.0",
    "lodash.clonedeep": "~4.5.0",
    "lodash.union": "~4.6.0",
    "lodash.uniq": "~4.5.0",
    "lodash.without": "~4.4.0",
    "mkdirp": "~0.5.1",
    "node-gyp": "~3.4.0",
    "nopt": "~3.0.6",
    "normalize-git-url": "~3.0.2",
    "normalize-package-data": "~2.3.5",
    "npm-cache-filename": "~1.0.2",
    "npm-install-checks": "~3.0.0",
    "npm-package-arg": "~4.2.0",
    "npm-registry-client": "~7.2.1",
    "npm-user-validate": "~0.1.5",
    "npmlog": "~4.0.0",
    "once": "~1.4.0",
    "opener": "~1.4.2",
    "osenv": "~0.1.3",
    "path-is-inside": "~1.0.2",
    "read": "~1.0.7",
    "read-cmd-shim": "~1.0.1",
    "read-installed": "~4.0.3",
    "read-package-json": "~2.0.4",
    "read-package-tree": "~5.1.5",
    "readable-stream": "~2.1.5",
    "realize-package-specifier": "~3.0.3",
    "request": "~2.75.0",
    "retry": "~0.10.0",
    "rimraf": "~2.5.4",
    "semver": "~5.3.0",
    "sha": "~2.0.1",
    "slide": "~1.1.6",
    "sorted-object": "~2.0.1",
    "strip-ansi": "~3.0.1",
    "tar": "~2.2.1",
    "text-table": "~0.2.0",
    "uid-number": "0.0.6",
    "umask": "~1.1.0",
    "unique-filename": "~1.1.0",
    "unpipe": "~1.0.0",
    "validate-npm-package-name": "~2.2.2",
    "which": "~1.2.11",
    "wrappy": "~1.0.2",
    "write-file-atomic": "~1.2.0"
  },
  "bundleDependencies": [
    "abbrev",
    "ansi-regex",
    "ansicolors",
    "ansistyles",
    "aproba",
    "archy",
    "asap",
    "chownr",
    "cmd-shim",
    "columnify",
    "config-chain",
    "debuglog",
    "dezalgo",
    "editor",
    "fs-vacuum",
    "fs-write-stream-atomic",
    "fstream",
    "fstream-npm",
    "glob",
    "graceful-fs",
    "has-unicode",
    "hosted-git-info",
    "iferr",
    "imurmurhash",
    "inflight",
    "inherits",
    "ini",
    "init-package-json",
    "lockfile",
    "lodash._baseindexof",
    "lodash._baseuniq",
    "lodash._bindcallback",
    "lodash._cacheindexof",
    "lodash._createcache",
    "lodash._getnative",
    "lodash.clonedeep",
    "lodash.restparam",
    "lodash.union",
    "lodash.uniq",
    "lodash.without",
    "mkdirp",
    "node-gyp",
    "nopt",
    "normalize-git-url",
    "normalize-package-data",
    "npm-cache-filename",
    "npm-install-checks",
    "npm-package-arg",
    "npm-registry-client",
    "npm-user-validate",
    "npmlog",
    "once",
    "opener",
    "osenv",
    "path-is-inside",
    "read",
    "read-cmd-shim",
    "read-installed",
    "read-package-json",
    "read-package-tree",
    "readable-stream",
    "readdir-scoped-modules",
    "realize-package-specifier",
    "request",
    "retry",
    "rimraf",
    "semver",
    "sha",
    "slide",
    "sorted-object",
    "strip-ansi",
    "tar",
    "text-table",
    "uid-number",
    "umask",
    "unique-filename",
    "unpipe",
    "validate-npm-package-license",
    "validate-npm-package-name",
    "which",
    "wrappy",
    "write-file-atomic"
  ],
  "devDependencies": {
    "deep-equal": "~1.0.1",
    "marked": "~0.3.6",
    "marked-man": "~0.1.5",
    "npm-registry-couchapp": "~2.6.12",
    "npm-registry-mock": "~1.0.1",
    "require-inject": "~1.4.0",
    "sprintf-js": "~1.0.3",
    "standard": "~6.0.8",
    "tacks": "~1.2.2",
    "tap": "~7.1.2"
  },
  "scripts": { --> node 런치 시에 사용하는 console app 전달인자 
    "dumpconf": "env | grep npm | sort | uniq",
    "prepublish": "node bin/npm-cli.js prune --prefix=. --no-global && rimraf test/*/*/node_modules && make doc-clean && make -j4 doc",
    "preversion": "bash scripts/update-authors.sh && git add AUTHORS && git commit -m \"update AUTHORS\" || true",
    "tap": "tap --timeout 300",
    "tap-cover": "tap --coverage --timeout 600",
    "test": "standard && npm run test-tap",
    "test-coverage": "npm run tap-cover -- \"test/tap/*.js\" \"test/network/*.js\" \"test/slow/*.js\" \"test/broken-under-*/*.js\"",
    "test-tap": "npm run tap -- \"test/tap/*.js\" \"test/network/*.js\" \"test/slow/*.js\" \"test/broken-under-*/*.js\"",
    "test-node": "\"$NODE\" \"node_modules/.bin/tap\" --timeout 240 \"test/tap/*.js\" \"test/network/*.js\" \"test/slow/*.js\" \"test/broken-under-nyc*/*.js\""
  },
  "license": "Artistic-2.0"
}

'MEAN Stack' 카테고리의 다른 글

Node.js, MongoDB, AngularJS를 이용한 웹개발(2)  (0) 2017.05.19

+ Recent posts