​--- date: 2021-11-19 time: 15:24 ​---

---

:key="index" => v-bind:key="index"

v-for="item,index in list"
v-for="item in list"
v-for="item,key in dict"
v-for="item in dict"

修饰符：点开头的语法

@click="代码或函数名"

横钢语法：

• v-model
• v-html
• v-bind
• v-show
• v-if

<a href="javascript:;"></a>
点击<a></a>标签时执行一段代码。此处为空，没代码执行。可以用来防止链接跳转。

v-bind:class="{'样式名':条件}"

export default的名字与import的名字

a.vue

....

export default {
    name: 'zs',
    age: 20
}

b.vue

import xxx from a.vue //xxx随便取自己定义
console.log(xxx.name) //'zs'

点击按钮之后发生刷新

参考创建一个方法并用 v-on 绑定这个方法到一个事件上第3点。

关键在button的@click。

当你运行此程序时，应用程序仍会将数据发布到服务器，从而导致刷新。

<template>
    <form action="">
        <label for="new-todo-input">What needs to be done?</label>
        <input type="text" name="new-todo" id="new-todo-input" autocomplete="off"/>
        <button type="submit" @click="al">Add</button>
    </form>
</template>

<script>
export default{
    methods:{
        al(){alert('hhh')}
    }
}
</script>

换成@click.prevent，使用 .prevent 处理程序来停止浏览器的默认提交操作，这样页面就不会刷新了。

<template>
    <form action="">
        <label for="new-todo-input">What needs to be done?</label>
        <input type="text" name="new-todo" id="new-todo-input" autocomplete="off"/>
        <button type="submit" @click.prevent="al">Add</button>
    </form>
</template>

<script>
export default{
    methods:{
        al(){alert('hhh')}
    }
}
</script>

或者这样

<form @submit.prevent="onSubmit">

组件之间传递数据

通过发出事件的方式传递。

ToDoForm.vue

<template>
...
   <button type="submit" @click.prevent="added">Add</button>
...
</template>

<script>
export default{
    methods:{
        added(){
            this.$emit("todo-added",this.label);
        }
    },
    data(){
        return {
            label:''
        }
    }
}
</script>

App.vue

<template>
...
    <todoform @todo-added="addToDo"></todoform>
...
</template>

<script>
import todoform from "./components/ToDoForm.vue"
export default {
  components:{
    todoform
  },
  data(){
    return {
      ToDoItems:[
      ],
    }
  },
  methods:{
    addToDo(r){
      this.ToDoItems.push({ id:uniqueId('todo-'), label: r, done: false });
    }
  }
}
</script>