VUE学习笔记(一)

charming 8月前 ⋅ 362 阅读

vue

javaScript框架,减少dom操作,实现数据的双向绑定

指令

  • v-clock 解决插值表达式闪烁问题 ({{}})

  • v-text 覆盖元素原本内容,无闪烁问题

  • v-html 以标签的形式显示在页面

  • v-bind绑定属性的指令(简写:) 单向的数据绑定,M->V

    • <div id="app">   
          <input type="button" value="按钮" v-bind:title="mytitle">
      </div>
      
          new Vue({        
              el: '#app',        
              data: {            
                  mytitle:"hahhaha"
              }    
          })
      
      

  • v-on事件绑定 (简写@)

事件修饰符

stop(事件.stop阻止事件冒泡 )

prevent(阻止默认行为)

capture(捕获触发,例一个div包裹一个按钮,点击按钮先触发div,在触发按钮)

self(只有点击当前元素才会触发事件)

once(事件只触发一次)

v-model(双向数据绑定 只能运用在表单元素中)

model的数据渲染到视图,也可以从视图渲染到Model

<div id="app">
    <input type="text" v-model="n1">
    <select v-model="operator">
        <option value="+" >+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" v-model="n2">
    <input type="button" value="=" @click="jisuan">
    <input type="text" v-model="n3">
</div>

    new Vue({
        el: '#app',
        data: {
            operator:"-",
            n1:3,
            n2:5,
            n3:8
        },
        methods:{
            jisuan(){
                switch (this.operator) {
                    case "+":
                        this.n3=parseInt(this.n1)+parseInt(this.n2);
                        break;
                    case "-":
                        this.n3=this.n1-this.n2;
                        break;
                    case "*":
                        this.n3=this.n1*this.n2;
                        break;
                    case "/":
                        this.n3=this.n1/this.n2;
                        break;
                }
            }
        }
    })


设置样式

:class="['样式名1',‘样式名2’...]" (可在数组中使用三元表达式)

<div id="app">
    <p :class="['font','color','active']">哈哈哈哈哈哈哈</p>
</div>
<div id="app">
    <p :class="['font','color',flag?'active':'']">哈哈哈哈哈哈哈</p>
    <!--或者下面的写法-->
    <p :class="['font','color',{active:flag}]">哈哈哈哈哈哈哈</p>
    <!--或者下面的写法 直接使用对象-->
    <p :class="{font:true,color:true}">哈哈哈哈哈哈哈</p>
</div>

    new Vue({
        el: '#app',
        data: {
            flag:false
        }
    })

<div id="app">
    <p :class="myclass">哈哈哈哈哈哈哈</p>
</div>

    new Vue({
        el: '#app',
        data: {
            myclass:{font:true,color:true}
        }
    })

:style="{属性名:‘值’....}",也可以直接引用data里定义的样式对象

v-for(2.20+使用key是必须的)

key属性只能使用number获取string 必须使用v-bind属性绑定,指定key的值

<div id="app">
    <!--数组循环-->
    <h2 v-for="(item,i) in list">索引{{i}}------{{item}}</h2>
    <h2 v-for="user in userList">{{user.name}}++++{{user.age}}</h2>
    <!--对象循环-->
    <h2 v-for="(v,k) in car">{{k}}----值:{{v}}</h2>
    <!--数字循环-->
    <h2 v-for="num in 10">{{num}}</h2>
</div>

    new Vue({
        el: '#app',
        data: {
           list:[1,2,3,4,5,6],
            userList:[{name:'zhangsan', age:10},
                {name:'lise', age:19}
            ],
            car:{
               name:'bb',
                price:10000
            }
        }
    })

v-if、v-show

v-if 会新增或删除元素

v-show会显示或者隐藏元素


全部评论: 0

    我有话说: