Vue学习日记--壹

Vue的一些指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

1. v-text : innerText
2. v-html : innerHTML
3. v-if : if数据属性为真时渲染（切换开销较高）
4. v-else : 前一兄弟元素必须有 v-if 或 v-else-if（类似c的 if-else）
5. v-show ：通过display：none|block控制
6. v-bind : 绑定标签的属性（绑定内置属性和自定义属性）
7. v-on : 原生事件名 = ‘函数名’
8. v-for = “(key,value) in menuLists”，遍历数组

new Vue({
    
    
            el:"#app",
            data:function(){
    
    
               return{
    
    
                   msg0:'我是我',
                   msg:'指令系统',
                   msg2:'<h2>指令系统</h2>',
                   isshow:true,
                   isgreen:true,
                   menuLists:[
                       {
    
    id:1,name:'腰花',price:60} ,
                       {
    
    id:2,name:'北京烤鸭',price:25},
                       {
    
    id:3,name:'德州扒鸡',price:40},
                       {
    
    id:4,name:'宫保鸡丁',price:50}
                   ],
                   Persons:{
    
    
                       name:'卡卡西',
                       age:'20',
                       favorite:'奇热天堂'
                   }
               }
            },
//            入口组件，通常做一下全局的配置信息
            template:'' +
            '<div class="app">'+
             '<h1 v-text="msg0"></h1>'+
                '<h2 v-show="false">{
    
    {msg}}</h2>'+
                '<p v-html="msg2"> </p>'+
                '<p v-if="isshow">hahaha </p>'+
                '<div class="box" v-on:click="clickHandler" v-bind:class="{active:isgreen}"> </div>'+//点击会调用自定义函数clickHandler
                '    <ul> <li v-for = "item in menuLists"> <h5>{
    
    {item.id}}</h5> <h6>{
    
    {item.name}}</h6> <h4>{
    
    {item.price}}</h4> </li> </ul>'+
                '    <ul> <li v-for = "(key,value) in Persons"> {
    
    {key}}==={
    
    {value}} </li> </ul>'+//v-for两种遍历形式
            '</div>',
            methods: {
    
    
                clickHandler:function(){
    
    
                    console.log(this);
                    this.isgreen = !this.isgreen;}
            }
        });

事件处理

监听事件

前面说了我们可以用v-on监听DOM事件，并在触发时运行一些JavaScript代码： *v-on : 原生事件名 = '函数名'*

<button v-on:click="count += 1">Add</button>//监听click事件，事件触发是执行 count += 1
<button v-on:click="Add">Add</button>//Add是函数名，click事件触发时会调用Add函数，Add函数在methods中声明。

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

修饰符的顺序不同会有不同的意义：v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

按键修饰符

以上都是参照官方文档