Vue复习02-基本使用

最新推荐文章于 2022-05-30 09:39:57 发布

等待freezeing

最新推荐文章于 2022-05-30 09:39:57 发布

阅读量125

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/EastFloatWater/article/details/113466069

版权

一、实例

new Vue({
        //挂载到html上
        el:'#app',
        //数据
        data:{},
        //成员方法
        methods:{},
        //计算属性
        computed:{},
        //组件
        component:{},
        //模板
        template:{}
        
    })

二、基本语法

Mustache语法
v-html v-once v-text v-pre v-cloak
v-if vs v-show
v-bind :
v-on @
v-for
v-model

三、基本语法解释

 Mustache语法---vue会自动将html中的{{ }}里的内容替换为Vue实例中对应的变量名

<div id="app">
<!--    可以在{{}}内进行任意字符串的拼接与计算-->
    <h2>{{message}},123</h2>
    <h2>{{firstName + ' ' + lastname}}</h2>
    <h2>{{counter*2}}</h2>
    <h2>
        result1:你好啊,123
        result2:Michale Jordan
        result3:200
    </h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: "你好啊",
            firstName: "Michale",
            lastname: 'Jordan',
            counter:100
        }
    })
</script>

v-once---让html只能得到一次数据,得到Vue实例传过来的数据后解除绑定

<div id="app">
    <h2>{{message}}</h2>
<!--    让数据只得到一次，而后不变-->
    <h2 v-once>{{message}}</h2>
    <h2>
        result:
        你好啊
        你好啊
        ---------------------------
        console ->app.message='123'
        ---------------------------
        result:
       	123
        你好啊

    </h2>
</div>

v-html---将data里面的字符串当做html解析

<div id="app">
    <h2>{{url}}</h2>
<!--    如果url是html形式，则用这种方式解析-->
    <h2 v-html="url"></h2>

    <h2>
        result1:<a href="http://www.baidu.com">百度一下</a>
        result2:百度一下
    </h2>

</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            message:"你好啊",
            url:'<a href="http://www.baidu.com">百度一下</a>'
        }
    })
</script>

v-text---和Mastache语法一样，Mastache语法是v-text的缩写(不同的是v-text会覆盖标签内原有的值)

<div id="app">
    <h2>{{message}}</h2>
    <h2 v-text="message">哈哈哈</h2>
    
    <h2>
        result1:你好啊
        result2:你好啊
    </h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            message:"你好啊",
            url:'<a href="http://www.baidu.com">百度一下</a>'
        }
    })
</script>

v-pre---不解析Mastache语法{{ }}里的内容

<div id="app">
    <h2>{{message}}</h2>
<!--    不解析{{message}}-->
    <h2 v-pre>{{message}}</h2>
    
    <h2>
        result1:你好啊
        result2:{{message}}
    </h2>
</div>

v-cloak---用于解决显示内容的闪烁问题

    <style>
        [v-cloak]{
            display: none;
        }
    </style>
    <div id="app" v-cloak>
    <h2>{{message}}</h2>
	</div>

四、进阶语法解释

v-if和v-show

相同点：都用于解决是否显示块元素的问题

不同：v-show本质和css的display：none一样只是将元素隐藏起来，DOM里面还存在这个元素。而v-if则是完全不加载这个DOM

用途：
v-show:如果需要对一个块元素进行频繁切换
v-if:较少切换时使用
Extra:v-if能够加在template标签上，但是v-show不行。

v-if

基本使用

<div id="app">
   <h2 v-if="IsShow">
       <div>abc</div>
   </h2>
    <h2 v-else>
        <div>edf</div>
    </h2>

    <h2>
        result:edf
        ---------------
        console->app.IsShow=true
        ---------------
        result:abc
    </h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            message:"你好啊",
            IsShow:false
        }
    })
</script>

需要注意的点，如果使用v-if时未给输入框添加key属性，则当从v-if切换到v-else时会将输入框内的值带到else的输入框内-------这是因为Vue会复用v-if和v-else的输入框，当从v-if切换到v-else时改变的其实只是placeholder。
注意给不复用的v-if属性下的元素添加key

<div id="app">
   <span v-if="IsUser">
    <label for="username">用户账号</label>
<!--       用key不复用,否则在用户账号text输入的内容会带到用户邮箱text中-->
       <input type="text" id="username" key="username">
   </span>
    
    <span v-else>
       <label for="email">用户邮箱</label>
        <input type="text" id="email" key="email">
    </span>
    <button @click="IsUser=!IsUser">切换类型</button>
    
    
</div>

v-bind :

v-bind一般有三种使用形式–
@1 v-bind:src=“imgURL”
@2 v-bind:class={active:isActive}
@3 v-bind:style={color: activeColor}
第一种后面往往跟的是data里面的字符串内容
第二种后面往往跟的是data里面的Boolean内容
第三种和第一种类似后面跟的是data里面的字符串内容
1.v-bind的基本使用

<div id="app">
<!--    03-动态绑定属性-->
<!--   <img v-bind:src="imgURL" alt="">-->
<!--    <a v-bind:href="url">百度一下</a>-->

<!--    语法糖-->
    <img :src="imgURL" alt="">
    <a :href="url">百度一下</a>
</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            message:"你好啊",
            imgURL:"../monobeno1.png",
            url:"http://www.baidu.com"
        }
    })
</script>

2.用v-bind：绑定class

对象语法—当isActive为true时将active绑定到class上

<div id="app">
    <h2 class="title" :class={active:isActive}>{{message}}</h2>
    <button v-on:click="btnclick">按钮</button>
    <h2>
    class:title active
    --------------
    console->app.isActive=false
    -------------
    class:title
    </h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            message:"你好啊",
            isActive:true,
        },
        methods:{
            btnclick:function () {
                this.isActive=!this.isActive
            }
        }
    })
