Vue学习

vue学习记录。

注:

  1. 学习目录在Workplace/vueLearning。
  2. 学完要综合学过前端和后端知识,开发一个完整的应用,综合应用知识。
  3. 使用的开发IDE为WebStorm。

一、邂逅Vuejs

认识Vuejs

  • Vue在国内相比于React使用更加广泛、更火。

  • 三大框架:VueJs、AngularJs、React。

  • Vue:读音/vju:/,类似于view。

  • Vue是一个渐进式框架:

    1. Vue可以作为你应用的一部分嵌入其中。(一点一点渐进式引入Vue)
    2. 也可以直接使用Vue核心库及其生态系统。(Vue全家桶)
  • Vue的特点和高级功能:(目前不太了解,慢慢学习,慢慢体会)

  1. 解耦视图和数据
  2. 可复用的组件
  3. 前端路由技术
  4. 状态管理
  5. 虚拟DOM

学习Vue前提:

  1. 可以从零学习,不需要其他框架的知识为前提。
  2. 需要具备一定的HTML、CSS、JavaScript基础。 (JS※ 、ES6※。以后都会用ES6)
  • 另:
    1. xcode 读音:叉code。
    2. Vue不要读成v、u、e。

Vuejs安装方式

方式一:直接CDN引入

方式二:下载和引入

另: - 直接下载,拷贝到项目里面就可以使用,只有一个vue.js文件,hin方便。

方式三:NPM安装

  • 后续通过webpack和CLI的使用,然后再使用这种方式。

Vuejs初体验

  • script引入vue并使用:

  • 修改数据:1. 界面不用改,声明式开发。 2. 响应式:当数据发生改变,界面自动改变。

  • 创建Vue对象时候,传入参数含义:

    1. {}中包含了el属性:该属性决定了这个vue对象挂载到哪一个元素。
    2. {}中包含了data属性:该属性中通常会存储一些数据。
      • 数据可以是我们自己定义的。
      • 也可以是来自网络,从服务器加载到的。
  • 列表展示:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
<!--{{movies}}  --> <!-- 这种会展示成json格式数据-->
    <ul>
        <li v-for="item in movies">{{item}}</li>
    </ul>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好呀',
            movies: ['星际穿越', '大话西游', '盗墓空间', '切尔诺贝利']
        }
    })
</script>

</body>
</html>
  • Vue计数器案例
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="app">
    <h2>当前计数:{{counter}}</h2>
    <button v-on:click="add">+</button>
    <button v-on:click="sub">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            counter: 0
        },
        methods: {
            add: function () {
                console.log('add被执行');
                this.counter++
            },
            sub: function () {
                console.log('sub被执行');
                this.counter--
            }
        }
    })
</script>
  • 另:
    1. ES6不再使用var定义变量,而是使用letlet定义变量,const定义常量。
    2. 可以在游览器console中修改数据,会自动响应式展示。
    3. @clickv-on:click的语法糖。

Vuejs的MVVM

  • 什么是MVVM:维基百科MVVM。 (需要再详细阅读)
  • Vue的MVVM:图不清楚,需要重新找。

创建Vue实例传入的options

  • el: string | HTML Element
  • data: Object | Function (组件中data必须是一个函数)
  • methods: { [key: string]: Function } (后面换成ES6的语法来写)
  • 另:
    1. 开发中什么叫方法,什么称之为函数? 答:都是通过function定义,类里面叫方法,定义在外面叫函数。
      • 方法:method
      • 函数:function

Vue的生命周期(简单理解下)

  • 另:
    1. 常用的生命周期函数:created、mounted。

二、Vue基础语法

代码规范

  1. 前端开发,缩进两个空格更加合适。

重复代码建立模板

将重复输入的内容设置到模板当中,在HTML(需要设置)中直接输入vue,点击回车,就可以自动填充模板中的内容。

插值语法

Mustache语法 (也就是双大括号,用的最多)※

