vue的基础概念和语法01

标签：页面   简单的   getc   数字类型   hold   shift   算法   pop   按钮   

vue的特点和web开发中的常见高级功能

• 解耦视图和数据
• 可复用的组件
• 前端路由技术
• 状态管理
• 虚拟DOM
• 数据响应式

不是所有元素操作都Vue都会监听并实现数据响应式

• ```js
    //push方法:追加
    this.letters.push('aaa')
    //pop(): 删除数组中的最后一个元素
    this.letters.pop();
    //shift(): 删除数组中的第一个元素
    this.letters.shift();
    //unshift(): 在数组最前面添加元素
    this.letters.unshift('aaa', 'bbb', 'ccc')
    //splice作用: 删除元素/插入元素/替换元素
    //删除元素: 第二个参数传入你要删除几个元素(如果没有传,就删除后面所有的元素)
    //替换元素: 第二个参数, 表示我们要替换几个元素, 后面是用于替换前面的元素
    //插入元素: 第二个参数, 传入0, 并且后面跟上要插入的元素
    splice(start):
    this.letters.splice(1,3)
    this.letters.splice(1, 3, 'm', 'n', 'l', 'x')
    this.letters.splice(1, 0, 'x', 'y', 'z')
    //sort() 排序
    this.letters.sort()
    //reverse() 反转
    this.letters.reverse()

  ```

• Vue不会监听通过索引值修改数组中的元素：
      this.letters[0] = 'bbbbbb';  //这样修改的元素不会被监听和响应
      //那如何修改索引为0的元素呢？
      方法一：this.letters.splice(0, 1, 'bbbbbb')
      //set(要修改的对象, 索引值, 修改后的值)
      方法二： Vue.set(this.letters, 0, 'bbbbbb')

安装vue ：1.CDN 2.下载引入 3.npm

创建Vue实例

• 创建时传入了一个对象options
• 这哥option包含了（常用基础选项）
  • el ：string|HTMLElement 作用：决定之后Vue实例会管理哪个DOM
  • data ：object|function(组件当中data必须是一个函数) 作用：Vue实例对应的数据对象
  • methods ：{ [key:string]:function} 作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用
  • computed（计算属性）：与methods相似，但是调用函数时不用（），当作属性直接调用 ,计算属性会进行缓存，如果多次使用时，计算属性只会调用一次
    
• computed和methods的区别
  • computed会设置缓存，当多次调用时只执行一次，而methods会调用多次，一般当我们讲一些数据进行一些处理并展示出去的时候用computed，而不用methods

vue的生命周期

• 生命周期：一个事物的诞生到消亡的整个过程
• callHook钩子函数 （Hook：钩子）

vue中的基本指令

1. Mustache语法 ：{{ }}
   • mustache语法中,不仅仅可以直接写变量,也可以写简单的js表达式
2. v-once指令：元素和组件只渲染一次，不会根据数据改变而改变
   • <h2 v-once> {{message}} </h2>
3. v-html指令：可以插入html标签(会覆盖标签中文本)

   •   url: '<a href="http://www.baidu.com">百度一下</a>'
       <h2 v-html="url"></h2>

4. v-text指令：和html相似，但是不能识别html标签（会覆盖标签中文本）
5. v-pre指令：跳过这个元素和他子元素的编译过程

   •    message:"小明"
        <h2 v-pre>{{message}}</h2> //message

6. v-cloak：cloak（斗篷），当js编译过慢时，遮挡Mustache语法让其不显示，这个指令在vue解析前存在，解析之后不再，所以通常配合css样式display：none来使用
7. v-for：用于遍历数组或者枚举对象
   • <p v-for="item in list">{{item.name}}-------{{item.age}} </p>(遍历数组，如果in前面有两个参数，第二个参数代表索引)
   • <p v-for="(val,key) in user">{{key}} ----- {{val}}</p>(对象是无序的，所以应该用value-key的形式)
   • 官方推荐我们在使用v-for的时候，给对应的元素或组件添加上一个:key
     • 这和Vue的虚拟DOM的Diff算法有关，不添加标识的时候，插入元素是替换了所有从插入位置以后了元素，而加入了唯一标识key（不要使用index来做标识，因为index会随着元素位置改变而改变）他会识别后面已有的一样的元素，只插入一个元素在进行渲染
8. v-bind：绑定属性，缩写 :

• 除了内容需要动态来决定以外，某些属性也希望动态来绑定（基本使用：a元素的href属性，img元素的src属性）
  • <a v-bind:href="aHref">百度一下</a> 缩写<a :href="aHref">百度一下</a>
• v-bind动态绑定class的两种方法（对象和数组）
  • 对象语法

  CSS代码：
      .active {
          color: red;
       }
  HTML代码：
      <h2 class="title" v-bind:class="{active: isActive, line: isLine}">{{message}}</h2>
      <h2 class="title" v-bind:class="getClasses()">{{message}}</h2>
  JS代码（vue）：
      const app = new Vue({
          el: '#app',
          data: {
          message: '你好啊',
          isActive: true,
          isLine: true
          },
          methods: {
          btnClick: function () {
              this.isActive = !this.isActive
          },
          getClasses: function () {
              return {active: this.isActive, line: this.isLine}
          }
          }
       })

  • 数组语法

  HTML代码：
        <h2 class="title" :class="[active, line]">{{message}}</h2>
        <h2 class="title" :class="getClasses()">{{message}}</h2>
  JS代码：
       const app = new Vue({
          el: '#app',
          data: {
          message: '你好啊',
          active: 'aaaaaa',
          line: 'bbbbbbb'
          },
          methods: {
          getClasses: function () {
              return [this.active, this.line]
          }
          }
      })

