- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

《web前端全栈成长计划》Vue第一章学习笔记（上）

张辉发表于 2020/09/07 17:00:09 2020/09/07

【摘要】 web前端全站成长计划第三阶段vue课程第一章的学习笔记（上）

本文摘自论坛 https://bbs.huaweicloud.com/forum/forum.php?mod=viewthread&tid=71831&authorid=70062&page=1 笔者对vue学习的笔记。由于vue笔者也是刚刚接触，基本上都是以观看视频和具体动手实践的方式进行。为防止迷路，特收集整理成本博文。

文中的图片、代码很多来自于教程本身，但都来自于本人实践后截图和拷贝的结果，特此说明。

vue.js 第一章 VUE基础

01 vue介绍

1.1 宣传的概念

渐进式的js框架

核心库+插件

真正项目时，光核心库是不够的。

其实react也是一样的。

1.2 作用

动态构建前端界面

尤雨溪尤大大。。。难道我们群里不是都叫大大吗?

先有angular 模板语法，数据绑定

再有react 组件化。虚拟DOM

vue将两者整合起来的优点。

1.3 vue的特点

MVVM模式的实现

编码简洁

大公司用react

小公司用vue比较多

react上手比较费劲

只关注UI.可以引入vue插件和第三方库

1.4 vue的构成

vue-cli：脚手架，帮助下载项目，写好配置，声明好了依赖
vue-resouce(axios) ajax请求
vue-router 路由
vuex 状态管理
vue-lazyload 图片懒加载
vue-scroller 页面滑动
mint-ui 移动UI组件库
element-ui PC UI组件库

02 vue基本使用

2.1 代码和笔记

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01_HelloWorld</title>
</head>
<body>

<!--
  1. 引入Vue.js
  2. 创建Vue对象
    el : 指定根element(选择器)
    data : 初始化数据(页面可以访问)
  3. 双向数据绑定 : v-model
  4. 显示数据 : {{xxx}}
  5. 理解vue的mvvm实现
-->

<!--模板-->
<div id="test">
  <input type="text" v-model="username"><br><!--指令-->
  hello {{username}}<!--大括号表达式-->
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  //Vue devtools
  //View ---ViewModel----Model（MVVM）
  //input监听，监视输入框的变化。数据保存到data
  //用户看到的是data（数据自动从内存写入页面）---数据绑定

  const vm = new Vue({ // 配置对象 options
    // 配置选项(option)
    el: '#test',  // element: 指定用vue来管理页面中的哪个标签区域 查找vue管理的数据
    data: { //数据 Model
      username: 'Zhanghui'
    }
  }) //实例是个VM对象
</script>
</body>
</html>

2.2 执行效果

03 vue模板语法

3.1 代码和笔记

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02_模板语法</title>
</head>
<body>
<!--
1. 模板的理解:
  动态的html页面
  包含了一些JS语法代码
    大括号表达式
    指令(以v-开头的自定义标签属性)
2. 双大括号表达式
  语法: {{exp}} 或 {{{exp}}}
  功能: 向页面输出数据
  可以调用对象的方法
3. 指令一: 强制数据绑定
  功能: 指定变化的属性值
  完整写法:
    v-bind:xxx='yyy'  //yyy会作为表达式解析执行
  简洁写法:
    :xxx='yyy'
4. 指令二: 绑定事件监听
  功能: 绑定指定事件名的回调函数
  完整写法:
    v-on:click='xxx'
  简洁写法:
    @click='xxx'

MVVM：
  Model：模型，数据对象data
  View：视图，模板页面（动态页面）DOM
  ViewModel：Vue的实例vm
声明式开发：
 {{xx}} 需要data中的xx
 仅声明v-model,并不需要开发者写读取和写入的处理。就可以实现xx的展示。。
 v-开头的标签属性

与之不同的：
命令式开发：jquery写法：需要去操作DOM，读写相关的内容。

-->

<div id="app">
  1. 双大括号表达式——显示数据，大括号里面写js表达式  {{msg}}  {{msg.toUpperCase()}}  <!--
    三个大括号 功能已被删除
     {{{msg}}}  -->
  <p v-html="msg2">  <!--将文本理解为一个标签  innerHTML
  -->
  <p v-text="msg2">  <!-- 给标签体添加一个文本  testContent
    -->

<!--  2. 指令一: 强制数据绑定 Data Bindings-->

<!--  <img src="imgUrl">  这里出不来结果-->
<!--  <img v-bind:src="imgUrl">-->
  <img :src="imgUrl">
  <!-- 将html语法变成vue表达式
    v-bind: 省略为 :
    -->

