Vue入门——Vue的核心

代码部分请下载本文代码阅读，代码均能正常运行并有详细的注释。

本文代码下载地址

概述

无需置疑，Vue之因此能如此之火，主要受益于它是一个MVVM框架和它易学的文档，几乎全部以为学习Vue有难度的开发者都是以为组件脚手架等等不太好理解，可是这些都不是Vue的核心，Vue的核心表如今最易学的Vue指令和绑定，学好Vue指令和绑定基本就学好Vue的一大半了，把基础核心的几个知识点说完会作几个完整的demo。

学习方法

学习编程切勿眼高手低，碰到简单的如Vue指令相似的知识千万不要忽略掉，最好能把指令熟记于心，对于新手更是这样，这样在讲解复杂知识点的时候就不用再重述这些简单的知识点了，当你对于简单知识点烂熟于心的时候，你的注意力会集中在少数几个最难的知识点上，更容易学好，因此读者最好能对着下面的代码和官方文档把这些指令多理解多记忆，再学习后面的文章。

Vue指令的官方文档

Vue指令大杂烩

<style>
      [cloak] {
        display: none;
      }

    </style>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <div id="demo">
        <!-- 插值就是把{{}}中的值当作一个变量，而后再用vue实例data中对应的变量值替换它 -->
        插值用法: {{demo1}} <hr>
        <!-- v-text指令 的功能和{{}}的功能如出一辙，只是为了方便把这个指令单独拿出来用{{}}表示 -->
        v-text用法: <span v-text = "demo2"></span> <hr>
        <!-- v-html 类式 v-text， 只是把这个变量字符串取出来渲染成了对应的html，而不是直接展现字符串 -->
        v-html用法: <span v-html = "demo3"></span> <hr>
        <!-- v-show对应变量的值应该是true或false,若是为true则自动跟他添加display：block，不然添加display：none ,你只须要修改对应变量的值就能够控制元素显示隐藏-->
        v-show用法：<span v-show = "demo4">这是v-show内容，v-show的值控制这个元素显示隐藏</span> <hr>
        <!-- v-if和v-show的用法类式，v-if的值s是true直接添加到dom元素，不然从dom商remove掉，而不是修改display属性，这样操做比较消耗性能，如无必要请使用v-show -->
        v-if用法：  <span v-if = "demo5">这是v-if的内容</span><hr>
        <!-- v-else 必须跟v-if联合使用，就像js中的else也必须跟if一块儿使用同样，若是v-if元素的内容显示，则v-else元素remove掉，反之v-if元素remove掉，v-else元素添加到dom上 -->
        v-else用法： <span v-if = "demo6">这是v-if的内容</span> <span v-else >这是v-else的内容</span>  <hr>
        <!-- v-else-if 必须跟v-if联合使用，若是v-if的值为和v-else-if的值都为false则显示v-else-if元素的内容,请参考js中的if、else if、else理解 -->
        v-else-if用法：<span v-if = "demo71">这是v-if的内容</span> <span v-else-if = "demo72" >这是v-else-if的内容</span> <span v-else> 这是v-else内容</span><hr>
        <!-- v-for 和js中的for in循环很相似，有了v-for你能够轻松复制多个当前元素，有如下几种写法，前面两种是for循环数组的，后两种是循环json的，都有待index项和不带的 -->
        <!-- <div v-for = "item in items">  -->
        <!-- <div v-for="(item, index) in items"> -->
        <!-- </div> <div v-for="(val, key) in object"></div> -->
        <!--  <div v-for="(val, key, index) in object"></div> -->
        v-for用法1： <span v-for="(item, index) in items1">{{"这是第"+index + "个" + ":" + item}}</span> <br>
        v-for用法2： <span v-for="(value,key,index) in items2" >{{"key:" +key + "|" +"value:" + value + "|" + "index:" + index + "     " }}</span> <hr>
        <!-- v-on 是绑定事件的方法，v-on:click="clickMethod"是c点击事件，它能够简写成@click ,它的值是methods中的方法 -->
        v-on用法：  <input type="text" name="name" v-on:keyup= "keyupEvent" style="border:solid 1px red;" /><hr>
        <!-- v-bind 后面接的是html标签所带的属性，好比v-bind:value 能够省略为:value ，v-bind是单向数据绑定，意思是你改变了vue实例data中的数据，页面dom中的值就会变化，反之不成立  -->
        v-bind用法：<input v-bind:value="demo8" style="border:solid 1px red;" /> <input :value="demo8" style="border:solid 1px red;" /><span>改变input的值并不能修改vue实例中的值，因此另外一个input不会修改</span><hr>
        <!-- v-model 和 v-bind 相似，v-model是双向数据绑定， 可是当dom改变的时候vue实例data中的数据也会改变，因此叫双向数据绑定 -->
        v-model用法： <input v-model:value="demo9" style="border:solid 1px red;" /> <input v-model:value="demo9" style="border:solid 1px red;" /><span>改变input的值能修改vue实例中的值，因此另外一个input会修改,这叫双向数据绑定</span><hr>
        <!-- 和html中的pre标签相似,{{item}}这种插值就会当作字符串处理，并不会解析成变量 -->
        v-pre用法：<span v-pre> {{demo10}}</span><hr>
        <!-- 因为vue编译渲染须要时间，在vue编译完以前，{{item}}仍是以字符串的形式表现出来的，v-cloak 配合[v-cloak]{display:none} 可让元素在vue编译前先隐藏 -->
        v-cloak用法：<span v-cloak>{{demo11}}</span> | <span>{{demo11}}</span><hr>
        <!-- v-once 指令表示此元素只渲染一次，当data中的数据值改变的时候这个元素不会再改变渲染 -->
        v-once用法：
        <span v-once>{{demo12}}</span>

    </div>
    <script>
      //new 一个vue实例，Vue就能运行了,Vue方法传入参数为一个约定格式的json
      new Vue({
        //el表示这个vue实例的做用范围为id为demo的元素内
        el:"#demo",
        //data的值是一个json，存储的都是要显示到页面上的值，能够理解成这里放的都是js变量(数据)
        data:{
          //插值用法
          demo1:"这是demo1",
          //v-text用法：
          demo2:"这是demo2",
          //v-html用法
          demo3:"<span style='color:red'>这是v-html字符串，它是一个span</span>",
          //v-show用法：
          demo4:true,
          //v-if用法：
          demo5:true,
          //v-else用法：
          demo6:false,
          //v-else-if用法：
          demo71:false,
          demo72:true,
          //v-for用法：
          items1:["item1","itme2","item3"],
          items2:{key1:"value1",key2:"value2",kay3:"value3"},
          //v-bind用法：
          demo8:"这是demo8",
          //v-model用法：
          demo9:"这是demo9",
          //v-pre用法：
          demo10:"这是demo10",
          //v-cloak用法：
          demo11:"这是demo11"
          //v-once用法：
          demo12:"这是deom12"
        },
        methods:{
          //v-on用法：
          keyupEvent:function() {
            console.log("keyup被促发了");
          }
        },
       
      });
    </script>