VueJs入门练习

开始阅读Vue官方文档，学习Vue开发。Vue可以让前端数据绑定和渲染更为方便，但要做出一套漂亮的界面，还是需要使用CSS相关的框架。

0. 预备，官方建议：刚开始上手不宜直接使用vue-cli工具，还是使用最简单的Vue引入方式：

1. Vue声明式渲染数据

html>
lang="en">

    charset="UTF-8">
    

    




id="app">{{message}}

效果：

2. 绑定元素(使用v-bind指令)

id="app-2" v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！

效果：

3. 条件指令(使用v-if进行条件渲染)

id="app-3">
    
v-if="show">被显示了吗?

效果：

［注］在Console中，使用app3.show的方式动态修改变量值，可以观察div是否被显示,当v-if=false的时候，改div不会被显示。

4. 循环指令（使用v-for实现数据循环）

id="app-4">
    

        
v-for="item in fruits">{{item.content}}
    

    
v-for="item in cities">{{item.name}}

效果：

5. 实现事件绑定（Vue使用v-on进行用户事件绑定）

id="app-5">
    
{{message}}
    v-on:click="reverseWord">点击翻转

效果：

6. 处理用户的输入（Vue使用v-model来实现输入）

id="app-6">
    
{{message}}
    v-model="message"/>

效果：

7. Vue可以很方便的定义一个组件：

id="app-7">
    

效果：

8. 要使得组件内部显示动态内容，可以使用：

id="app-7">
    

        v-for="item in phones"
                 v-bind:comp="item"
                 v-bind:key="item.id">
        
    

效果：

［附］Vue官方文档：

https://cn.vuejs.org/v2/guide/ssr.html