vue基础api总结vue基础-插值表达式 vue有一个最基本的功能：数据渲染。将数据（变量，或者利用ajax从后端

vue基础-插值表达式

vue有一个最基本的功能：数据渲染。将数据（变量，或者利用ajax从后端获取到的数据）展示到页面上。这里它不会直接操作dom，而是有自己的语法

在vue中{{ }}语法，叫做：插值表达式，大白话就是输出{{ }}中的表达式的值的语法。

v-bind

v-bind用来动态绑定标签上的属性的值

<template>
     <h2>v-bind绑定属性值</h2>
     <p>{{name}}</p>
     <!-- 绑定属性 
      v-bind:src 可以简写成  :src 
    -->
     <!-- <img src="{{imgSrc}}"/> -->
     <img v-bind:src="imgSrc" v-bind:id="id"/>
   </template>
   <script>

        data () {
          return {
            name: "尤大大",
            id: 'imgHeader',
            imgSrc: "https://bkimg.cdn.bcebos.com/pic/4afbfbedab64034f29596c8ba6c379310b551da2"
          }
        }
   </script>

v-bind指令有简写用法 : 冒号，例如：

<img :src="data数据">

v-for

列表渲染, 所在标签结构, 按照数据数量, 循环生成

<标签 v-for="(值, 索引或者属性名) in 目标结构" :key="唯一值"></标签>

<template>
<div>
  <h2>v-for</h2>
  <ul>
    <!-- 
        数组
        item 就循环变量，用来指向当前的数组元素
        idx:下标 
        key要是一个在循环的过程中的唯一值
      -->
    <li v-for="(item, idx) in arr" :key="item.id">
      {{idx + 1}}, {{item.name}}, {{item}}, {{idx}}
  </li>
    <!-- {{item}} -->
  </ul>
  <hr>
  <!-- 对象 -->
  <p v-for="(value, propName) in obj" :key="propName">{{value}}-{{propName}}</p>
  <hr>
  <!-- 数字 -->
  <p v-for="idx in 100" :key="idx">{{idx}} I miss you</p>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        obj: {a:1, b: 2},
        arr: [{id:1, name:'小花'}, {id:2, name:'小明'}, {id:3, name:'小白'}]
      }
    }
  }
</script>

<style>
  
</style>

v-text和v-html

更新DOM对象的innerText/innerHTML

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

<template>
  <div>
    <p v-text="str"></p>
    <p v-html="str"></p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        str: "<span>我是一个span标签</span>"
      }
    }
  }
</script>

v-text把值当成普通字符串显示, v-text ===> innerText

v-html把值当做html解析,v-html ===> innerHTML

v-show和v-if

控制标签的可见与不可见

<标签 v-show="vue变量" />
<标签 v-if="vue变量" />

如果vue变量的值为true，就可见，否则就不可见

v-show 用的display:none隐藏 (频繁切换使用)
v-if 直接从DOM树上添加或移除

<template>
  <div>
    <h1 v-show="isOk">v-show的盒子</h1>
    <h1 v-if="isOk">v-if的盒子</h1>

    <div>
      <p v-show="age > 18">我成年了</p>
      <p v-if="age > 18">我成年了</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOk: true,
      age: 15,
    }
  }
}
</script>

v-if,v-else-if,else

模板中的选择结构

<标签 v-if="条件">        </标签> 
<标签 v-else-if="条件">   </标签> 
<标签 v-else-if="条件">   </标签> 
<标签 v-else>             </标签>

v-on和methods

给标签绑定事件

<标签 v-on:事件名="要执行的少量代码" >
<标签 v-on:事件名="methods中的函数" >
<标签 v-on:事件名="methods中的函数(实参)"> 注意
v-on可以简写成 @。即 @事件名="methods中的函数"
事件名可以是任意合法的dom事件

<!-- vue指令:   v-on事件绑定-->
<button v-on:click="msg=1">简单代码直接写</button>
<button v-on:click="add2">增加2个,调用函数</button>
<button v-on:click="addN(5)">一次加5件，调用函数传递参数</button>

<button @mouseenter="mouseFn">鼠标进入事件</button>

<script>
    export default {
        data(){
          return {
            msg: 'v-on'
          }
        },
        methods: {
            add2(){
                console.log('add2')
            },
            addN(num){
                console.log(num)
            },
            mouseFn(){
                console.log('mouseFn')
            }
        }
    }
</script>

v-on事件对象

vue事件处理函数中, 拿到事件对象

无传参, 通过形参直接接收
传参, 通过$event指代事件对象传给事件处理函数

  <template>
  <div>
    <a @click="one" href="http://www.baidu.com">阻止百度</a>
    <hr>
    <a @click="two(10, $event)" href="http://www.baidu.com">阻止去百度</a>
  </div>
</template>

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

