vue2 基本使用

1.模板

2.computed 和 watch

3.class 和 style

4.条件

5.循环

6.事件

7.表单

一、模板

• 插值、表达式
  • • 　

      <template>
      　　<div>　　
             p>文本插值 {{message}}</p>
             <p> js 表达式 {{flag: 'yes' : 'no'}} (只能是表达式，不能是 js语句)</p>
         </div>
      </template>
      export default(){
          data(){
              return {
                  message:'hello vue',
      　　            flag: true
                }
          }      
      }    

      　　　
• 属性
  • • data: 定义组件的初始数据
    • props: 传递数据给子组件
    • computed: 定义计算属性
    • methods: 定义组件的方法
    • watch: 监听组件的数据变化
    • components: 注册子组件。将其他组件注册为当前组件的子组件，从而在模板中使用这些子组件　　　　
• 指令: 
  • • v-if: 条件渲染指令，根据表达式的真假来决定是否渲染该元素
    • v-show： 条件显示指令，根据表达式的真假来决定元素的显示和隐藏　　
    • v-for: 列表渲染指令，根据数据源循环渲染列表元素
    • v-bind： 属性绑定指令， 动态绑定属性
    • v-on： 事件绑定指令，用于监听 DOM事件，并执行对应的方法
    • v-model: 数据双向绑定指令，用于在表单和vue实例的数据之间建立双向绑定关系
    • v-text： 文本插值指令，将数据插入到元素的文本内容中
    • v-html： HTML 插值指令，将数据作为HTML解析并插入到元素中。会有XSS 风险，会覆盖　

二、computed 和 watch

　　1.computed 介绍

• • • computed 用来监控自己定义的变量，该变量在data 内没有声明，直接在computed中定义。
    • computed 中定义的属性值是对象时，那么对象中会定义一个get 方法和 一个set 方法，获取时调用get方法，数据变化时调用set方法
    • computed 中定义的属性值是函数时，那么默认会走get方法，必须要有一个返回值，函数的返回值就是该属性的属性值
    • computed 中定义的属性值会被缓存，只有当依赖数据发生变化时才会重新计算，这样可以避免重复计算提高性能（当页面重新渲染，或者页面中多处引用时，只要值不变就会直接从缓存中获取结果，不会重新计算）

<template>
     <div>
            <p>{{perName}}</p>
      </div>
</template>
export default {
    data(){
         per:{
               name: '张三',
               age: 18
         }
    }
   computed: {
          perName(){return this.per.name
          }
   }
}

　　2. watch 介绍

• • • watch 是检测data 内声明的数据。
    • watch 监听简单数据，可以获得新旧两个值
    • watch 检听对象时，需要使用深度监听，此时拿到的新旧两个值时一样的（因为他们存储的指针地址是同一个）。所以深度监听可以检测到数据变化，但不能检测到哪个属性发生了变化
    • watch 监听props 组件传过来的值时，第一次加载页面时不会执行，需要设置immediate:true 才会在第一次加载时执行

　　3.二者区别：

• • • computed 监听的数据在 data中 没有声明；而 watch 监听的数据必须是data 中声明的数据 或者props传过来的
    • computed 不支持异步； 而 watch 支持异步操作　
    • computed 具有缓存，页面重新渲染，值不变时，会直接返回之前计算的结果，不会重新计算。而watch 没有缓存功能，页面重新渲染时，数据不变也会执行
    • computed 计算属性值是函数时，默认使用get方法。如果属性值是对象时，属性值有一个get 和 set 方法。当数据变化时调用set方法
    • 　　　　　

三、class 和 style

四、条件

五、循环

六、事件

七、表单