Vue基础API

vue是一个mvvm框架

 m: model 数据

v: view 视图

vm: ViewModel 视图模型  vue已经处理

双向数据绑定： v变了m会自动变   m变了，v会自动变

数据驱动思想：vue不推荐操作DOM，直接操作数据

1、 v-bind 动态属性

        用于属性绑定

    <!-- v-bind:原生属性名="vue变量" -->
    <!-- 可简写为 :原生属性名="vue变量" -->



    <!-- :class="{类名: 布尔值} -->

    <!-- :style="{css属性名: 值} -->

2、v-on绑定事件

        事件绑定

    <!-- v-on: 事件名="method中的函数名/少量代码" -->
    <!-- @事件名="method中的函数名" -->

        事件对象

<template>
  <div>
    <a @click="one" href="http://www.baidu.com">百度</a>
    <hr />
    <!-- 传值需要主动输入参数$event -->
    <a @click="two(10,$event)" href="http://www.taobao.com">淘宝</a>
  </div>
</template>

<script>
export default {
  methods: {
    one(e) {
      e.preventDefault()
    },
    two(num, e) {
      e.preventDefault()
    }
  }
}
</script>

<style>
</style>

        按键修饰符

<!-- .stop阻止冒泡行为，.prevent阻止默认行为，.once 只生效一次 -->

@事件名.stop="函数"

3、v-model 双向绑定

<template>
  <div>
    <div>
      <span>用户名</span>
      <input type="text" v-model="username" />
    </div>

    <div>
      <span>地址</span>
      <select v-model="form">
        <option value="北京市">北京</option>
        <option value="南京市">南京</option>
        <option value="天津市">天津</option>
      </select>
    </div>

    <div>
      <span>爱好</span>
      <input type="checkbox" v-model="hobby" value="抽烟"> 抽烟
      <input type="checkbox" v-model="hobby" value="喝酒"> 喝酒
      <input type="checkbox" v-model="hobby" value="写代码"> 写代码
    </div>

    <div>
      <span>性别</span>
      <input type="radio" v-model="gender" value="男" name="sex"> 男
      <input type="radio" v-model="gender" value="女" name="sex"> 女
    </div>

    <div>
      <span>年龄</span>
      <input type="text" v-model.number="age">
    </div>

    <div>
      <span>自我介绍</span>
      <!-- trim 去两端空格，lazy失焦再更新内容，number转换为数字型 -->
      <textarea v-model.trim.lazy="intro"></textarea>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      form:"",
      hobby:[], //""只能全选，返回值为布尔值，[]返回被选择的选项的数组
      gender:"",
      intro:"",
      age:""
    }
  }
}
</script>

<style>
</style>

4、v-text和v-html

        v-html可以识别html标签

    v-html="vue变量"
    v-text="vue变量"

5、v-show和v-if控制标签隐藏和出现

        v-show使用display:none;将标签隐藏，v-if是移除标签

    v-if="布尔值"
    v-show="布尔值"

6、v-for指令

        可用于遍历数组、对象、数字、字符串

<template>
  <div>
    <h3>数组</h3>
    <div v-for="(item,index) in arr" :key="index">
      索引号：{{index}}---元素：{{item}}
    </div>

    <h3>对象</h3>
    <div v-for="(value,key) in obj" :key="key">
      键：{{key}}---值：{{value}}
    </div>

    <h3>字符串</h3>
    <div v-for="(item,index) in str" :key="index">
      索引：{{index}}---元素：{{item}}
    </div>

    <h3>数字</h3>
    遍历1~number的数字
    <div v-for="(item,index) in number" :key="index">
      索引：{{index}}---元素：{{item}}
    </div>    
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [1, 2, 3, 4],
      obj: {
        a: 11,
        b: 22,
        c: 33
      },
      number:3,
      str:'qwert'
    }
  }
}
</script>

<style>
</style>

7、过滤器

        全局过滤器：在main.js定义

// 全局过滤器
Vue.filter("reverse", val => val.split("").reverse().join(""))

        局部过滤器：在export default对象定义

export default {
  data(){
    return {
      msg:'abcdef'
    }
  },
  // 局部过滤器
  filters:{
    toUp(val){
      return val.toUpperCase()
    }
  }
}

        使用

<p>{{ msg | reverse | toUp}}</p>

8、监听器

  语法:
    watch: {
      变量名 (newVal, oldVal){
        // 变量名对应值改变这里自动触发
      },
      变量名: {
        handler(newVal, oldVal){

        },
        deep: true, // 深度侦听(对象里面层的值改变)
        immediate: true // 立即侦听(网页打开handler执行一次)
      }
    }

  //监听器
  watch: {
    list: {
      handler() {
        // 存入本地
        localStorage.setItem('pList', JSON.stringify(this.list))
      },
      deep: true
    }
  },

9、计算属性computed

  // 计算属性
  computed: {
    allPrice() {
      // 3. 求总价
      return this.list.reduce((sum, obj) => sum += obj.price, 0)
    },
    avgPrice() {
      // 4. 求均价 - 保留2位小数
      return (this.allPrice / this.list.length).toFixed(2)
    }
  },