<!--  <a href="url">访问指定站点</a><br>-->
<!--  <a v-bind:href="url">访问指定站点2</a><br>-->
<!--  <a :href="url">访问指定站点2</a><br>-->

  3. 指令二: 绑定事件监听 DOM Listeners<!--  <button v-on:click="test">点我</button>-->
  <!--
    v-on:事件名="回调函数"
    v-on:可省略为 @事件名
  -->
  <button @click="test">点我</button>
  <button @click="test2(msg)">点我</button>
</div>


<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  const vm=new Vue({
    el: '#app',
    data: {
      content: 'Huawei is coming~~',
      url: 'http://www.huaweicloud.com',
      msg: 'Huawei come',
      msg2: '<a href="http://www.sina.com.cn">SINA</a>',
      imgUrl: 'https://cn.vuejs.org/images/logo.png'
    },
    methods: {
      test () {
        alert('onclick事件!!!')
      },
      test2 (content) {
        alert('test2事件!!!'+content);
      }
    }
  })
</script>
</body>
</html>

3.2 执行效果

04 计算属性

4.1 代码和笔记

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03_计算属性和监视</title>
</head>
<body>
<!--
1. 计算属性
  在computed属性对象中定义计算属性的方法
  在页面中使用{{方法名}}来显示计算的结果
2. 监视属性:
  通过通过vm对象的$watch()或watch配置来监视指定的属性
  当属性变化时, 回调函数自动调用, 在函数内部进行计算
3. 计算属性高级:
  通过getter/setter实现对属性数据的显示和监视
  计算属性存在缓存, 多次读取只执行一次getter计算