1
2
3
4
5
6
7
<div id="app">
  <h2>{{message}}</h2>
  <!-- mustache语法中,不仅仅可以直接写变量,也可以写一些简单的表达式-->
  <h2>{{firstName + ' ' + lastName}}</h2>
  <h2>{{firstName}} {{lastName}}</h2>
  <h2>{{counter * 2}}</h2>
</div>

v-once指令的使用

只展示一次,后面网页界面内容不会随着message值的改变而改变。也就是第二个h2标签显示的内容不会随着vueapp里面数据改变。

一般情况下不用,特殊情况下需要使用。

1
2
3
4
<div id="app">
  <h2>{{message}}</h2>
  <h2 v-once>{{message}}</h2>
</div>

v-html指令的使用

数据以HTML形式展示。

v-text指令的使用 (一般不用,没有双括号灵活)

v-pre指令的使用 (很少使用)

v-pre设置的标签内容原封不动展示,不进行解析。

1
2
3
4
<div id="app">
  <h2>{{message}}</h2>
  <h2 v-pre>{{message}}</h2>
</div>

v-cloak指令的使用 (基本不用)

cloak: 斗篷。 clock: 时钟。

css样式结合使用,可以实现当JS脚本未执行完,不显示内容,而不是显示一些未渲染的“乱码”,对用户友好。

v-bind

v-bind之前都是将数据插到内容中,而这个是将值插到标签的属性中,比如img标签的src属性,改变这个属性值。又比如a标签的href属性。不能用双括号语法操作,双括号是在标签内容中使用的。

作用:动态绑定标签属性。

v-bind基本使用

v-bind语法糖 (经常用)※

v-bind:简写成:

v-bind动态绑定class属性
  1. 对象语法:class = "" 双引号里面是个对象。 (经常用)※

  1. 数组语法 (很少用)
1
2
3
<h2 class="title" :class="[active, 'line']>{{message}}</h2>

<!-- active是个变量,定义在data中-->
v-bind动态绑定style
  1. 对象语法::style="{key(属性名): value(属性值)}" 双引号里面是个对象。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<div id="app">
<!--  <h2 :style="{key(属性名): value(属性值)}">{{message}}</h2>-->
  <h2 :style="{fontSize: finalSize, color: finalColor}">{{message}}</h2>  <!-- key不需要加单引号,但是value要加,否则20px当作成变量了 -->
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: '你好呀',
      finalSize: '100px',
      finalColor: 'red'
    }
  })
</script>
  1. 数组语法:<div v-bind: style="[basestyles, overridingstyles]">/div> ,basestyles和overridingstyles为对象 (很少用)

计算属性 computed(很重要)※

计算属性的使用

数据展示之前需要经过一定的处理,computed里面也是定义的函数,但是不要命名为动词,一般命名为名词。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div id="app">
<!--  <h2>{{firstName + ' ' + lastName}}</h2>-->
<!--  <h2>{{fullName()}}</h2>-->
  <h2>{{fullName}}</h2>  <!-- 不需要加函数的括号 -->
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: '你好呀',
      firstName: 'lebron',
      lastName: 'James'
    },
    computed: {
      fullName: function () {
        return this.firstName + ' ' + this.lastName + ' 根据computed得到的';
      }
    },
    methods: {
      // fullName: function () {
      //   return this.firstName + ' ' + this.lastName;
      // }
    }
  })
</script>

应用场景: 购物车选中多个商品,计算总价格。

另:计算属性只计算一次,有缓存,相比method计算速度更快。

计算属性setter和getter

计算属性和methods的对比 ※

计算属性内部实现缓存,如果值不改变,直接调用缓存中的内容,而methods每次都会调用,效率比计算属性差

补充:ES6语法

  1. let/var

let有if和for块级作用域,而var没有if和for块级作用域。

  1. const

标识符修饰为常量。定义时就需要赋值。对象不能修改,但是可以改变对象里面的属性。

  1. 对象的字面量增强写法
  • 属性的增强写法
  • 函数的增强写法

