【VUE基础与练习】01安装、使用步骤、插值表达式、指令

前提需要：

HTML、CSS、JS、JQ

一、安装nodejs
node下载地址https://nodejs.org/en/

二、淘宝镜像站配置
命令行输入npm install -g cnpm --registry=https://registry.npm.taobao.org

三、使用淘宝镜像安装vue
1.安装vue
cnpm install vue
2.安装vue-cli
cnpm install --global vue-cli

基础练习：
// 使用步骤：
// 1.引包
// 2.启动vue，通过new Vue(options);
// 3.配置options选项对象
// 4.el:'目的地' template:模板  data:function(){return{要使用的key：数据}}
// 5.页面中存在该目的地，目的地字符串描述同jq方式一样
<div id="app">
    <span>{ {message}}</span>
</div>
<script>
    //通过vue对象，去new Vue(options):
    new Vue({
        //el：发生行为的目的地。
        //还可以书写：  el:document.getElementById('app'),
        //在vue内部运行机制中，需要根据你传递的字符串进行判断，比如，#xxx/.xxx，还是div 元素查找。
        //使用el:document.getElementById('app')将会更为优化，将元素直接找到，避免了vue来去判断
        //也可以用类名或标签名查找。
        el:'#app',
        //template:装载的模板
        template:'<div><h1>Hello world,{ {text}}</h1></div>',
        //动态数据的声明
        data:function(){//最常用
            return{
                text:'hello vue'
            }
        }
        // data:{//也可以使用对象
        //      message:"hello world"
        // }
    })
</script>

##插值表达式：{ {表达式}}
表达式可以是：
    对象{ { {name:'jack'} }}
    字符串{ {'xxx'}}
    判断后的布尔值{ {true}}
    三元表达式{ {true?'yes':'no'}}
注：不要连续3个{ { {name:'jack'}}}。如需使用，可以写作：{ { {name:'jack'} }}

可以用于页面中简单粗暴的调试
注：必须在data这个函数中返回的对象中声明。

##指令
在vue中提供了一些对于页面+数据的更为方便的操作(输出)，这些操作就叫做指令。
    类似于html页面中的属性<div v-xxx></div>
比如在angular中以ng-xxx开头的就叫做指令。
在vue中以v-xxx开头的就叫做指令。
指令中封装了一些DOM行为，结合属性作为一个暗号,暗号有对应的值根据不同的值，框架会进行相关DOM操作的绑定。

vue中常用的v-指令

v-text元素的InnerText属性，必须是双标签
v-html元素的innerHTML
v-if判断是否插入这个元素
v-else-if
v-else
v-show隐藏元素，如果确定要隐藏，会给元素的style加上dispaly:none;

实例练习：
<script>
    //启动vue
    new Vue({
  &n