v-on事件修饰符

<标签 @事件名.修饰符="methods里函数" />

.stop - 阻止事件冒泡
.prevent - 阻止默认行为
.once - 程序运行期间, 只触发一次事件处理函数

<template>
  <div @click="fatherFn">
    <!-- vue对事件进行了修饰符设置, 在事件后面.修饰符名即可使用更多的功能 -->
    <button @click.stop="btn">.stop阻止事件冒泡</button>
    <a href="http://www.baidu.com" @click.prevent="btn">.prevent阻止默认行为</a>
    <button @click.once="btn">.once程序运行期间, 只触发一次事件处理函数</button>
  </div>
</template>

<script>
export default {
  methods: {
    fatherFn(){
      console.log("father被触发");
    },
    btn(){
      console.log(1);
    }
  }
}
</script>

v-on按键修饰符

给键盘事件, 添加修饰符, 增强能力

@keyup.enter - 监测回车按键
@keyup.esc - 监测返回按键

<template>
  <div>
    <input type="text" @keydown.enter="enterFn">
    <hr>
    <input type="text" @keydown.esc="escFn">
  </div>
</template>

<script>
export default {
 methods: {
   enterFn(){
     console.log("enter回车按键了");
   },
   escFn(){
     console.log("esc按键了");
   }
 }
}
</script>

v-model双向绑定

把value属性和vue数据变量,双向绑定到一起

语法 : v-model="data数据变量"

双向数据绑定

数据变化 -> 视图自动同步
视图变化 -> 数据自动同步

<template>
  <div>
    <!-- 
    	v-model:是实现vuejs变量和表单标签value属性, 双向绑定的指令
    -->
    <!-- 绑定输入 -->
    <div>
      <span>用户名:</span>
      <input type="text" v-model="username" />
    </div>
    <div>
      <span>密码:</span>
      <input type="password" v-model="pass" />
    </div>
    
    <!-- 绑定选择 -->
    <div>
      <span>来自于哪里?</span>
      <select v-model="from">
        <option value="西安">陕西-西安</option>
        <option value="燕京">北京-燕京</option>
        <option value="大连">辽宁-大连</option>
      </select>
    </div>
    
    <div>
      <!-- checkbox特殊, 内部判断v-model是数组, 绑定value值 -->  
      <span>爱好</span>
      <input type="checkbox" v-model="hobby" value="吃饭" /><span>吃饭</span>
      <input type="checkbox" v-model="hobby" value="逛街" /><span>逛街</span>
      <input type="checkbox" v-model="hobby" value="旅游" /><span>旅游</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      pass: "",
      from: "",
      hobby: [], 
    }
  }
};
</script>

v-model修饰符

v-model.修饰符="vue数据变量"

.number 以parseFloat转成数字类型
.trim 去除首尾空白字符
.lazy 在失去焦点时触发更改而非inupt时

<template>
  <div>
    <div>
      <span>年龄:</span>
      <input type="text" v-model.number="age">
    </div>
    <div>
      <span>人生格言:</span>
      <input type="text" v-model.trim="motto">
    </div>
    <div>
      <span>自我介绍:</span>
      <textarea v-model.lazy="intro"></textarea>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: "",
      motto: "",
      intro: ""
    }
  }
}
</script>

vue基础-动态class

目标:

用v-bind给标签class设置动态的值

语法:

格式1：<标签 :class="变量" />
格式2：<标签 :class="{类名1: 布尔值, 类名2: 布尔值}" />
- 如果布尔值为true，就添加对应的类名

可以和静态class共存

就是把类名保存在vue变量中赋予给标签

<style>

        #app{width:500px;margin:50px auto;border:3px solid red;}
        .box{
           border:3px solid black;
           margin:5px;
        }
        .bg-blue{
            background-color: blue;
        }
        .bg-green{
            background-color: green;
        }
        .fs20{font-size:20px;}
        .tr{text-align: right;}
    </style>
</head>
<body>
  
    <div id="app">
        <h3 class="title">v-bind-绑定class</h3>
        <!-- 元素自有class和v-bind绑定的class会协同工作，一起生效 -->
        <div class="box" v-bind:class="cla ? 'bg-blue': 'bg-green'">
            1. 三元表达式
        </div>

        <!-- 如果对象中的属性值是true,
            则把对象中的属性名添加到类名中 -->
        <div class="box" :class="claObj">
            2. 绑定对象
        </div>

        <!-- 数组中元素是字符串，
            它会把所有的元素全添加到class中 -->
        <div class="box" :class="claArr">
            3. 绑定数组
        </div>
        <button @click="hAddClass">补充一个class</button>
    </div>
    <script>
        // v-bind 是用来动态绑定元素的属性，而class也是元素的属性
        // 目标： 可以通过动绑定class来控制样式 。

        // 方式：
        // 1. 三元表达式
        // 2. 绑定对象
        // 3. 绑定数组

        const vm = new Vue({
            el: "#app",
            // el: document.getElementById("app"),
            data: {
                cla: false,
                claObj: {
                    fs20: true,
                    tr: true
                },
                claArr:['fs20','tr', 'abc']
            },
            methods: {
                hAddClass () {
                    // 向数组中添加一个类 'c-red'
                    this.claArr.push('c-red')
                }
            }
        })
    </script>