事件监听

v-on的基本使用

v-on语法糖:@

v-on的参数

事件监听的时候,若不需要传参数,则可以不写调用的小括号。(省略)

如何给事件监听函数传入,游览器生成的event对象?

传入的参数为$event就可以了。方法形参为event

v-on的修饰符

  1. @click.stop防止事件冒泡。
  2. @click.prevent阻止默认行为的执行。
  3. @keyUp.enter监听enter键的释放。
  4. @click.once只监听一次点击事件。

关于事件监听参考

Vue事件监听

条件判断

v-if的使用

另:一般情况下,v-else-ifv-else不在HTML模板中使用,逻辑不放在界面代码处。

v-show的使用

决定标签是否在界面显示:<h2 v-show="isShow"> </h2>

v-ifv-show的区别。 (v-if经常使用)

v-if:当条件为false时,包含v-if指令的元素,根本不会存在dom中。而v-show:当条件为false时,只是给元素添加了一个行内样式:display:none。前者dom中取掉,后者改样式。当展示切换频率很高,用v-show。

循环遍历v-for的使用

  1. 遍历数组 ※
1
<li v-for="(item, index) in movies">{{item}}</li>
  1. 遍历对象
1
2
3
4
5
<!-- 获取到的是value -->
<li v-for="item in info">{{item}}</li>  

<!-- 获取到value和key -->
<li v-for="(value, key) in info">{{value}} {{key}}</li>  

v-for绑定key

省略。

数组中响应式方法:数组内容改变,展示内容跟着改变。

push()、pop()、shift()、unshift()、splice()、sort()、reverse()

另:

  1. splice() ※
  2. letters[index] = ‘change’ 索引方式改变数组是非响应式的。
  3. 上面的方式可以改用为vue内部实现的函数vue.set(),更推荐splice()方式。

补充:三个高阶函数 ※

filter、reduce、map函数

let total = nums.filter(n => n<100).map(n => n * 2).reduce((pre, n) => pre + n);

v-model双向绑定 (暂时跳过)

三、组件化开发 ※

什么是组件化?

将复杂问题,拆分成很多个小问题。将一个页面拆分成一个个小的功能块,每个功能块完成属于自己这一部分独立的功能,那么整个页面的管理和维护就变得非常容易了。应用最后抽象为一个组件树。

组件化思想

  1. 任何的应用都会被抽象成一颗组件树。
  2. 有了组件化的思想,我们在之后的开发中就要充分的利用它。
  3. 尽可能的将页面拆分成一个个小的、可复用的组件。
  4. 这样让我们的代码更加方便组织和管理,并且扩展性也更强。

组件使用步骤

  1. 创建组件构造器。
  2. 注册组件。
  3. 使用组件。

另:

  1. 开发中用的最多的是局部组件。
  2. 一般只创建一个Vue实例。

全局组件和局部组件

在Vue实例创建之外,注册的组件为全局组件。

1
2
// 注册全局组件(全局组件, 意味着可以在多个Vue的实例下面使用,app,app2)
Vue.component('cpn', cpnC)

在Vue实例创建时,注册的组件为局部组件。 用的最多的还是局部组件。 ※ ※

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    // 局部组件
    components: {
      // cpn为使用组件时的标签名,cpnC为组件实例
      cpn: cpnC
    }
  })

父组件和子组件的区别 ※ ※

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 1.创建第一个组件构造器(子组件),Vue.extend()语法很少见了
const cpnC1 = Vue.extend({
  template: `
    <div>
      <h2>我是标题1</h2>
      <p>我是内容, 哈哈哈哈</p>
    </div>
  `
})


// 2.创建第二个组件构造器(父组件)
const cpnC2 = Vue.extend({
  template: `
    <div>
      <h2>我是标题2</h2>
      <p>我是内容, 呵呵呵呵</p>
      <cpn1></cpn1>
    </div>
  `,
  components: {
    cpn1: cpnC1
  }
})

注册组件的语法糖写法(推荐写法)※ ※

