初学Vue（一）

vue是什么

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

安装

打开https://cn.vuejs.org/v2/guide/.页面，会看到
Vue：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者：

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

你可以直接vue.js直接另存为js文件，从而引用到html中。

声明式渲染

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

    <div id="box">
        <h1 class="text-center">{{ msg }}</h1>
    </div>

<script>
    var app = new Vue({
        el:'#box',
        data:{
            msg:'Hello World!',
        }
    })
</script>

我们已经成功创建了第一个 Vue 应用！你可以打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。

除了文本插值，我们还可以像这样来绑定元素特性：

    <div id="box">
        <span v-bind:title="date">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
    </div>

<script>
    var app = new Vue({
        el:'#box',
        data:{
            date:'现在时间为：'+new Date().toLocaleString()
        }
    })
</script>

v-bind 特性被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。
同样，如果你再次打开浏览器的 JavaScript 控制台，输入 app.date = ‘新消息’，就会再一次看到这个绑定了 title 特性的 HTML 已经进行了更新。

条件与循环

用v-if控制切换一个元素是否显示：

	<div id="box">
	    <h1 class="text-center" v-if="show">{{ msg }}</h1>
	</div>

<script>
    var app = new Vue({
        el:'#box',
        data:{
            msg:'Hello World!',
            show:true,
        }
    })
</script>

继续在控制台输入 app3.seen = false，你会发现之前显示的消息消失了。

还有其它很多指令，每个都有特殊的功能。例如，v-for 指令可以绑定数组的数据来渲染一个项目列表：

    <div id="box">
        <h1 >{{ msg }}</h1>
        <ol>
            <li v-for="i in arr" >{{ i.text }}</li>
        </ol>
        <span v-bind:title="date">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
    </div>

<script>
    var app = new Vue({
        el:'#box',
        data:{
            arr:[
                {text:'java'},
                {text:'python'},
                {text:'php'},
                {text:'node'},
            ]
        }
    })
</script>

打印出：

在控制台里，输入 app.arr.push({text:“html”}))，你会发现列表最后添加了一个新项目。

处理应用输入

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

    <div id="box">
        <h1 >{{ msg }}</h1>
        <button v-on:click="reversemsg" type="button">反转消息</button>
    </div>

<script>
    var app = new Vue({
        el:'#box',
        data:{
            msg:'Hello World!',
        },
        methods: {
            reversemsg: function(){
                this.msg = this.msg.split('').reverse().join('')
            }
        }
    })
</script>

Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

    <div id="box">
        <h1 >{{ msg }}</h1>
        <input type="text" v-model="msg">
    </div>

<script>
    var app = new Vue({
        el:'#box',
        data:{
            msg:'Hello World!',
        },
    })
</script>

组件化应用构建

        <ol>
            <!-- 创建一个 todo-item 组件的实例 -->
            <todo-item v-for="i in arr" v-bind:todo="i" v-bind:key="i.id"></todo-item>
        </ol>

<script>
    // 定义名为 todo-item 的新组件
    Vue.component('todo-item', {
        props:['todo'],
        template: '<li>{{ todo.text }}</li>',
    })
    var app = new Vue({
        el:'#box',
        data:{
            msg:'Hello World!',
            date:'现在时间为：'+new Date().toLocaleString(),
            show:false,
            arr:[
                { id : 0,text:'java'},
                { id : 1,text:'python'},
                { id : 2,text:'php'},
                { id : 3,text:'node'},
            ]
        },
</script>

尽管这只是一个刻意设计的例子，但是我们已经设法将应用分割成了两个更小的单元。子单元通过 prop 接口与父单元进行了良好的解耦。我们现在可以进一步改进 组件，提供更为复杂的模板和逻辑，而不会影响到父单元。