vue常用标签(引入vue.js写法)

首先在html中引入vue.js,具体怎么下载可以参考https://blog.csdn.net/lvoelife/article/details/129254906，下载后在html中引入：

一 内容绑定

(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":"李四"}
            ]
        }