vue基本指令

1.v-html，v-text,{{}}。这三种方式都是vue里用来赋值的，最常用的v-html和{{}}

/*html*/
<div id="#app">
<h1 v-html="msg"></h1>//Hello Vue.js
<h2 v-text="msgs"></h2>//你好！
<h3>{{msgFun}}</h3>//林夕之梦
</div>
/*js*/
 <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
new Vue({
　　el:"#app",
　　data:{
   　　 msg:"Hello Vue.js",
   　　 msgs:"你好！",
　　　　msgFun:"林夕之梦"
　　　}
})

</script>

2.v-model数据双向绑定一般用于input

<div id="#app">
    <input type="text" v-model="msg"/>
    <p>{{msg}}</p>
</div>
/*js*/
 <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
new Vue({
　　el:"#app",
　　data:{
   　　 msg:"Hello Vue.js"
　　　}
})

</script>

3.v-if和v-show

<div id="#app">
<!--v-if 当flag等于false时 表面看到是隐藏实际是html里已经删除当前元素，等于true是在html里重新加载当前的元素-->
   <p v-if="flag">你好！</p>
<!--v-show等同于css的display属性 none和block-->
　　<p v-show="flags">林夕之梦</p>
</div>
/*js*/
 <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
new Vue({
　　el:"#app",
　　data:{
   　　 flag:true,
          flags:true
　　　}
})

</script>

4.v-for循环

<div id="#app">
　<!--在版本2.2以后 使用v-for循环时，必须带有key属性。key的属性只能使用number和string-->
 <!--使用key属性时候，必须使用v-bind属性绑定的形式，指定key的值-->
   <p v-for="(item,i) in list" :key="i">值{{item}} 索引值{{i}}</p>
 <!--v-for 循环数组-->
  <p v-for="(listArrItem,i) in listArr" :key="i">值：{{listArrItem.id}}--name是：{{listArrItem.name}} 索引值{{i}}</p>
 <!--v-for 循环对象-->
    <p v-for="(listObjItemVal,listObjItemKey,i) in listObj" :key="i">值：{{listObjItemVal}}-- 键：{{listObjItemKey}}--索引值{{i}}</p>
   <!--v-for 循环数字的话  这里是cunt值是从1开始计算-->
  <p v-for="cunt in 6">{{cunt}}</p>
</div>
/*js*/
 <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
new Vue({
　　el:"#app",
　　 data: {
            list:[1,2,3,4,5,6],
            listArr:[
                {id:1,name:'zs1'},
                {id:2,name:'zs2'},
                {id:3,name:'zs3'},
                {id:4,name:'zs4'}
            ],
            listObj:{
                name:"林夕",
                age:"18",
                xing:"男"
            }
        }
})

</script>

5.v-bind和v-on指令

<div id="app">
  <div v-bind="name">绑定了name属性</div>
   <button v-on:click="fun">确定</button>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
/*v-on可以简写为@click=""  v-bind可以简写为  :bind=""*/
/*@click  用于事件的绑定一般都会在method里处理*/
/*:bind 用于元素的属性绑定和值的传递 父子组件之间的参数传递*/
 new Vue({
        el: "#app",
        data: {
name:"林夕",
            msg: "一个单纯的少年，曾经也是一个单纯的少年，是最单纯的人"
        },
method:{
fun(){
console.log("点击确定")
}

}
    })
</script>

猜你喜欢