vue基础-动态style

目标

给标签动态设置style的值

语法

<标签 :style="{css属性名: 值}" />

可以和静态style共存
样式中带-属性写成小驼峰

<div id="app">
        <h3 class="title">v-bind-绑定style</h3>
    
       <!-- 把对象的属性名和属性值直接设置到style中 -->
        <div class="box" :style="styleObj">
            1. 绑定对象
        </div>

        <!-- 把数组中的每一个元素（对象），取出来，组成style -->
        <div class="box" :style="styleArr">
            2. 绑定数组
        </div>
        <button @click="hBlack">改成黑色的字</button>
    </div>
    <script>
        // v-bind 是用来动态绑定元素的属性，而style也是元素的属性
        // 目标： 可以通过动绑定style来控制样式 。

        // 方式：
        // 1. 绑定对象
        // 2. 绑定数组

        const vm = new Vue({
            el: "#app",
            // el: document.getElementById("app"),
            data: {
                styleObj: {
                    color:'red',
                    // 如果属性名有-，则要加''
                    'background-color':'blue'
                },
                // 数组中的每一项都是一个对象，其中以键值对的格式设置了style
                styleArr:[ {color:'red','font-weight':'bold'}, {'font-size':'50px'} ]
            },
            methods: {
                hBlack () {
                    // 直接把styleObj中的color设置成black
                    this.styleObj.color = "black"
                   
                }
            }
        })
    </script>

计算属性

使用场景

如果一个结果需要依赖data中的数据，但是需要经过一些逻辑处理，才能得到你想要的数据。此时就可以使用计算属性。

使用格式

在两个地方使用：

模板
- 用插值表达式 {{计算属性名}}
- 用其它指令
在实例内
- this.计算属性名

语法

computed: {
    "sum": {//属性名
       //如果设置sum的值,就会调用set
        set(值){  
            
        },
       //如果获取sum的值,就会调用get
        get() {
            return "值"
        }
    }
}

需求

计算属性给v-model使用

<template>
  <div>
    <div>
      <span>名字:</span>
      <input type="text" v-model="full">
    </div>
  </div>
</template>

<script>
export default {
 data () {
    return {
      msg: 'full'
    }
  },
  computed: {
    full: { 
      get(){ // 获取full的值
        console.log("get方法触发");
        return this.msg
      },
      set(val){ // 要给full赋值
        console.log(val)
        this.msg = val
      }
    }
  }
}
</script>

计算属性有缓存，提高渲染性能。
如果在页面上需要用到对现有的数据进行加工得到新数据，则时要使用计算属性

过滤器

作用

转换格式, 把数据在显示之前做格式转换

定义的格式

{
    data(){},
    computed:{},
    methods:{},
    // 定义过滤器
    filters: {
      // 属性名称（过滤器名称）：属性的值（过滤器处理函数）
      myFilter:function(value,其它参数){
           return 过滤后的结果
      }
    }
}

使用的格式

// 不带参数
{{ msg | 过滤器}}
// 带参数
{{ msg | 过滤器(参数)}}

监听器

语法

 watch: {
     "被监听的属性名" (newVal, oldVal){
         
     }
 }

<template>
  <div>
    <input type="text" v-model="name">
  </div>
</template>

<script>
export default {
  data(){
    return {
      name: ""
    }
  },
  watch: {
    name(newVal, oldVal){ // 当msg变量的值改变触发此函数
      console.log(newVal, oldVal);
    }
  }
}
</script>

<style>

</style>

监听属性-深度监听和立即执行

目标

监听复杂类型, 或者立即执行监听函数

watch: {
    "要监听的属性名": {
        immediate: true, // 立即执行
        deep: true, // 深度监听复杂类型内变化
        handler (newVal, oldVal) {
            
        }
    }
}

<template>
  <div>
    <input type="text" v-model="user.name">
    <input type="text" v-model="user.age">
  </div>
</template>

<script>
export default {
  data(){
    return {
      user: {
        name: "小白",
        age: 18
      }
    }
  },
  watch: { // 固定属性(设置监听哪些属性)
    user: { // 具体属性名(被监听)
      handler(newVal, oldVal){ // 固定触发此函数
        console.log(newVal);
      },
      immediate: true, // 马上监听触发
      deep: true // 深度监听(监听name和age值的改变)
    }
  }
}
</script>