• v-bind动态绑定style的两种方法
• 对象方法
  js <h2 :style="{key(属性名): value(属性值)}">{{message}}</h2> // key：fontSize，font-size等属性名 value：属性如果不加字符串会被认定为变量（10px变量 "10px"属性值）
• 数组方法（相当于放入多个对象 用的很少）
  js HTML代码： <h2 :style="[baseStyle, baseStyle1]">{{message}}</h2> JS代码： const app = new Vue({ el: ‘#app‘, data: { message: ‘你好啊‘, baseStyle: {backgroundColor: ‘red‘}, baseStyle1: {fontSize: ‘100px‘}, } })

1. v-on:事件监听，缩写@

• v-on的参数问题：
  • 情况一：如果该方法不需要额外参数，那么方法后的（）课不添加，但是如果方法本身有一个参数，而调用时没有传值的话，会默认将原生的事件event参数传递进去
  • 情况二：如果需要同时传入多个参数，同时需要event时，可以通过$event传入事件
• v-on修饰符：
  js //1.stop（阻止冒泡，调用了event.stopPropagation() <button @click.stop="btnClick">按钮</button> //2.prevent（阻止默认行为，调用了event.preventDefault() <input type="submit" value="提交" @click.prevent="submitClick"> //3.{keyCode|keyAlias}监听某个键盘的键帽 <input type="text" @keyup.enter="keyUp"> //键别名（enter回车） <input type="text" @keyup.13="keyUp"> //键代码 //4.点击回调只会触发一次 <button @click.once="btn2Click">按钮2</button> //5.串联修饰符 <button @click.stop.prevent="doThis"></button>

1. v-if,v-else-if,v-else的使用

       <div id="app">
           <span v-if="isUser">
               <label for="username">用户账号</label>
               <input type="text" id="username" placeholder="用户账号">
           </span>
           <span v-else>
               <label for="email">用户邮箱</label>
               <input type="text" id="email" placeholder="用户邮箱" >
           </span>
           <button @click="isUser = !isUser">切换类型</button>
       </div>
       const app = new Vue({
           el: '#app',
           data: {
           isUser: true
           }
       })

   问题：当我们在文本框中已经输入了内容在进行切换的时候，文本内容并不会被清空，而是会沿用切换前已有的文本，这是为什么？
   原因：因为Vue在进行DOM渲染的时候，处于性能考虑，会尽可能复用已经存在的元素（input），而不是创建新元素，复用时有部分不同在进行替换（id，placeholder）
   解决：如果不希望Vue出现类型重复利用的问题，可以给对应的input添加key并保证key的不同（ 如：key="username"，key="email"）

2. v-show:和v-if的使用相似，但有些不同
   ```js
   //v-if: 当条件为false时, 包含v-if指令的元素, 根本就不会存在dom中
   

   {{message}}

   //v-show: 当条件为false时, v-show只是给我们的元素添加一个行内样式: display: none
   <h2 v-show="ture" id="bbb">{{message}}</h2>

   ```
   使用场景：当需要在显示与隐藏之间切片很频繁的使用时，使用v-show，当只有一次切换的时候，使用v-if
3. v-model：表单绑定双向数据
   • v-model双向数据绑定原理：(语法糖)
     1. v-bind绑定表单标签的value属性，实现从数据到页面的绑定
     2. v-on指令给当前元素绑定input事件（$event.target.value）实现从页面到数据的绑定
   • <input type="text" :value="message" @input="message = $event.target.value">
   • v-model可以结合radio，checkbox，select等标签一起使用
     1. radio : 多个radio标签用v-model绑定同一个属性
     2. checkbox： checkbox单选框，绑定的属性对应boolean值，checkbox多选框，绑定的属性对应的数组

     3. select:
        ```js
        
        苹果
        香蕉
        

        data：{
        fruit：‘香蕉‘
        }
        ```

     4. v-model修饰符:
        ```js
        //1.修饰符: lazy
        //作用：让数据失去焦点或者回车的时候才会更新
        <input type="text" v-model.lazy="message">

        //2.修饰符: number
        //作用：让输入框中输入的内容自动转成数字类型
        <input type="number" v-model.number="age">

        //3.修饰符: trim
        //作用：可以过滤内容左右两边的空格
        <input type="text" v-model.trim="name">
        ```

        深入理解计算属性(computed)

• 调用计算属性的方法的时候为什么不用加（）？下面来看一下计算属性的本质

•   computed: {
      fullName: {
        set: function(newValue) {
          // console.log('-----', newValue);
          const names = newValue.split(' ');
          this.firstName = names[0];
          this.lastName = names[1];
        },
        get: function () {
          return this.firstName + ' ' + this.lastName
        }
      },

  计算属性本质就 是对象属性，里面包含了setter和getter方法，但是我们通常不适用setter方法，让其成为只读属性，这样就有了另外一种缩写方式：

         fullName: function () {
            return this.firstName + ' ' + this.lastName
      }

  其实这样就是只调用某个计算属性中的get方法

vue的基础概念和语法01

标签：页面   简单的   getc   数字类型   hold   shift   算法   pop   按钮   

原文地址：https://www.cnblogs.com/JCDXH/p/11638442.html