二.Vue基础使用
本文最后更新于 1879 天前,其中的信息可能已经有所发展或是发生改变。

基本语法

  • <p>{{value}}</p>插值表达式
    <!-- MVVM中的V -->
    <div id="app">
        <p>{{value}}</p>
    </div>
    <script>
        // MVVM中VM的调度者
        var vm=new Vue({
            el:"#app",
            // MVVM中的M
            data:{
                value:"hello vue"
            }
        })
    </script>
    
    • v-cloak避免插值表达式闪烁
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
    
    <p v-cloak>value===={{value}}</p>
    
    • 插值表达式不会覆盖所有显示内容,可自由拼接
  • v-text
    • 默认不会有闪烁问题
        <p v-text="msg"></p>
    
    • 会覆盖该标签的显示内容
  • v-html
    <div v-html="myhtml"></div>
    
  • v-bind绑定属性
    • 缩写:
    • 后面是表达式,可以拼接
    <input type="button" value="bt" :title="mytittle+`自定义tittle`">
    
  • v-on绑定时间
    • 缩写@
    <input type="button" value="bt" :title="mytittle+`自定义tittle`" @click="outText">
    
    methods:{
                outText:function(){
                    alert("hello");
                }
            }
    

    事件修饰符

  • .stop阻止冒泡
    • 冒泡行为
    <div class="inner" @click="divClick">
        <button type="button" value="maopao" @click="btnClick" style="width: 120px;height: 50px;"></button>
    </div>
    
    • 点击按钮时同时触发div的点击事件
      image
    @click.stop="btnClick"
    
  • .prevent阻止默认行为
    • 例如a标签跳转链接
      @click.prevent="btnClick"
  • .capture添加事件侦听器时使用事件捕获模式
    @click.capture="divClick"
    
    • 点击按钮时,div上捕获点击,从而先执行div的点击事件,然后才是按钮的点击事件
  • .self只当事件在该元素本身(比如不是子元素)触发时触发回调
    • 比如冒泡
  • .once事件只触发一次 (指的是事件修饰函数,例如.prevent)

使用class样式

  1. 数组
    <h1 :class="['red', 'thin']">H1</h1>
  2. 数组中使用三元表达式
    <h1 :class="['red', 'thin', isactive?'active':'']">H1</h1>
  3. 数组中嵌套对象
    <h1 :class="['red', 'thin', {'active': isactive}]">H1</h1>
  4. 直接使用对象
    <h1 :class="{red:true, italic:true, active:true, thin:true}">H1</h1>

使用内联样式

  1. 直接在元素上通过 :style 的形式,书写样式对象
    <h1 :style="{color: 'red', 'font-size': '40px'}">H1</h1>
  2. 将样式对象,定义到 data 中,并直接引用到 :style
    • 在data上定义样式:
data: {
        h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}
  • 在元素中,通过属性绑定的形式,将样式对象应用到元素中:
    <h1 :style="h1StyleObj">这是一个善良的H1</h1>

    1. :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>
  2. 迭代对象中的属性
    <div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div>
  3. 迭代数字
    <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 较好。
作者:Yuyy
博客:https://yuyy.info
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