VUE（1）

時間 2020-02-13

標籤 vue 简体版

原文原文鏈接

VUE學習

vue 的 MVVM 模式（即雙向數據綁定）css

ViewModel是Vue.js的核心，它是一個Vue實例。Vue實例是做用於某一個HTML元素上的，這個元素能夠是HTML的body元素，也能夠是指定了id的某個元素。html

首先，咱們將上圖中的DOM Listeners和Data Bindings看做兩個工具，它們是實現雙向綁定的關鍵。從View側看，ViewModel中的DOM Listeners工具會幫咱們監測頁面上DOM元素的變化，若是有變化，則更改Model中的數據；從Model側看，當咱們更新Model中的數據時，Data Bindings工具會幫咱們更新頁面中的DOM元素。vue

環境搭建（windows）：node

1.先搭建好nodejs環境和npmwebpack

2.執行 npm install vue和npm install -g vue-cliweb

3.設置vue的環境變量，搜索vue.cmd,將此文件的目錄加到Path中去，而後執行vue -V
成功執行說明環境搭建成功。vue-cli

4.建立vue的demo，從vue官方克隆demo，vue init webpack my-first-vue-projectnpm

5.進入建立的demo目錄，看到目錄結構windows

6.要運行vue項目則要執行 npm install 下載依賴，和npm dev run運行數組

接下來用ide打開項目看看vue app的原理

能夠看到vue經過 template標籤爲展現模板，js export default傳遞數據，style設置css。

Vue.js 的核心是一個容許採用簡潔的模板語法來聲明式的將數據渲染進 DOM 的系統：

<template>
<div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
<template>

<script>
export default {
  name: '#app',
  data () {
    return {
      message:: 'hello world'
    }
  }
}
</script>

以上實例中 {{message}} 會根據輸入框 input 的改變而改變，若是不想讓其變化能夠修改成：{{* message }}

在這個示例中，選項對象的el屬性指向View，el: '#app'表示該Vue實例將掛載到<div id="app">...</div>這個元素；data屬性指向Model，data: message表示咱們的Model是message對象。
Vue.js有多種數據綁定的語法，最基礎的形式是文本插值，使用一對大括號語法，在運行時{{ message }}會被數據對象的message屬性替換，因此頁面上會輸出"Hello World!"。

列表輸出使用 v-for(v-for取代了1.0之前版本中的v-repeat) 這個指令就能完成:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ul>
</div>
<script>
    new Vue({
  el: '#app',
  data: {
    todos: [
      { text: 'html' },
      { text: 'js' },
      { text: 'vue' }
    ]
  }
})
</script>
</body>
</html>

vue 多維數組實例

<div id="app">
  <ul id="example-2">
  <li v-for="item in items">
    {{ parentMessage }} - {{ $index }} - {{ item.message }}
  </li>
</ul>
<script>
var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: '',
    items: [
      { message: '1' },
      { message: '2' }
    ]
  }
})
</script>

vue 條件判斷：

<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    type: 'C'
  }
})
</script>
</body>
</html>

vue 過濾器：

<html>
<head>
<meta charset="utf-8">
<script src="http://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p>{{message}}</p>
    <p>{{message | uppercase}}</p>
    <p>{{message | reverse | uppercase}}</p>
</div>
<script>
Vue.filter('reverse', function (value) {
    return value.split('').reverse().join('')
})
new Vue({
  el: '#app',
  data: {
      message:'hello world'
  }
})
</script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。