</script>

数组语法—一般用于直接绑定上对应的Class而不进行Class的修改

<div id="app">
    <h2 :class="[active,line]">{{message}}</h2>
	<h2>
	class :active line
	</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            message:"你好啊",
            active:'nono',
            line:'yesyes'
        }
    })
</script>

3.用v-bind：绑定style----与绑定class类似
经常将绑定的条件判断写成一个计算属性

<div id="app">
    <h2 :style="GetStyles">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            message:"你好啊",
            finalSize:200,
            color:"red"
        },
        computed:{
            GetStyles:function () {
                return {fontSize:this.finalSize+'px',color:this.color}
            }
        }
    })
</script>

v-on @

v-on一般用于事件监听 v-on:click 类似于 js的onclick函数

<div id="app" v-cloak>
    <h2>{{counter}}</h2>
    <button @click="Increase">+</button>
    <button @click="Delete">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            counter:0
        },
        methods:{
            Increase(){
                this.counter++;
            },
            Delete(){
                this.counter--;
            }
        }
    })
</script>

v-on的修饰符
{
stop
prevent
once
}

<div id="app">
<!--1    .stop修饰符的使用  ----防止事件冒泡即点击按钮 既触发了btnClick函数又触发了divClick函数   -->
   <div @click="divClick">
       aaaaa
       <button @click.stop="btnClick">按钮</button>
   </div>
<!--2    .prevent修饰符的使用  阻止默认事件如表单提交-->
    <form action="baidu">
        <input type="submit" value="提交" @click.prevent="submitClick">
    </form>
<!--3    监听某个键盘的键帽-->
    <input type="text" @keyup="KeyUp">
<!--    4 once修饰符的使用,点击只能触发一次-->
    <button @click.once="onceClick">按钮2</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            message:"你好啊"
        },
        methods:{
            btnClick(){
                console.log("btnClick")
            },
            divClick(){
                console.log("divClick")
            },
            submitClick(){
                console.log("submitClick")
            },
            KeyUp(){
                console.log("KeyUp")
            },
            onceClick(){
                console.log("onceClick")
            }
        }

    })
</script>

v-for

v-for遍历数组 (item,index) in items
v-for遍历对象 (value,key,index) in items

div id="app">
<!--    1.在遍历过程中，没有使用索引值-->
    <ul>
        <li v-for="item in names">{{item}}</li>
    </ul>
    <!--    1.在遍历过程中，使用索引值-->
    <ul>
        <li v-for="(item,index) in names">
            {{index+1}} {{item}}
        </li>
    </ul>
</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            names:['why','kobe','james','curry']
        }
    })
</script>

<div id="app">
<!--    1.在遍历对象的过程中，如果只是获取一个值那么获取到的是value-->
    <ul>
        <li v-for="item in info">{{item}}</li>
    </ul>
    <!--    2.获取key和value  (value,key)-->
    <ul>
        <li v-for="(value,key) in info">{{value}}-{{key}}</li>
    </ul>

    <!--    2.获取key和value和index  (value,key,index)-->
    <ul>
        <li v-for="(value,key,index) in info">{{value}}-{{key}}</li>
    </ul>
    
</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
           info:{
               name:'why',
               age:18,
               height:1.88
           }

        }
    })
</script>

在v-for使用过程中最好给每个v-for遍历的元素添加上key属性，用于跟踪每个节点的值

<div id="app">
    <ul>
        <li v-for="item in letters" :key="item">{{item}}</li>
    </ul>
</div>

v-for和v-if同时使用
当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。一般将v-for和v-if分在不同级元素中使用

<ul v-if="todos.length">
  <li v-for="todo in todos">
    {{ todo }}
  </li>
</ul>

v-model

v-model用于和data里面的数据的双向绑定。
不同于v-bind只能修改data里面的内容才能修改html的值，同时v-model会忽略表单所有元素的初始值而只与Vue实例的data有关

原理：对html做v-bind绑定—修改data能修改html，在html元素中添加事件，事件触发后修改data的值—修改html能修改data

事件：

text 和 textarea 元素使用 value property 和 input 事件
checkbox 和 radio 使用 checked property 和 change 事件
select 字段将 value 作为 prop 并将 change 作为事件。

<div id="app" style="font-size:40px">
<!--    双向绑定-->
<!--   <input type="text" v-model="message">-->
<input type="text" :value="message" @input="click">
    {{message}}
</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            message:"你好啊"
        },
        methods:{
            click(event){
                this.message=event.target.value
            }
        }
    })
</script>

修饰符
lazy 失去焦点或回车时才改变值
number 让输入为number类型
trim 去掉头尾空格

<div id="app" style="font-size:40px">
    <!--1 .修饰符:lazy  失去焦点或者回车时才修改值-->
    <input type="text" v-model.lazy="message">
    {{message}}
    <br>
<!--    2.修饰符:number，让输入的为number类型-->
    <input type="number" v-model.number="age">
    <h2>{{age}}-{{typeof  age}}</h2>
    <br>
<!--    3.修饰符：trim-->
    <input type="text" v-model.trim="message">
    <h2>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            message:"你好啊",
            age:0
        }
    })
</script>

等待freezeing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue复习02-基本使用

一、实例new Vue({ //挂载到html上 el:'#app', //数据 data:{}, //成员方法 methods:{}, //计算属性 computed:{}, //组件 component:{}, //模板 template:{} })二、基本语法Mustache语
复制链接

扫一扫