vue常用标签

一 内容绑定

(1)v-text：会替换掉html的内容

eg:<p v-text="username"></p>

(2){{}}：插值表达式占位内容，放在html中

eg:<p>{{username}}</p>

(3)v-html：可将html内容渲染到页面，v-text和{{}}不支持

eg:<div v-html="username"></div>

  const vm=new Vue({

        el:"#app",

        data:{

            username:"张三",

        }

        })

二 属性绑定

注意：插值表达式不能用在属性绑定

v-bind绑定属性值，可简写为英文冒号:，当需要与字符串动态拼接时需要加单引号，否则会识别为data里的变量值

eg:

　　<input type="text" v-bind:placeholder="content"/>

　　<img v-bind:src="photo">

  const vm=new Vue({

        el:"#app",

        data:{

            content:"请输入名称",

            photo:"https://pic.cnblogs.com/face/2622189/20211106175104.png"

        }

        })

三 使用js表达式

eg:

　　{{number+1}}

　　{{ok?'yes':'no'}}

　　{{message.split('').reverse().join('')}}

　　<div :title="'title'+number"></div>

  const vm=new Vue({

        el:"#app",

        data:{

            number:3,

            ok:true,

            message:"wangbo"

        }

        })

四 事件绑定

v-on可简写为@

eg:

  　　<button v-on:click="add">+1</button>

        <button @click="sub">-1</button>

 const vm=new Vue({

        el:"#app",

        methods:{

            add(){

                alert("+1");

            },

            sub(){

                alert("+1");

            }

        }

        })

五 指令与过滤器 

常用的有以下五种，这里解释一下事件冒泡，比如父div嵌套子div都有click事件，点击子div的click事件时，先触发小div在触发大的div

 

eg：两种写法

（1） <a href="http://www.baidu.com" @click="show($event)">跳转到首页</a>：(不传递参数时$event可省略)

const vm=new Vue({

        el:"#app",

        data:{

        },

        methods:{

            show(e){

                e.preventDefault();

                console.log("wangbo");

            }

        }

        })

 （2） <a href="http://www.baidu.com" @click.prevent="show">跳转到首页</a>

六 按键修饰符

键盘按键触发事件：

（1） <input @keyup.esc="clearInput"/>

        <input @keyup.enter="submit"/>

　　const vm=new Vue({

        el:"#app",

        data:{

        },

        methods:{

            clearInput(e){

                console.log("清除");

                e.target.value="";

            },

            submit(){

                console.log("确认提交");

            }

        }

        })

七 v-model双向绑定

v-bind也可赋值但是不具备双向绑定，常用的绑定标签有input，texteare，select

指令修饰符：

.number自动将用户的输入值转为数值类型：<input type="text" v-model.number="n1"/>

.trim自动过滤用户输入的首位空白符：<input type="text" v-model.trim="username"/>

.lazy在change时而非input更新：<input type="text" v-model.lazy="username"/>

eg:

 　　<input type="text" v-model="username"/>

        <hr>

        <input type="text" v-bind:value="username"/>

        <hr>

        <select v-model="option">

            <option>请选择</option>

            <option value="1">联强国际</option>

            <option value="2">华为</option>

            <option value="3">启明</option>

        </select>

        <hr>

        <input type="text" v-model.number="n1"/>+

        <input type="text" v-model.number="n2"/>=

        <span>{{n1+n2}}</span>

        <hr>

        <input type="text" v-model.trim="username"/>

        <hr>

        <input type="text" v-model.lazy="username"/>

　　const vm=new Vue({

        　　el:"#app",

    　　    data:{

        　　    username:"张三",

      　　      option:"2",

        　　    n1:1,

         　　   n2:2

　　        }

     　　   })

八 条件渲染指令

v-if动态创建或移除元素，初始状态不需要展示并且后期也可能不展示使用

v-show添加display=none的属性值，频繁切换时使用

eg:

     　<p v-if="flag">v-if控制</p>

        <p v-show="flag">v-show控制</p>

九 列表渲染指令

v-for,使用item in items形式的特殊语法，也可带上索引(item,index) in items,注意item,index都是形参，可根据需要重新命名

key的注意事项：

1只能是数字或者字符串

2必须具有唯一性

3建议用id作为key

4使用索引index作为key没有意义，不具有唯一性

5建议使用v-for一定要指定key的值（既提升性能，又防止列表状态紊乱）

eg:

<table>

               <thead>

                    <tr>

                        <th>id</th>

                        <th>姓名</th>

                    </tr>

               </thead>

                <tbody>

                    <tr v-for="item in userList" :key="item.id">

                    <td>{{item.id}}</td>

                    <td>{{item.name}}</td>

                    </tr>

                </tbody>

        </table>

const vm=new Vue({

        el:"#app",

        data:{

            userList:[

                {"id":1,"name":"张三"},

                {"id":2,"name":"李四"}

            ]

        }