Vue基础用法和指令

定义变量

• 在data函数内，返回的对象定义vue的变量： key: val (任意形式)

• 作用：

  • 在template的html结构中使用
  • 在js中使用

    <script>
    export default {
    // 在data函数内定义vue的变量
    data() {
    return {
     // 1.简单类型
     count: 0,
     str: 'hi Vue',
     // 2.复杂语法
     obj: {
       name: '普信男',
       age: 23
     },
     arr: [1,2,3]
    }
    }
    }
    </script>
    

    插值

• 又叫插值表达式|胡子语法

• 语法：{{ 变量名 }}

• 直接在template里面的html标签中使用

  <template>
  <div>
    <ul>
      <li>{{ count }}</li>
      <li>{{ str }}</li>
      <li>{{ obj }}</li>
      <li>{{'名字：' + obj.name }} {{'年龄：' + obj.age }}</li>
      <li>{{ arr }}</li>
      <li>{{ arr[1] }}</li>
    </ul>
  </div>
  </template>
  

  定义组件名

• 通过name属性来定义组件名

• 定义成唯一的值
• 可以打消eslint的文件命名报错

  <script>
  export default {
  // 通过name属性定义组件的名字
  name: 'var'
  }
  </script>
  

指令

事件绑定

• 在methods: {}中定义事件的回调函数
• 通过this.变量访问定义的变量，this指向当前.vue文件的组件实例

• 语法

  • v-on:事件名="要执行的少量代码"
  • v-on:事件名="methods中的函数"
  • v-on:事件名="methods中的函数(实参)"
  • 简写(推荐使用)：@事件名="methods中的函数"

    <template>
    <div>
    <h1 v-on:click="click1">点击</h1>
    <h1 @click="click1">dianji </h1>
    <h1 v-on:click="count++">{{count}}</h1>
    </div>
    </template>
    <script>
    export default {
    data() {
       return {
           count: 1,
       }
    },
    methods: {
       click1() {
           // 通过this.变量访问定义的变量
           console.log(this.count)
       }
    }
    }
    </script>
    <style>
    </style>
    

    事件对象

• 无传参, 通过形参直接接收

• 传参, 通过$event指代事件对象传给事件处理函数

  <template>
    <div>
        <h1>事件对象</h1>
        <div class="box" @click="fn"> 点击事件</div>
        <div class="box" @click="fn1(10,$event,20)"> 点击事件传参</div>
    </div>
  </template>
  <script>
  export default {
    methods: {
        fn(e) {
            console.log(e.target)
        },
        fn1(a,b,c) {
            console.log(a,b.target,c)
        }
  
    }
  }
  </script>
  <style>
  </style>
  

  事件修饰符

  语法：@事件名.修饰符="methods里的函数"

• .stop阻止事件冒泡

• .prevent阻止默认行为
• .once程序运行期间，只触发一次事件处理函数 ```vue

<a name="iVGyB"></a>
### 样式的动态控制
<a name="oe9ud"></a>
#### class的动态控制
语法：`:class="变量类命"``:class="{类名1: 布尔值, 类名2: 条件判断}"`

- 实际开发多使用（动态style少用）
- 变量类名的值是style中定义的类名（不加.）
- 绑定多个类名可以使用条件判断，满足条件才会追加样式
- 多个相同的类名会跟css一样有层叠性
```vue
<template>
  <div>
    <p :class="classRed">动态样式控制</p>
    <p :class="{ green: num > 100, red: true }">绑定多个，条件判断控制</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      classRed: 'red',
      num: 1041
    }
  }
}
</script>

<style scoped>
.red {
  color: red;
}
.green {
  color: green;
}
</style>

style的动态控制

语法：:style="{css属性: '值'}"

• 了解为主（实际开发使用会使得结构臃肿，少用）
• css属性的值可以用data变量来替换
• 可以和静态的共存（动态的优先级高于静态的） ```vue

---

<a name="Cvo7V"></a>
## vue过滤器-定义使用(了解)
语法：

- 全局（写在main.js）：
   - `Vue.filter("过滤器名", (值) => {return "返回处理后的值"})`
   - 所有页面有需要都可以使用
- 局部（写在当前页面.vue 跟data同级）：
   - `filters: {过滤器名: (值) => {return "返回处理后的值"}`
   - 只能在当前页面使用

使用：

- 需要使用过滤器的地方写 ` | 过滤器名`
- vue2.x有   vue3.x已经取消了
```vue
import Vue from 'vue'
Vue.filter('res', val => {
  return val.split('').reverse().join('')
})

<template>
  <div>
    <p>{{ msg | res }}</p>
    <p>{{ value | result }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: '!euv iah',
      value: 'hai vue'
    }
  },
  // 局部过滤器
  filters: {
    result: (value) => {
      return value + '2!'
    }
  }
}
</script>

<style scoped>
</style>

vue计算属性-computed

语法：
computed:{
计算属性变量名() {
return "根据某个data变量计算得到的新值"
}
}

• 依赖data变量，计算（数据处理）得出一个新的变量
• 一旦函数中依赖的data变量变化，他就会重新计算得到新的结果返回
• 表面上是一个函数，实际上是一个值，但不能直接修改计算属性的值
• 通过修改依赖的data变量，达到修改计算属性值的目的 ```vue

<a name="nKpCK"></a>
### 缓存

- computed自带缓存（性能更优）
- 计算属性是基于它们的依赖项的值结果进行缓存的，只要依赖的变量不变, 都直接从缓存取结果

<a name="Gnho8"></a>
## vue监听属性-watch
语法：<br />`watch{`<br />`被监听data变量名 (newVal, oldVal) {`<br />`data变化会执行的函数`<br />`}`<br />`}`

- 可以监听data/computed等属性值改变
- 监听函数的函数名要和监听的data变量名一样
- 第一个参数是改变后新的值，第二个参数是原先旧的指
- 监听数组，无法获取旧的值（新旧值都一样）
- 监听对象不能监听到内部的变化，需要`'对象名.键'`表示只监听对象身上这个键的变化
- <br />
```vue
<template>
  <div></div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'hi vue',
      list: [1, 2, 3, 4],
      obj: { name: '张三', age: 18, sexy: 'man' }
    }
  },
  watch: {
    msg (newValue, oldValue) {
      console.log(newValue, oldValue)
    },
    list (newValue, oldValue) {
      console.log(newValue, oldValue)
    },
    obj (newValue) { // 监听不到内部的变化
      console.log(newValue)
    },
    'obj.name' (newValue) { // 只能监听到对象中这个属性值的变化
      console.log(newValue)
    }
  }
}
</script>

<style scoped>
</style>

完整写法

语法：
watch{
要监听的data属性名: {
deep: true,
immediate: true,
handler(newVal, oldVal) {
属性变化执行的代码
}
}
}

• deep:true 开启深度监控
• immediate: true 在页面加载的时候，立即执行一次监听 (handler函数） ```vue

```