-->
<div id="demo">
  姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
  名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
  <!--fullName1是根据f**ame和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>

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

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  const vm = new Vue({
    el: '#demo',
    data: {
      //一旦有input ,就需要v-model

      firstName: 'A',
      lastName: 'B',
      //fullName1: 'A B',
       fullName2: 'A-B'
    },

    // 计算属性配置: 值为对象
    computed: {
      fullName1 () { // 属性的get()  计算属性的一个方法，方法的返回值作为属性值
        //什么时候执行：相关属性变化时
        console.log('fullName1()', this)
        return this.firstName + '-' + this.lastName
      },

      fullName3: {
        // 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值
        get () {
          console.log('fullName3 get()')
          return this.firstName + '-' + this.lastName
        },
        // 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值
        set (value) {// fullName3的最新value值  A-B23
          console.log('fullName3 set()', value)
          // 更新firstName和lastName
          const names = value.split('-')
          this.firstName = names[0]
          this.lastName = names[1]
        }
      }
    },

    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>
</body>
</html>

4.2 执行效果

05 vue监视 computed和watch

5.1 代码和笔记

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03_计算属性和监视</title>
</head>
<body>
<!--
1. 计算属性
  在computed属性对象中定义计算属性的方法
  在页面中使用{{方法名}}来显示计算的结果
2. 监视属性:
  通过通过vm对象的$watch()或watch配置来监视指定的属性
  当属性变化时, 回调函数自动调用, 在函数内部进行计算
3. 计算属性高级:
  通过getter/setter实现对属性数据的显示和监视
  计算属性存在缓存, 多次读取只执行一次getter计算
-->
<div id="demo">
  姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
  名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
  <!--fullName1是根据f**ame和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>

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

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  const vm = new Vue({
    el: '#demo',
    data: {
      //一旦有input ,就需要v-model

      firstName: 'A',
      lastName: 'B',
      //fullName1: 'A B',
       fullName2: 'A-B'
    },

    // 计算属性配置: 值为对象
    computed: {
      fullName1 () { // 属性的get()  计算属性的一个方法，方法的返回值作为属性值
        //什么时候执行：相关属性变化时
        console.log('fullName1()', this)
        return this.firstName + '-' + this.lastName
      },

      fullName3: {
        // 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值
        get () {
          console.log('fullName3 get()')
          return this.firstName + '-' + this.lastName
        },
        // 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值
        set (value) {// fullName3的最新value值  A-B23
          console.log('fullName3 set()', value)
          // 更新firstName和lastName
          const names = value.split('-')
          this.firstName = names[0]
          this.lastName = names[1]
        }
      }
    },

    watch: {
      // 配置监视firstName
      //监视的两种语法
      firstName: function (value) { // 相当于属性的set function(oldvalue,newvalue)
        //此时firstname 发生了变化
        console.log('watch firstName', value)
        // 更新fullName2

        this.fullName2 = value + '&' + this.lastName
      }
    }
    //每个属性都有get,set方法 都是回调函数，get是获取值，set是监视该属性值，如果改变了则传进来

  })

  // 监视lastName
  //监视的第二种方法 watch a.b.c
  //通过两种属性的监视，实现了计算属性的效果。但是还是计算属性简单，因为计算属性写一个就解决了。。。

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

</script>
</body>
</html>

5.2 执行效果

06 计算属性的get/set

6.1 代码和笔记

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03_计算属性和监视</title>
</head>
<body>
<!--
1. 计算属性
  在computed属性对象中定义计算属性的方法
  在页面中使用{{方法名}}来显示计算的结果
2. 监视属性:
  通过通过vm对象的$watch()或watch配置来监视指定的属性
  当属性变化时, 回调函数自动调用, 在函数内部进行计算
3. 计算属性高级:
  通过getter/setter实现对属性数据的显示和监视
  计算属性存在缓存, 多次读取只执行一次getter计算
  getter 属性的get方法
  setter 属性的set方法
-->
<div id="demo">
  姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
  名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
  <!--fullName1是根据f**ame和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>

  <!-- 只执行了一遍，后续都在缓存中读取
  缓存用对象来存。
  -->
  {{fullName1}}  {{fullName1}}  {{fullName1}}</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  const vm = new Vue({
    el: '#demo',
    data: {
      //一旦有input ,就需要v-model

      firstName: 'A',
      lastName: 'B',
      //fullName1: 'A B',
       fullName2: 'A-B'
    },

    // 计算属性配置: 值为对象
    computed: {
      fullName1 () { // 属性的get()  计算属性的一个方法，方法的返回值作为属性值
        //什么时候执行：相关属性变化时
        console.log('fullName1()', this)
        return this.firstName + '-' + this.lastName
      },

      fullName3: {
        // 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值
        //写set和set方法
        //回调函数：计算并返回当前属性值
        //回调函数要满足的三个条件
        // 1.你定义的，2，你没有调，3，最终执行了。
        //回调函数需要知道：1.什么时候调。2.用来做啥
        get () {
          console.log('fullName3 get()')
          return this.firstName + '%' + this.lastName
        },
        // 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值（输入数据时发生改变）

        set (value) {// fullName3的最新value值  A-B23
          console.log('fullName3 set()', value)
          // 更新firstName和lastName
          const names = value.split('%')
          this.firstName = names[0]
          this.lastName = names[1]
        }
      }
    },

    watch: {
      // 配置监视firstName
      //监视的两种语法
      firstName: function (value) { // 相当于属性的set function(oldvalue,newvalue)
        //此时firstname 发生了变化
        console.log('watch firstName', value)
        // 更新fullName2

        this.fullName2 = value + '&' + this.lastName
      }
    }
    //每个属性都有get,set方法 都是回调函数，get是获取值，set是监视该属性值，如果改变了则传进来

  })

  // 监视lastName
  //监视的第二种方法 watch a.b.c
  //通过两种属性的监视，实现了计算属性的效果。但是还是计算属性简单，因为计算属性写一个就解决了。。。

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

</script>
</body>
</html>

6.2 执行效果

07 强制绑定:class, :style

7.1 代码和笔记

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04_class与style绑定</title>
  <style>
    .classA {
      color: red;
    }
    .classB {
      background: blue;
    }
    .classC {
      font-size: 20px;
    }

    .mytestClassA{
      color : red;
      font-size: 50px;
    }

    .mytestClassB{
      color : blue;
      font-size: 40px;
    }

    .mytestClassC{
      color : green;
      font-size: 60px;
      background: yellow;
    }
  </style>
</head>
<body>

<!--
1. 理解
  在应用界面中, 某个(些)元素的样式是变化的
  class/style绑定就是专门用来实现动态样式效果的技术

  数据改变或者样式改变

2. class绑定: :class='xxx'
  xxx是字符串
  xxx是对象
  xxx是数组
3. style绑定
  :style="{ color: activeColor, fontSize: fontSize + 'px' }"
  其中activeColor/fontSize是data属性
-->

<div id="demo">
  <h2>1. class绑定: :class='xxx'  <p :class="myClass">xxx是字符串  <p :class="{classA: hasClassA, classB: hasClassB}">xxx是对象  <p :class="['classA', 'classB']">xxx是数组  <!-- 动态强制绑定 :class-->
  <p :class = "myclassName">这是张辉的测试-字符串  <button @click="update">更新</button>
<!--  <button @click="updateMyTest">更新我的class</button>-->
  <p class = "mytestClassB" :class = "myclassName"> 这是张辉的测试2-字符串  <!-- 这里用的比较多 -->
  <p :class = "{mytestClassA: isA, mytestClassB:isB}">这是张辉的测试3-对象  <button @click="updateMyTest3">更新我的class</button>

  <!-- 这里用的比较少 -->
  <p :class = "['mytestClassA','mytestClassC']">这是张辉的测试4-数组  <h2>2. style绑定  <p :style="{color:activeColor, fontSize}">:style="{ color: activeColor, fontSize: fontSize + 'px' }"  <!-- 动态强制绑定 :style-->
  <p :style="{color:activeColor, fontSize:myFontSize+'px'}">这是张辉的style测试  <button @click="updateStyle">更新</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',
      myclassName:"mytestClassA",
      isA:true,
      isB:false,
      myFontSize: '20',
    },

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

      updateMyTest(){
        this.myclassName = 'mytestClassB'
      },

      updateMyTest3(){
        //切换isA和isB
        this.isA = false;
        this.isB = true;
      },

      updateStyle(){
        this.activeColor = 'green'
        this.myFontSize = '40'
      }
    }
  })
