vue各指令

vue指令

说指令之前当然要先引入文件了，强烈推荐敲代码的时候，为了方便，尽量使用vue.js。当提交的时候用压缩的vue.min.js。

v-show指令就相当于anghualarJs中的ng-hide/ng-show

以下代码为例：

 <div id="app">
<div v-if="myShow">
           -今天天气真好，适合于逛街
       </div>
</div>

script部分：

        <script>  
            var app = new Vue({
                el : "#app",
                "data" : {
                    "myShow" : false
                }
            });

        </script>

v-if指令就相当于anglarJS中的ng-if——单分支

<div  id="con">
<span v-if="grade == 1">
            这是1111111
        </span>
<span v-if="grade > 1">
           这是222222
        </span>
</div>

scipt的代码部分：

 var app = new Vue({
                el : "#app",
                  grade:1,
                       })

当grade为1是显示的是“这是111111111111”，

当grade为2或者大于2显示“这是222222”

v-if指令就相当于anglarJS中的ng-if——多分支

<span v-if="grade == 1">
            恭喜您，幼儿园毕业了
        </span>
        <span v-else-if="grade == 2">
            -恭喜您,长大了，已经二年级了
        </span>
        <span v-else-if="grade == 3">
            <!--恭喜您,长大了，已经三年级-->
        </span>
        <span v-else>
            恭喜您,长大了，可以成家了
        </span>

v-for指令就相当于anglarJS中的循环
以代码为例：

  <div v-for="(b,index) in books">
                {{b.id}}----{{b.name}}----{{b.price}}---{{index}}<br>
            </div>

                    在VUE1.x版本，$index 存在
                    但是在2.x版本中，尤大取消了
script代码部分：

  <script>
            var app = new Vue({
                el : "#app",
                "data" : {
                    grade : 2,
                    books : [
                        {
                            id : 1,
                            name : "JavaScript从入门的放弃",
                            price : 52.5
                        },
                        {
                            id : 2,
                            name : "Java从入门的吐血",
                            price : 45
                        },
                        {
                            id : 3,
                            name : "PHP是世界上最好语言",
                            price : 40
                        },
                        {
                            id : 4,
                            name : "mysql从入门到删库",
                            price : 63z
                        }
                    ]

                }
            });

        </script>

v-on:click指令绑定事件

以下代码为例：

   <div id="app">
        <button v-on:click="test">点击一下呗</button>
        <button v-on:click="test()">点击一下呗</button>
        <button v-on:click="alerts('我瞅你咋地！')">点击一下呗</button>
    </div>

script代码部分;

 <script>
            var app = new Vue({
                el : "#app",
                "methods" : {
                    test : function () {
                        alert("你点我干啥");
                    },
                    "alerts" : function (msg) {
                        alert("你瞅我干嘛？");
                        alert(msg);
                        console.log(e);
                    }
                }
            });

        </script>

过滤

大写:以下代码为例

 <div id="app">

        {{msg | uppercase}}<br>
   </div>

script代码部分

 var app = new Vue({
                el : "#app",
                data : {
                    msg : "liujianhong",
                },
                "filters" : {
                    uppercase : function (data) {
                        if (!data) {
                            return "";
                        }
                        return data.toUpperCase();
                    },
            }

        </script>