美文网首页
Vue基础学习(一)

Vue基础学习(一)

作者: 赵镇 | 来源:发表于2018-08-13 21:45 被阅读8次

    V-bind表达式

    首先定义元素的属性

        <script>
            var vm = new Vue({
                el:'#app',
                data:{
                    msg:'<h1>大字体</h1>',
                    mytitle:'这是使用v-bind定义的标题'
                }
                
            })
        </script>
    

    v-bind表达式是用来绑定元素属性的例如

                <input type="button" value="按钮" v-bind:title="mytitle" />
    

    这样就可以绑定元素的title属性

    同时我们还可以将进行表达式的字符串的改变

    例如

                <input type="button" value="按钮" v-bind:title="mytitle+'123'" />
    

    当然v-bind可以直接简写为:

    例如

                <input type="button" value="按钮" :title="mytitle" />
    
    

    v-on表达式

    v-on表达式主要是Vue针对于传统dom元素的一些相应事件在Vue中的表现形式,

    下面以onclick为例列举一段代码

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script src="lib/vue.min.js"></script>
            <style type="text/css">
            </style>
        </head>
        <body>
            
            <div id="app">
                <input type="button" value="点击" v-on:click="show" />
            </div>
        </body>
        <script>
            var vm = new Vue({
                el:'#app',
                data:{
                    msg:'<h1>大字体</h1>',
                    mytitle:'这是使用v-bind定义的标题'
                },
                methods:{
                    show:function(){
                        alert("Hello");
                    }
                }
            })
        </script>
    </html>
    

    同时,我们可以简写v-on:表达式 简写为@,即将上述代码中的v-on:click简写为@click,同样可以达到与之前的效果一致

    事件修饰符的简单介绍

    • .stop 阻止冒泡
    • .prevent 阻止默认事件
    • .capture 添加事件侦听器时使用事件捕获模式
    • .self 只当事件在该元素本身(比如不是子元素)触发时触发回调
    • .once 事件只触发一次

    v-model双向数据绑定

    v-model实现的效果于v-text,v-bind类似,但是他只适用于表单元素,从而实现元素的双向数据绑定

    Vue设置样式

    直接在元素上使用:style设置

    <!--当样式中包含'-'时,必须使用单引号包裹属性-->
                <h1 :style="{color:'red','font-size':'50px'}">
                    这个字很大
                </h1>
    

    在data中定义属性

            var vm = new Vue({
                el:'#app',
                data:{
                         h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
                }
            })
    

    再去元素中使用:style进行赋值

    <h1 :style="h1StyleObj">这是一个善良的H1</h1>
    

    :style 中通过数组,引用多个 data 上的样式对象

    • 在data上定义样式:
    data: {
            h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
            h1StyleObj2: { fontStyle: 'italic' }
    }
    
    • 在元素中,通过属性绑定的形式,将样式对象应用到元素中:
    <h1 :style="[h1StyleObj, h1StyleObj2]">这是一个善良的H1</h1>
    

    Vue指令之v-forkey属性

    1. 迭代数组
    <ul>
      <li v-for="(item, i) in list">索引:{{i}} --- 姓名:{{item.name}} --- 年龄:{{item.age}}</li>
    </ul>
    
    1. 迭代对象中的属性
    
        <!-- 循环遍历对象身上的属性 -->
    
        <div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div>
    
    
    1. 迭代数字
    
    <p v-for="i in 10">这是第 {{i}} 个P标签</p>
    
    

    2.2.0+ 的版本里,当在组件中使用 v-for 时,key 现在是必须的。

    当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用 “就地复用” 策略。如果数据项的顺序被改变,Vue将不是移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。

    为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。

    Vue指令之v-ifv-show

    一般来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此,如果需要频繁切换 v-show 较好,如果在运行时条件不大可能改变 v-if 较好。

    相关文章

      网友评论

          本文标题:Vue基础学习(一)

          本文链接:https://www.haomeiwen.com/subject/tkjpbftx.html