Vue.js 2.0记录01

作者: flycorn | 来源:发表于2017-01-26 14:55 被阅读71次

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

** Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 **

参考链接：
Vue.js
Vue.js文档
 Vue.js github

初探Vue.js (我的备忘录)

My todos

普通版本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs2.0</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入Vue.js -->
    <script src="http://cdn.bootcss.com/vue/2.0.0/vue.min.js"></script>
    <style>
        <!-- 完成状态样式 -->
        .completed{
            color:green;
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <div class="container" id="app">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Welcome Vue js</div>
                    <div class="panel-body">
                        <!-- 备忘录条目个数 -->
                        <h1>My todos {{todos.length}} </h1>
                        <ul class="list-group">
                            <!-- 遍历备忘录条目 -->
                            <li class="list-group-item" v-bind:class="{ 'completed' : todo.completed }" v-for="(todo, index) in todos">
                                {{todo.title}}
                                <button class="btn btn-xs pull-right btn-warning"  v-on:click="deleteTodo(index)">Delete</button>
                                <button class="btn btn-xs pull-right" v-on:click="toggleCompletion(todo)" v-bind:class="[todo.completed ? 'btn-danger' : 'btn-success' ]">{{ todo.completed ? 'undo' : 'completed' }}</button>
                            </li>
                        </ul>
                      
                        <!-- 添加备忘录条目 -->
                        <form v-on:submit.prevent="addTodo(newTodo)">
                            <div class="form-group">
                                <input type="text"
                                       v-model="newTodo.title"
                                       class="form-control"
                                       placeholder="Add a new todo"
                                />
                            </div>
                            <div class="from-group">
                                <button class="btn btn-success" type="submit">Add Todo</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script>
    <!-- 实例化Vue应用 -->
    new Vue({
        el: "#app",
        data: {
            message: "Hello World!",
            todos: [
                {id:1, title:"learn Vuejs", completed: false}
            ],
            newTodo: {id:null,title:"", completed: false}
        },
        computed: {
            todoCount() {
                return this.todos.length;
            }
        },
        methods: {
            addTodo(newTodo) {
                this.todos.push(newTodo);
                this.newTodo = {id:null,title:"", completed: false}
            },
            deleteTodo(index) {
                // this.todos.$remove(todo)
                this.todos.splice(index, 1)
            },
            toggleCompletion(todo){
                todo.completed = !todo.completed
            }
        }
    })
</script>

普通组件版本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs2</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://cdn.bootcss.com/vue/2.0.0/vue.min.js"></script>
    <style>
        <!-- 完成状态样式 -->
        .completed{
            color:green;
            text-decoration: line-through;
        }
    </style>
</head>
<body>
<div class="container" id="app">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">Welcome Vue js 2.0</div>
                <div class="panel-body">
                    <!-- 备忘录条目个数 -->
                    <h1>My todos {{todoCount}}</h1>
                    
                    <!-- 备忘录条目组件 -->
                    <todo-items :todos="todos"></todo-items>

                    <!--
                    # 等同
                    <todo-items v-bind:todos="todos"></todo-items>
                    -->
                  
                    <!-- 添加备忘录条目组件 -->
                    <todo-form :todos="todos"></todo-form>

                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

<!-- 备忘录条目组件模板 -->
<script type="text/x-template" id="todo-items-template">
    <ul class="list-group">
        <li class="list-group-item" v-bind:class="{ 'completed' : todo.completed }" v-for="(todo, index) in todos">
            {{todo.title}}
            <button class="btn btn-xs pull-right btn-warning"  v-on:click="deleteTodo(index)">Delete</button>
            <button class="btn btn-xs pull-right" v-on:click="toggleCompletion(todo)" v-bind:class="[todo.completed ? 'btn-danger' : 'btn-success' ]">{{ todo.completed ? 'undo' : 'completed' }}</button>
        </li>
    </ul>
</script>

<!-- 添加备忘录条目组件模板 -->
<script type="text/x-template" id="todo-add-form-template">
    <form v-on:submit.prevent="addTodo(newTodo)">
            <div class="form-group">
            <input type="text"
    v-model="newTodo.title"
    class="form-control"
    placeholder="Add a new todo"
            />
            </div>
            <div class="from-group">
            <button class="btn btn-success" type="submit">Add Todo</button>
            </div>
    </form>
</script>
<script>
    <!-- 备忘录条目组件 -->
    Vue.component('todo-items', {
        template: "#todo-items-template",
        props: ['todos'],
        methods: {
            deleteTodo(index) {
                // this.todos.$remove(todo)
                this.todos.splice(index, 1)
            },
            toggleCompletion(todo){
                todo.completed = !todo.completed
            }
        }
    })

    <!-- 添加备忘录条目组件 -->
    Vue.component('todo-form', {
        template: "#todo-add-form-template",
        data() {
            return {
                newTodo: {id:null,title:"", completed: false}
            }
        },
        props: ['todos'],
        methods: {
            addTodo(newTodo) {
                this.todos.push(newTodo);
                this.newTodo = {id:null,title:"", completed: false}
            }
        }
    })
    
    <!-- 实例化Vue应用 -->
    new Vue({
        el: "#app",
        data: {
            todos: [
                {id:1, title:"learn Vuejs", completed: false}
            ]
        },
        computed: {
            todoCount() {
                return this.todos.length;
            }
        }
    })
</script>

vue-cli版本

1、安装vue-cli、初始化项目

vue-cli
<code>npm install -g vue-cli //安装vue-cli</code>
<code>vue init webpack project //vue初始化项目</code>
<code>cd project //进入项目目录</code>
<code>npm install //安装依赖包</code>

<code>npm run dev //开启服务器</code>

2、主要模块源码

# project/index.html #主页面文件
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>project</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

# project/src/components/Todos.vue //备忘录条目模块
<template>
  <ul class="list-group">
    <li class="list-group-item" v-bind:class="{ 'completed' : todo.completed }" v-for="(todo, index) in todos">
      {{todo.title}}
      <button class="btn btn-xs pull-right btn-warning"  v-on:click="deleteTodo(index)">Delete</button>
      <button class="btn btn-xs pull-right" v-on:click="toggleCompletion(todo)" v-bind:class="[todo.completed ? 'btn-danger' : 'btn-success' ]">{{ todo.completed ? 'undo' : 'completed' }}</button>
    </li>
  </ul>
</template>

<script>
export default {
  props: ['todos'],
  methods: {
      deleteTodo(index) {
          // this.todos.$remove(todo)
          this.todos.splice(index, 1)
      },
      toggleCompletion(todo){
          todo.completed = !todo.completed
      }
  }
}
</script>

# project/src/components/TodoForm.vue 添加备忘录模块

<template>
  <form v-on:submit.prevent="addTodo(newTodo)">
    <div class="form-group">
      <input type="text"
             v-model="newTodo.title"
             class="form-control"
             placeholder="Add a new todo"
      />
    </div>
    <div class="from-group">
      <button class="btn btn-success" type="submit">Add Todo</button>
    </div>
  </form>
</template>

<script>
export default {
  data() {
      return {
          newTodo: {id:null,title:"", completed: false}
      }
  },
  props: ['todos'],
  methods: {
      addTodo(newTodo) {
          this.todos.push(newTodo);
          this.newTodo = {id:null,title:"", completed: false}
      }
  }
}
</script>

# project/src/App.vue 主模块

<template>
  <div id="app">
    <div class="row">
      <div class="col-md-8 col-md-offset-2">
        <div class="panel panel-default">
          <div class="panel-heading">Welcome Vue js 2.0</div>
          <div class="panel-body">
            <h1>My todos {{todoCount}}</h1>

            <todos :todos="todos"></todos>
            <todo-form :todos="todos"></todo-form>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Todos from './components/Todos.vue'
import TodoForm from './components/TodoForm.vue'

export default {
  name: 'app',
  data() {
      return {
      todos: [
          {id:1, title:"learn Vuejs", completed: false}
      ]
  }
  },
  computed: {
      todoCount() {
          return this.todos.length;
      }
  },
  components: {
    Todos,
    TodoForm
  }
}
</script>

<style>
.completed{
    color:green;
    text-decoration: line-through;
}
</style>

Vue.js 2.0记录01

初探Vue.js (我的备忘录)

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读