学习vue第一天

Posted 2021-05-26 前端世界升级打怪

记录一下自己学习vue的整个过程，对每天学习的知识进行复习整合

---

一：Vue的基本使用。

---

1：引入vue.js

//这里的路径是你放置vue.js的路径
<script type="text/javascript" src="../js/vue.js"></script>

2：MVVM模式

<div id="app"> <!--view -->
    <input type="text" v-model="username">
    <p>Hello {{username}}</p>
    
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
//el：指的是element（选择器）
//data：初始化数据（页面可以访问）
//v-model：双向数据绑定
//显示数据：{{XXXX}}

    //创建vue实例
    const vm = new Vue({//配置对象
        el:'#app',//elememt：选择器
        data:{//数据（model）
            username:'qiqiqi'
        }
    })
</script>

第一个M，指的是model，也就是data，V指的是view，VM指的是new出来的实例对象。

 

---

二：模板语法

---

view中有两种语法：指令，大括号表达式。

大括号表达式：

向叶面输出数据，可以调用对象的方法。

 <p>{{content}}</p>
  <p>{{content.toUpperCase()}}</p>

指令一：强制数据绑定

用的是v-bind：xxx='yyy'；可以简写为：xxx='yyy'。

<h2>2. 指令一: 强制数据绑定</h2>
  <a href="url">访问指定站点</a><br>
  <a v-bind:href="url">访问指定站点2</a><br>
  <a :href="url">访问指定站点3</a><br>

指令二：绑定事件监听

用的是v-on:click='xxx'；可以简写为：@click='xxx'。

<h2>3. 指令二: 绑定事件监听</h2>
  <button v-on:click="test">点我</button>
  <button @click="test">点我</button>

---

三：计算属性的使用

---

在computed属性对象中定义计算属性的方法。

computed
    包含多个方法的对象
    对状态属性进行计算返回一个新的数据, 供页面获取显示
    一般情况下是相当于是一个只读的属性
    利用set/get方法来实现属性数据的计算读取, 同时监视属性数据的变化

<div id="demo">
  姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
  名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
  <!--fullName1是根据fistName和lastName计算产生-->
  姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1"><br>
  姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2"><br>
  姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br>

  <p>{{fullName1}}</p>
  <p>{{fullName1}}</p>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  const vm = new Vue({
    el: '#demo',
    data: {
      firstName: 'A',
      lastName: 'B',
       fullName2: 'A-B'
    },

    // 计算属性配置: 值为对象
    computed: {//什么时候执行：初始化显示/相关的data的属性数据发生改变
      fullName1 () { // 属性的get()
        console.log('fullName1()', this)
        return this.firstName + '-' + this.lastName
      },

// 通过getter/setter实现对属性数据的显示和监视
 // 计算属性存在缓存, 多次读取只执行一次getter计算,计算属性后会存到缓存。
      fullName3: {
        //回调函数：你定义的，你没有调用，但最终它执行了
        //
        // 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值
        get () {
          console.log('fullName3 get()')
          return this.firstName + '-' + this.lastName
        },
        // 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值
        set (value) {// fullName3的最新value值  
          console.log('fullName3 set()', value)
          // 更新firstName和lastName
          const names = value.split('-')
          this.firstName = names[0]
          this.lastName = names[1]                                                                                 
        }
      }
    },


// 监视属性:
 // 通过通过vm对象的$watch()或watch配置来监视指定的属性
  //当属性变化时, 回调函数自动调用, 在函数内部进行计算
    watch: {
      // 配置监视firstName
      firstName: function (value) { // 相当于属性的set
        console.log('watch firstName', value)
        // 更新fullName2
        this.fullName2 = value + '-' + this.lastName
      }
    }
  })

  // 监视lastName
  vm.$watch('lastName', function (value) {
    console.log('$watch lastName', value)
    // 更新fullName2
    this.fullName2 = this.firstName + '-' + value
  })

</script>

---

四：强制绑定class和style

---

<!--
1. 理解
  在应用界面中, 某个(些)元素的样式是变化的
  class/style绑定就是专门用来实现动态样式效果的技术
2. class绑定: :class='xxx'
  xxx是字符串
  xxx是对象
  xxx是数组
3. style绑定
  :style="{ color: activeColor, fontSize: fontSize + 'px' }"
  其中activeColor/fontSize是data属性
-->

<style>
    .classA {
      color: red;
    }
    .classB {
      background: blue;
    }
    .classC {
      font-size: 20px;
    }
  </style>


