vue后台开发常用指令

v-bind指令是一个带有v-前缀的特殊标签属性, 指令属性的值预期是单个JavaScript表达式.

指令作用

当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

* 一个标签元素上可以出现多个指令属性

* 指令只能够出现在Vue对象所挂载的标签范围内的标签中

v-for

 <div id="app">
        <ul>
           <!-- 如果是数子，它默认是从1开始的-->
            <li v-for="(v,i) in number">{{v}}===索引:{{i}}</li>
        </ul>
        <hr/>
        <!--如果你对字符串进行循环迭代，那每次拿到的是每个字符-->
        <p v-for="(v,i) in str">{{v}}===索引:{{i}}</p>
        <hr/>
       <select>
           <!--循环数组，拿到的值就是数组中的元素-->
           <option v-for="(v,i) in hobbys">{{v}}====索引:{{i}}</option>
       </select>
        <hr/>
        <span v-for="(v,k,i) in person">{{v}}==={{k}}==={{i}}</span> //只有对象才有k
    </div>
</body>
<script type="text/javascript">
    /*
    在vue中循环迭代支持的元素：
            整数     字符串   数组    对象
    var vue = new Vue({
        el:"#app",
        data:{
           number:10,
           str:"itsource",
           hobbys:["篮球","足球","唱跳","rap"],
           person:{
               name:"赵中原",
               email:"22@qq.com"
           }
        }
    });
</script>

v-bind

<!--v-bind  主要用来绑定属性的-->
    <div id="app">
       <!-- 最原生的方式来获取图片-->
        <img src="image/1.jpg" width="140" height="120" alt="无图片">

        <!--使用v-bind的方式来取图片  方式1-->
        <img v-bind:xxx="xxx2" v-bind:src="src" v-bind:width="width" v-bind:height="height" v-bind:alt="alt">

        <!--使用v-bind的方式来取图片（简写方式）  方式2-->
        <img :xxx="xxx2" :src="src" :width="width" :height="height" :alt="alt">

        <!--使用v-bind的方式来取图片（简写方式 直接绑定对象）  方式3-->
        <img v-bind="options">
    </div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
            src:"image/2.jpg",
            width:600,
            height:300,
            alt:"正在加载中",
            xxx2:"自定义属性哦",
            options:{
                src:"image/2.jpg",
                width:600,
                height:300,
                alt:"正在加载中",
                xxx2:"自定义属性哦"
            }
        }
    });
</script>

v-model

 v-model  双向绑定
        他支持的标签：
            <input>   <select>    <textarea>
    <div id="app">
        <input type="text" v-model="username">{{username}}<br/>

        <input type="checkbox" v-model="hobbys" value="lq">篮球
        <input type="checkbox" v-model="hobbys"  value="zq">足球
        <input type="checkbox" v-model="hobbys"  value="ppq">乒乓球
        <input type="checkbox" v-model="hobbys"  value="pq">排球 &emsp; {{hobbys}}<br/>

        <input type="radio" v-model="sex" value="0">女
        <input type="radio" v-model="sex" value="1">男    &emsp; {{sex}}<br/>

        <select v-model="country">
            <option value="-1">请选择</option>
            <option value="zh">中国</option>
            <option value="us">美国</option>
            <option value="jp">日本</option>
        </select>
        {{country}}<br/>

        <textarea v-model="intro" rows="5" cols="20"></textarea>{{intro}}
    </div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
            username:"默认值",
            hobbys:["zq","ppq"],
            sex:0,
            country:"zh",
            intro:"我很优秀，真的很优秀"
        }
    });
</script>

v-on

 <!--v-on: 语法格式，应该写表达式或者触发的函数-->
    <div id="app">
        <!--完整写法-->
        <input type="button" v-on:click="num++" value="按钮">
        {{num}}
        <input type="button" @click="show('传参')" value="按钮2">
    </div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
           num:0
        },
        methods:{
            show(msg){
                alert("show show show show ..."+msg);
            }
        }
    });
</script>

  关注公众号，获取免费软件、资料，笔记等。