# Vue

**Repository Path**: Something0222/vue

## Basic Information

- **Project Name**: Vue
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-05-28
- **Last Updated**: 2024-06-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

Vue
======
#### 1.基础流程
 
 ```html
 <div id="app"> </div>  
 <!-- 准备根DOM容器 -->
 
 <script src="../vue.js"></script> 
    <!-- 引入Vue文件 
    vue.js暴露了一个全局变量Vue（构造函数） -->
 
 <script>
  const vm = new Vue({
    data:{}, //数据
    methods:{}, //方法
    watch:{}, //监视
 });

 vm.$mount("#app"); //渲染/挂载

 </script>
```
#### 2.方法
 ```html
    <div>{{ key }}</div>; 
    <!-- 插值语法 -->
 
 <div v-bind:value=" "></div>
    <!-- v-bind完整写法 -->
    <div :value=" "></div>
    <!-- v-bind简写方式 -->
    <!-- 单向数据绑定，只能从js（数据层）流向html（视图层）；如果修改html数据，js是不变的 -->
<hr/>
    <div v-model=" "></div>
    <!-- v-model -->
    <!-- 双向数据绑定，既能从js流向html，也可以从html流向js -->
<hr/>
    <div v-on:click=""></div>
    <!-- v-on完整写法 -->
    <div @click=""></div>
    <!-- v-on简写方式 -->
<hr/>
    <div @mousemove="handleMove(1, 'jack', false, { name: 'rose' })"></div>
    <!-- 回调函数参数：
            1. 如果不需要参数或只需要event参数，直接写回调函数 @click="handler"
            2. 如果需要其他参数 @click="handler(1, 2, 3)"
            3. 如果需要其他参数和event参数 @click="handler($event, 1, 2, 3)" 
            // arguments 函数接受到的所有参数 -->
</hr>
     <button type="submit" @click.prevent="login">登录</button>
     <!-- 事件修饰符 .prevent阻止默认行为，.stop 组织事件冒泡 -->
</hr>
      <input type="text" @keyup.13="handleKeyUp" />
      <input type="text" @keyup.enter="handleKeyUp" />
      <!-- 按键修饰符 .keycode .13，.keyname .enter -->
</hr>
      this指向实例化对象
       <!--箭头函数指向window，不是我们想要的，只有在不需要this的时候使用  -->