<div id="demo">
  <h2>1. class绑定: :class='xxx'</h2>
  <p :class="myClass">xxx是字符串</p>
  <p :class="{classA: hasClassA, classB: hasClassB}">xxx是对象</p>
  <p :class="['classA', 'classB']">xxx是数组</p>

  <h2>2. style绑定</h2>
  <p :style="{color:activeColor, fontSize}">:style="{ color: activeColor, fontSize: fontSize + 'px' }"</p>

  <button @click="update">更新</button>

</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      myClass: 'classA',
      hasClassA: true,
      hasClassB: false,
      activeColor: 'red',
      fontSize: '20px'
    },

    methods: {
      update () {
        this.myClass = 'classB'
        this.hasClassA = !this.hasClassA
        this.hasClassB = !this.hasClassB
        this.activeColor = 'yellow'
        this.fontSize = '30px'
      }
    }
  })
</script>

---

五：条件渲染

---

条件渲染指令：v-if v-else  v-show.对一个标签显示与隐藏。

* v-if : 如果vlaue为true, 当前标签会输出在页面中
* v-else : 与v-if一起使用, 如果value为false, 将当前标签输出到页面中
* v-show: 就会在标签中添加display样式, 如果vlaue为true, display=block, 否则是none

如果需要频繁切换，v-show较好。

<div id="demo">
  <p v-if="ok">表白成功</p>
  <p v-else>表白失败</p>

  <hr>
  <p v-show="ok">求婚成功</p>
  <p v-show="!ok">求婚失败</p>

  <button @click="ok=!ok">切换</button>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      ok: true,
    }
  })
</script>

v-else-if指令是在vue2.1.0版本中新增的，与v-if一起使用，可以实现互斥的条件判断。

---

六：列表渲染

---

<div id="demo">
  <h2>测试: v-for 遍历数组</h2>
  <ul>
    <li v-for="(p, index) in persons" :key="index">
      {{index}}--{{p.name}}--{{p.age}}
      --<button @click="deleteP(index)">删除</button>
      --<button @click="updateP(index, {name:'Cat', age: 16})">更新</button>
    </li>
  </ul>
  <button @click="addP({name: 'xfzhang', age: 18})">添加</button>

  <h2>测试: v-for 遍历对象</h2>

  <ul>
    <li v-for="(item, key) in persons[1]" :key="key">{{key}}={{item}}</li>
  </ul>

</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      persons: [
        {name: 'Tom', age:18},
        {name: 'Jack', age:17},
        {name: 'Bob', age:19},
        {name: 'Mary', age:16}
      ]
    },

    methods: {
      deleteP (index) {
        this.persons.splice(index, 1) // 调用了不是原生数组的splice(), 而是一个变异(重写)方法
              // 1. 调用原生的数组的对应方法
              // 2. 更新界面
      },

      updateP (index, newP) {
        console.log('updateP', index, newP)
        // this.persons[index] = newP  // vue根本就不知道
        this.persons.splice(index, 1, newP)
        // this.persons = []
      },

      addP (newP) {
        this.persons.push(newP)
      }
    }
  })
</script>

这里面的splice()是属于变异的方法，可以实现增删改的操作。

splice(index,1)删除，

splice(index,1,newel)更改，

splice(index,0，newel)添加，

---

七：事件处理

---

事件修饰符

1) .prevent : 阻止事件的默认行为 event.preventDefault()

2) .stop : 停止事件冒泡 event.stopPropagation

按键修饰符

1) .keycode : 操作的是某个 keycode 值的键

2) .keyName : 操作的某个按键名的键(少部分)

<div id="example">

  <h2>1. 绑定监听</h2>
  <button @click="test1">test1</button>
  <button @click="test2('abc')">test2</button>
  <button @click="test3('abcd', $event)">test3</button>

  <h2>2. 事件修饰符</h2>
  <a href="http://www.baidu.com" @click.prevent="test4">百度一下</a>
  <div style="width: 200px;height: 200px;background: red" @click="test5">
    <div style="width: 100px;height: 100px;background: blue" @click.stop="test6"></div>
  </div>

  <h2>3. 按键修饰符</h2>
  <input type="text" @keyup.13="test7">
  <input type="text" @keyup.enter="test7">

</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#example',
    data: {

    },
    methods: {
      test1(event) {
        alert(event.target.innerhtml)
      },
      test2 (msg) {
        alert(msg)
      },
      test3 (msg, event) {
        alert(msg+'---'+event.target.textContent)
      },

      test4 () {
        alert('点击了链接')
      },

      test5 () {
        alert('out')
      },
      test6 () {
        alert('inner')
      },

      test7 (event) {
        console.log(event.keyCode)
        alert(event.target.value)
      }
    }
  })
</script>

---

八：结尾

---

继续加油。