前端框架Vue的基本使用

最新推荐文章于 2022-07-18 17:02:10 发布

0error(s)

最新推荐文章于 2022-07-18 17:02:10 发布

阅读量187

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_40889460/article/details/98483047

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

v-cloak v-text v-html

使用v-cloak可以解决插值表达式闪烁的问题,不能解析表达式中的html标签,其中插值表达式只会替换自己这个占位符
v-text 会覆盖元素中原本的内容,不能解析表达式中的html标签
v-html 会覆盖元素中原本的内容,会解析表达式中的html标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id='app'>
    <p v-cloak> ++ {{ msg }}</p>
    <p v-html="msg"> 111</p>
    <p v-text="msg"> 111</p>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg : '<h2>123</h2>',
        }
    });
</script>
</body>
</html>

v-bind

v-bind 是Vue中用来绑定属性的指令,v-bind 可以简写为 :
v-bind 中可以写合法的表达式

<div id='app'>
    <input type="button" value="按钮" v-bind:title="title1+title2">
    <input type="button" value="按钮" :title="title1+6">
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
          title1:4,
          title2:4,
        }
    });
</script>

v-on

Vue 中提供v-on 事件绑定机制,缩写方式是: @
在mv对象中如果要回去data中的数据,必须通过this.属性名

<div id='app'>
 <button v-on:mouseover="show"> btn</button>
 <button @click="show"> btn2</button>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
			msg = 1;
        },
        methods:{
            show:function(){
                alert(this.msg)
            }
        }
    });
</script>

事件修饰符

.stop 阻止冒泡
.prevent 阻止默认行为
.capture 实现捕获触发事件的机制,
.self 只当事件在该元素本身才会触发事件,会阻止自己的冒泡和铺货触发事件
.once 事件只触发一次

<div id='app'>
    <div @click="divClick">
        <button @click.stop="btnClick">btn</button>
    </div>

    <a @click.prevent="aClick" href="https:baidu.com">http://baidu.com</a>

    <div @click.capture="divClick">
        <button @click="btnClick">btn</button>
    </div>

    <div @click.self="divClick">
        <button @click="btnClick">btn</button>
    </div>
    <a @click.prevent.once="aClick" href="https:baidu.com">http://baidu.com</a>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
        },
        methods:{
            divClick() {
                console.log("div");
            },
            btnClick() {
                console.log("btn");
            },
            aClick() {
                console.log("a")
            }
        }
    });

v-model

v-bind 只能实现数据的单向绑定从M绑定到V中,无法实现数据的双向绑定
使用v-model可以实现数据的双向绑定
v-model只能运用到表单元素中

<div id='app'>
    <input type="text" v-model="n1">
    <select v-model="opt" >
        <option>+</option>
        <option>-</option>
        <option>*</option>
        <option>/</option>
    </select>
    <input type="text" v-model="n2">
    <button v-on:click="calc">=</button>
    <input type="text" v-model="n3" readonly="true">

</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            n1:0, 
            n2:0,
            n3:0,
            opt:'+',
        },
        methods:{
            calc(){
                this.n3 = eval('Number(this.n1)'+this.opt+'Number(this.n2)');
            }
        }
    });

在Vue中使用样式

使用class样式

    <style>
        .red {
            color: red;
        }
        .thin {
            font-weight: 200;
        }
        .active {
            letter-spacing: 0.5em;
        }
    </style>
</head>
<body>
<div id='app'>
    <h1>hello</h1>
    <h1 :class="['active','thin']">hello</h1>
    <h1 :class="['active',flag?'red':'thin']">hello</h1>
    <h1 :class="['active',{'red':flag}]">hello</h1>
    <h1 :class="{red:true,active:false,thin:true}">hello</h1>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            flag:false,
        },
    });
</script>

使用内联样式

<div id='app'>
    <h1>hello</h1>
    <h1 :style="{color:'red','font-weight':'200'}">hello</h1>
    <h1 :style="styleObj1">hello</h1>
    <h1 :style="[styleObj1,styleObj2]">hello</h1>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            styleObj1 : {
                color:'pink',
            },
            styleObj2: {
                'letter-spacing': '0.5em',
            }
        },
    });
</script>

v-for

v-for 可以遍历普通数组数组,对象数组和对象,还可以迭代数字

<div id='app'>
    <!--i从0开始-->
    <p v-for="(item, i) in list">姓名:{{item.name}},序号:{{i}}</p>
    <!--i从0开始-->
    <p v-for="(value, key, i) in list[1]">{{key}}:{{name}},序号:{{i}}</p>
    <!--i从1开始-->
    <p v-for="i in 3">{{i}}</p>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
           list :[
               {
                   name:'张三',
                   age:12,
                   gender:'male',
               },
               {
                   name:'李四',
                   age:12,
                   gender:'female',
               },
               {
                   name:'jack',
                   age:33,
                   gender:'male',
               }
           ],
        },
    });
</script>

v-if 和v-show

v-if的特点:每次会重新删除和操作元素
v-show 的特点:只是切换了dispaly:none样式

<div id='app'>
   <button @click="flag = !flag">switch</button>
    <p v-if="flag">123</p>
    <p v-show="flag">234</p>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            flag : false
        },
    });

0error(s)

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端框架Vue的基本使用

v-cloak v-text v-html使用v-cloak可以解决插值表达式闪烁的问题,不能解析表达式中的html标签,其中插值表达式只会替换自己这个占位符v-text 会覆盖元素中原本的内容,不能解析表达式中的html标签v-html 会覆盖元素中原本的内容,会解析表达式中的html标签<!DOCTYPE html><html lang="en">&lt...
复制链接

扫一扫

专栏目录