</script>
</body>
</html>

7.2 执行效果

7.2.1 点击前效果

7.2.2 点击后效果

08 vue 条件渲染

8.1 代码和笔记

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>08_条件渲染</title>
</head>
<body>
<!--
1. 条件渲染指令
  v-if
  v-else
  v-show
2. 比较v-if与v-show
  如果需要频繁切换 v-show 较好
-->

<div id="demo">
  <p v-if="ok">回复成功  <!-- v-else相当于true ,且不必写条件-->
  <p v-else>回复失败  <hr>
  <!-- v-show也能实现类似的效果 -->
  <p v-show="ok">抽奖成功  <p v-show="!ok">抽奖失败  <!--
  隐藏元素的做法：display:none（v-show）或者移除（v-if）
  -->

 <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>
</body>
</html>

8.2 执行效果

8.2.1 点击前效果

8.2.2 点击后效果

09 vue List渲染

9.1 代码和笔记

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>06_列表渲染</title>
</head>
<body>

<!--
1. 列表显示
  数组: v-for / index
  对象: v-for / key
2. 列表的更新显示
  删除item
  替换item
-->

<div id="demo">
  <h2>测试: v-for 遍历数组  <ul>
    <!-- (p, index) 当前元素的下标 v-for，:key 记住需要使用:，表明是vue的表达式
    -->
    <li v-for="(p, index) in persons" :key="index">
      {{index}}--{{p.name}}--{{p.age}}
      <!-- @click 点击后删除的回调函数，写入method中
      -->
      --<button @click="deleteP(index)">删除</button>
      --<button @click="updateP(index, {name:'杨过', age: 32})">更新</button>
    </li>
  </ul>
  <button @click="addP({name: 'xfzhang', age: 18})">添加</button>

  <h2>测试: v-for 遍历对象  <ul>
    <!--因为key不一样，这里用的比较少
    -->
    <li v-for="(value, key) in persons[1]" :key="key">{{key}}={{value}}</li>
  </ul>

</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      persons: [  //vue只是监视了persons的改变，没有监视数据内部的改变
        {name: '张山', age:18},
        {name: '李斯', age:17},
        {name: '王五', age:16},
        {name: '牛二', age:15}
      ]
    },

    methods: {
      deleteP (index) {
        //有数据绑定
        //vue官方教材的数组更新检测：变异方法：
        //push,pop,shift,unshift,splice,sort,reverse——可以触发视图更新
        //cn.vuejs.org/v2/guide/list.html 数据更新检测
        //vue重写了这些方法：
        // 1. 调用原生的数组的对应方法
        // 2. 更新界面

        this.persons.splice(index, 1) // 调用了不是原生数组的splice(), 而是一个变异(重写)方法
      },

      updateP (index, newP) {
        console.log('updateP', index, newP)
        // this.persons[index] = newP  // vue根本就不知道，此时：数据变了，界面没有变，因为该操作并没有改变persons
        //而是改变了指向的内部的数据，（也没有调用vue的变异方法——这样vue感知不到
        this.persons.splice(index, 1, newP)  //可以实现增删改 新增为this.persons.splice(index, 0, newP)
        // this.persons = []  此时数据发生了变化，所以可以改变页面
      },

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

9.2 执行效果

9.2.1 原始页面

9.2.2 点击删除任意两个

9.2.3 点击更新

9.2.3 点击添加

（未完待续）

点赞
收藏
关注作者

0/1000

抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认取消

加入云驻计划，成为创作者

华为云周边好礼
免费体验产品
特殊身份标识
线下官方门票
内部专家零距离
与10000+优质创作者共同成长

立即加入