Vue2.0入门到痴迷(二)---常用Vue.js命令

通过上节内容，我们已经搭建好了开发环境，并且写出了一个简单的Hello,vue.js程序。下面我们开始学习Vue.js的命令,命令的解释主要来源于https://cn.vuejs.org/。

1、v-if， v-else

条件渲染v-if
用法：
根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。
如果元素是 <template> ，将提出它的内容作为条件块。
当条件变化时该指令触发过渡效果。
v-else
不需要表达式
限制：前一兄弟元素必须有 v-if 或 v-else-if。
用法：
为 v-if 或者 v-else-if 添加“else 块”。

下面我们将我们模拟个very简单的实例：
新建/example/v-if.html

    <h2>v-if,v-else&v-show模拟登陆</h2>
    <div id="app">
        <div v-if="isLogin">欢迎登陆，Brad</div>
        <div v-else>请先登陆！</div>
    </div>
    <script>
        let app = new Vue({
            el:'#app',
            data:{
                //isLogin:false
                isLogin:true
            }
        })
    </script>

2、v-show

v-show
另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：
<h1 v-show="ok">Hello!</h1>
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
注意，v-show 不支持 <template> 元素，也不支持 v-else。

3、 v-if vs v-show

v-if vsv-show

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

4、列表渲染 v-for

v-for
我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。

4.1基本写法

   <h2>v-for实例</h2>
   <hr>
    <div id="app">
       <ul>
           <li v-for="item in items">{{item}}</li>
       </ul>
    </div>
    <script>
        let app =  new Vue({
            el:'#app',
            data:{
                items:['junjun','cheche','huhu','qingqing']
            },
        });
    </script>

这是一个最基础的循环，先在js里定义了items数组，然后在模板中用v-for循环出来，需要注意的是，你需要那个html标签循环，v-for就写在那个上边。
4.2、对象循环输出

我们上边循环的都是数组，那我们来看一个对象类型的循环是如何输出的。
我们先定义个数组，数组里边是对象数据

        let app =  new Vue({
            el:'#app',
            data:{
                items:['junjun','cheche','huhu','qingqing'],
                students:[
                    {name:'zhangsan',age:27},
                    {name:'lisi',age:21},
                    {name:'wangwu',age:24},
                    {name:'zhaoermazi',age:19}
                ]
            },
            computed:{
                sortStudents:function(){
                    return sortByKey(this.students,'age');
                }
            }
        });
        //数据对象方法排序
        function sortByKey(array,key){
            return array.sort(function(a,b){
                var x=a[key];
                var y=b[key];
                return ((x<y)?-1:((x>y)?1:0));
            });
        }
        function sortNumber(a,b){
            return a-b
        }

在模版中输出：

  <h2>v-for实例</h2>
   <hr>
    <div id="app">
       <ul>
           <li v-for="item in items">{{item}}</li>
           <li v-for="students in students">
               姓名：{{students.name}}-年龄{{students.age}}
           </li>
           <li v-for="(somebody,index) in sortStudents">
               [年龄{{somebody.age}}--姓名：{{somebody.name}}]
           </li>
       </ul>
    </div>

看看页面表现：

image.png

5、v-text 和 v-html

我们已经能在html中输出data中的值了，使用{{xxx}},这种情况是有弊端的，就是当我们网速很慢或者javascript出错时，会暴露我们的{{xxx}}。Vue给我们提供的v-text,就是解决这个问题的。我们来看代码：

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

双大括号会将数据解释为纯文本，而非HTML。为了输出真正的HTML，我们需要使用v-html 指令。 需要注意的是：在生产环境中动态渲染HTML是非常危险的，因为容易导致XSS攻击。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用。

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

6、v-on：绑定事件监听器

用法：
绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event 属性：v-on:click="handle('ok', $event)"。
从 2.4.0 开始，v-on 同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时，是不支持任何修饰器的。https://cn.vuejs.org/v2/api/#v-on

<h2>v-on </h2>
<div id="app">
    积分累计：{{integral}}
    <p>
        <button v-on:click="add">增加积分</button>
    </p>
    <p>
        <button @click="subtract">减去积分</button>
    </p>
    <br>
    <input type="text" @keyup.13="onenter" v-model="int2">
</div>

<script>
    let app = new Vue({
        el: "#app",
        data: {
            integral: 0,
            int2 : 2
        },
        methods: {
            add: function () {
                this.integral++;
            },
            subtract: function () {
                this.integral--;
            },
            onenter:function(){
                this.integral += parseInt(this.int2);
            }
        }
    })
</script>

7、v-model指令

用法：
在表单控件或者组件上创建双向绑定。
表单输入绑定:
可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
其他更多用法,请参考https://cn.vuejs.org/官网的教程。

8、v-bind指令

用法：
动态地绑定一个或多个特性，或一个组件 prop 到表达式。
在绑定 class 或 style 特性时，支持其它类型的值，如数组或对象。可以通过下面的教程链接查看详情。
在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。
没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。

示例：

<body>
<h2>v-bind</h2>
    <div id="app">
       <p><img v-bind:src="imgSrc " width="580px" ></p>
        <a :href="webUrl" target="_blank">网易</a>
    </div>
    <div :class="className" >1，绑定class</div>
    <div :class="{classA：isTrue}">1，绑定class</div>
    <style>
        .classA{
            font-size: 120px;
        }
        .classB{
            font-size:36px;
        }
    </style>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                imgSrc: '../img/bg.jpg',
                webUrl:'http://www.163.com',
                className: 'classA',
                isTrue: true
            }
        })
    </script>
</body>

---

下一节：Vue2.0入门到痴迷(三)-全局API[ https://www.jianshu.com/p/15c4df5ed1af ]