vue官网学习笔记（一）介绍

vue.js是一套构建用户界面的渐进式框架，采用自底向上增量开发的设计。Vue的核心库只关注图层。

声明式渲染

运用简洁的模板语法来声明式地将数据渲染进DOM系统：

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

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

显示效果

Hello Vue!

属性

v-bind指令绑定属性

例如：v-bind:class  可用于判断指定的样式

           v-bind:title

条件与循环

v-if控制切换元素的显示

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

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

显示效果：

Now you see me

v-for指令可以绑定数据到数据来渲染一个列表

<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 : 'Learn JavaScript' },
            { text : 'Learn Vue' },
            { text : 'Build something awesome' }
        ]
    }
})

显示效果：

1.Learn JavaScript
2.Learn Vue
3.Build something awesome

app4.todos.push({ text: 'New item' })

可向列表中新增一条新内容

处理用户输入

v-on指令绑定监听事件用于调用Vue实例中定义的方法：

<div id="app-5">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">Reverse Message</button>
</div>

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 Vue!'
    }
})

当改变input中的值时，p元素中的值也会改变。

用组件构建（应用）component★★★★★

全局component：

<ul>
    <todo-item></todo-item>
</ul>

Vue.component('todo-item',{
    template: '<li>This is a todo</li>'
})

以上会为每个todo渲染同样的文本，应该将数据从父作用域传到子组件，可运用prop字段，利用v-bind指令将todo传到每一个重复的组件中：

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

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { text: 'Vegetables' },
      { text: 'Cheese' },
      { text: 'Whatever else humans are supposed to eat' }
    ]
  }
})

显示效果：

Vegetables
Cheese
Whatever else humans are supposed to eat