vue学习笔记一

这几天在学习vue框架，作为一名前端我觉得自己快跟不上潮流了，越来越多的新技术需要去学习，vue就是其中之一。

今天开始我要开新的篇章，来记录学习vue框架的点点滴滴。

首先我们要搞清楚vue到底有什么作用，官网介绍说vue是一套构建用户界面的渐进式框架，与其它大型框架不同的是，vue被设计成可以自底向上逐层应用。vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或第三方项目整合。

vue有几大特点：

1. 声明式渲染

<div id="app">{{ message }}</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

2.条件与循环

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

3.处理用户输入

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆转消息</button>
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

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

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

4.组件化应用构建

Vue.component('todo-item', {
  template: '<li>这是个待办项</li>'
})

<ol>
  <!-- 创建一个 todo-item 组件的实例 -->
  <todo-item></todo-item>
</ol>