省略 Vue.extend(),使用语法糖写法。 后面内容讲解,将tepmlate抽离出去,代码会更加清晰

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
Vue.component('cpn1', {
  template: `
    <div>
      <h2>我是标题1</h2>
      <p>我是内容, 哈哈哈哈</p>
    </div>
  `
})

// 2.注册局部组件的语法糖
const app = new Vue({
  el: '#app',
  data: {
    message: '你好啊'
  },
  components: {
    'cpn2': {
      template: `
        <div>
          <h2>我是标题2</h2>
          <p>我是内容, 呵呵呵</p>
        </div>
  `
    }
  }
})

模板的分离写法

为什么组件data必须是函数? ※

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
// 1.注册一个全局组件
Vue.component('cpn', {
  template: '#cpn',
  // 组件数据
  data() {
    return {
      title: 'abc'
    }
  }
})

  1. Vue组件应该有自己保存数据的地方,不能访问Vue实例中的数据。
  2. 组件对象也有一个data属性(函数),也可以有methods等属性。
  3. 这个data属性必须是一个函数。
  4. 这个函数返回一个对象,对象内部保存着数据,多个相同组件各自使用各自的数据。

<script>标签

<template>标签

父子组件的通信 ※ ※ ※

父组件向子组件 props (常用) ※

props : properties 属性

通过props向子组件传递数据。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <!--<cpn v-bind:cmovies="movies"></cpn>-->
  <!--<cpn cmovies="movies" cmessage="message"></cpn>-->
  <!-- v-bind -->
  <cpn :cmessage="message" :cmovies="movies"></cpn>
</div>



<template id="cpn">
  <div>
    <ul>
      <li v-for="item in cmovies">{{item}}</li>
    </ul>
    <h2>{{cmessage}}</h2>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  // 父传子: props
  const cpn = {
    template: '#cpn',
    // props: ['cmovies', 'cmessage'], 这种有些怪,字符串居然是变量!
    props: {
      // 1.类型限制
      // cmovies: Array,
      // cmessage: String,

      // 2.提供一些默认值, 以及必传值
      cmessage: {
        type: String,
        default: 'aaaaaaaa',
        required: true
      },
      // 类型是对象或者数组时, 默认值必须是一个函数  js 中属性和函数的区别???
      cmovies: {
        type: Array,
        default() {
          return []
        }
      }
    },
    data() {
      return {}
    },
    methods: {

    }
  }

  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      movies: ['海王', '海贼王', '海尔兄弟']
    },
    components: {
      cpn  // 对象字面量增强
    }
  })
</script>

</body>
</html>

问题:
TODO

1
<cpn :cmessage="message" :cmovies="movies"></cpn>

子组件向父组件 $emit events ※

通过事件events向父组件发送消息。

看到P61

webpack的介绍与安装

Node, Npm 和 webpack

从本质上来讲,webpack是一个现代的JavRScript应用的静态模块打包工具。

  1. webpack其中一个核心就是让我们可能进行模块化开发,并且会帮助我们处理模块间的依赖关系。
  2. 不仅仅是JavaScript文件,我们的CSS、图片、json文件等等在webpack中都可以被当做模块来使用(在后续我们会看到)。

认识webpack

webpack的安装

webpack的起步

webpack的配置

loader的使用

Iwebpack中配置Vue

plugin的使用

搭建本地服务器

四、Vue CLI详解 (脚手架)※

五、vue-router

六、Vuex详解 (状态管理)

七、网络封装

八、项目实战

一步步学习,没什么耐心,那就项目驱动学习吧,开干。

创建项目

Vue CLI教程Vue CLI

1
2
sudo cnpm  install -g vue-cli  # 安装
vue create supermall # 创新新的项目  

目录结构划分

参考:https://blog.csdn.net/weixin_42290927/article/details/94432587

九、项目部署

十、vuejs原理相关

comments powered by Disqus
Built with Hugo
主题 StackJimmy 设计