通过官网学习vuejs基础

vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。

1、声明式渲染
①vue.js的的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进DOM:

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

//js
var app=new Vue({
    el:"#app",
    data:{
        message:"hello Vue!"
    }
});

②绑定DOM元素属性
它们会在渲染的 DOM 上应用特殊的响应式行为。简言之，这里该指令的作用是：“将这个元素节点的 title 属性和 Vue 实例的 message 属性保持一致”。

<div id="app">
    <span v-bind:title="message">
        将鼠标放到上面将看到title文字信息
    </span>
</div>

//js
var app=new Vue({
    el:"#app",
    data:{
        message:"U loaded this page on"+new Date();
    }
});

2、条件和循环
① 控制切换一个元素的显示。
这个例子演示了我们不仅可以绑定 DOM 文本到数据，也可以绑定 DOM 结构到数据

<div id="app-3">
  <p v-if="seen">Now you see me</p>
</div>

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

② v-for 指令可以绑定数组的数据来渲染一个项目列表(类似于for-in循环)

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

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

3、处理用户输入
①我们可以用v-on指令绑定一个事件监听器，通过它调用我们 Vue 实例中定义的方法。
注意在 reverseMessage 方法中，我们更新了应用的状态，但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理，你编写的代码不需要关注底层逻辑。

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆转消息</button>
</div>
 
//js
var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
},
methods: {
    reverseMessage: function () {
    this.message = this.message.split('').reverse().join('');
  }
});

② v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。
<div id="app-6">
    <p>{{message}}</p>
    <input v-model="message"/>
</div>

var app6=new Vue({
    el:"#app-6",
    data:{
        message:"hello world!"
    }
});

4、组件化应用构建
一个组件本质上是一个拥有预定义选项的一个 Vue 实例。
属性能够将数据从父作用域传到子组件。

<div id="app-7">
    <ol>
        <todo-item
            v-for="item in items"
            v-bind:todo="item"
            v-bind:key="item.id">
        </todo-item>
    </ol>
</div>

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
});
var app7 = new Vue({
  el: '#app-7',
  data: {
    items: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其他什么人吃的东西' }
    ]
  }
})