Vue(自学)

Vue

一.列表渲染

1. 我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名

v-for

<li v-for="item in items">
   {{item}}
</li>

data(){
      return {items:['angular','react','vue','jquery']}
}

v-for对象

//可以用 v-for 来遍历一个对象的 property。
<li v-for="value in obj">
   {{value}}
</li>

data(){
      return {obj:{title:"Vue2.0入门",author:"木木",pdate:"2022-3-1"}}
}

v-for索引

//v-for 还支持一个可选的第二个参数，即当前项的索引。
<li v-for="(item,index) in items" >
   {{index}}-{{item}}
</li>

data(){
      return {items:['angular','react','vue',jquery]}
}

v-for 唯标识符 key

//为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一的 key
<li v-for="(item,index) in items"  key="item.id" >
...
</li>
//不建议使用index作为key的值（只要key的值唯一就行

v-for 范围

1. v-for 也可以接受整数。在这种情况下，它会把模板重复对应次数
2. {{ n }}

二.事件

1.监听事件

1. 我们可以使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件，并在触发事件时执行一些 JavaScript。

<button @click="counter++">{{counter}}</button>
<button v-on:click="counter--">{{counter}}</button>


new Vue({
  data() {
    return {   counter: 1   }
  }
})

2.事件处理方法

1. 许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。

<button @click="greet">问候</button>

new Vue ({
    data(){return{name:'vue'}},
    methods: {        greet(event){
            alert('你好'+this.name)
       }     }  
})

3.内联处理器中的方法

1. 除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法：

<button @click="say('你好')">问候你好</button>
<button @click="say('吃饭了没')">问候吃饭</button>

new Vue ({
        methods:{say(msg){alert(msg)}
        }  
})

4.事件修饰符

1. 阻止事件冒泡与阻止默认事件
2. Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。

<div @click="showMe" style="padding: 50px;">
   // <!-- 阻止单击事件继续冒泡 -->
    <div class="son" @click.stop="showMe" style="background-color: #dbffd0;">阻止事件冒泡</div>
    //<!-- 单击事件不跳转 -->
    <a @click.prevent="showMe" href="http://baidu.com">百度</form>
   //<!-- 修饰符可以串联 -->
    <a @click.stop.prevent="showMe"  href="http://baidu.com">串联</a>
   // <!-- 只执行一次 -->
    <button @click.once="showMe">我爱你</button>
</div>

methods:{
    showMe(event){ alert(event.target.innerHTML) }
}  
//单词:
//.stop		阻止事件冒泡
//.prevent	阻止默认事件	
//.capture	捕获
//.self		自身元素触发
//.once		执行一次
//.passive	滚动立即触发，不等待滚动完成（移动端性能提升）

5.按键修饰符

1. 监听键盘事件时，我们经常需要检查特定的按键。可以使用按键修饰符

//<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input @keyup.enter="submit" />
//Vue 为最常用的键提供了别名
//.enter	回车
//.tab	制表
//.delete “删除”和“退格”键
//.esc	取消
//.space空格
//.up	上
//.down	下
//.left	 左
//.right	右

6.系统修饰符

1. 按下相应按键时才触发鼠标或键盘事件的监听器

//.enter	回车
//ctrl
//.alt
//.shift
//.meta (⌘或Windows 徽标键 ⊞)
//.exact 精确

7.鼠标按钮修饰符

//.left
//.right
//.middle
//这些修饰符会限制处理函数仅响应特定的鼠标按钮。

总结

这是我目前自己预习的Vue的一小部分知识,!