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>