Vue介绍

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

<div id="app">
</div>
var app = new Vue({
    el: '#app',
    data: {
        message: "Hello Vue!"
    }
})

除了文本插值之外，我们还可以采用这样的方式绑定DOM元素属性：

<div id="app">
        <span v-bind:title="message">鼠标</span>
</div>
<script type="text/javascript">
    //除了文本插值，我们还可以采用这样的方式绑定DOM元素属性：
    var app = new Vue({
        el: '#app',
        data: {
            message: "页面加载于：" + new Date().toLocaleString()
        }
    })
</script>

这里的 v-bind 是指令，指令带有前缀 v-，以表示它们是Vue提供的特殊属性。它们会在渲染的DOM上应用特殊的响应式行为。简言之，这里该指令的作用是： “将这个元素的节点的title属性和Vue实例中的message保持一致。

<sapn v-bind:title="message">注意着这种写法</span>

2.条件与循环

---

控制切换一个元素也相当的简单

<div id="app">
        <p v-if="seen">现在你看到我了</p>
</div>
<script type="text/javascript">
    //条件与循环
    //控制切换一个元素的显示相当简单
    var app = new Vue({
        el: '#app',
        data: {
            seen: true
        }
    })
</script>

可以在控制台中验证

app.seen = false

看是否在页面中隐藏
v-for

<div id="app">
    <ul>
        <li v-for="todo in todos">
            {{ todo.text }}
        </li>
    </ul>
</div>
<script type="text/javascript">
    //v-for 指令可以绑定数组的数据来渲染一个项目列表
    var app = new Vue({
        el: '#app',
        data: {
            todos: [
                { "text": 'vue' },
                { "text": 'angular' },
                { "text": 'react' }
            ]
        }
    })
</script>

可以在控制台中，输入app.todos.push({text: ‘学习整个项目’})
3.处理用户输入

---

为了让用户和你的应用进行互动，我们可以用v-on指令绑定一个事件监听器，通过它可以调用我们Vue实例中定义的方法：

<div>
</div>

4.组件化引用构建

---

组件系统是Vue的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树。

在Vue里，一个组件本质上是一个拥有预定义选项的一个Vue实例，在Vue中注册组件很简单：

//定义名为todo-item的新组件
Vue.component('todo-item',{
    template: '<li>这是个待办项</li>'
})

现在你可以用它构建另一个组件模板：

<ol>
    <todo-item></todo-item>
</ol>

例子如下：

<div id="app">
    <ul>
        <todo-item></todo-item>
    </ul>
</div>
<script type="text/javascript">
    //

    Vue.component('todo-item',{
        template: '<li>这是一个待办项</li>'
    })
    var app = new Vue({
        el: '#app'
    })
</script>

运行结果为：

这是一个待办项

但是这样会为每个待办项渲染同样的文本，这时我们可以将数据从父作用域递给子组件。让我们来修改一下组件的定义，使之能够接受一个属性：

Vue.component('todo-item',{
    props: ['todo'],
    template: '<li>{{ todo.text }}</li>'
})

现在我们可以使用 v-bind 将 todo 传到每一个重复的组件中：

<div id="app">
    <ul>
        <todo-item
        v-for="item in todos"
        v-bind="item"
        v-key="item.id">
        </todo-item>
    </ul>
</div>

Vue.component('todo-item',{
    el: '#app',
    props: ['todo'],
    tempalte: '<li>{{ todo.text }}</li>'
})
var app = new Vue({
    el: '#app',
    data: {
        todos: [
            { id: 0,text: "vue" },
            { id: 1,text: 'react' },
            { id: 2,text: 'angular' }
        ]
    }
})