Vue.js学习笔记（一）-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45899210/article/details/119273595

一. 认识Vuejs

1.1 Vue.js 的安装

https://cn.vuejs.org/v2/guide/installation.html（vue安装官网）

方式一：直接CDN引入

方式二：下载和引入

在这里插入图片描述

方式三：NPM安装

后续通过webpack和CLI（脚手架）的时候使用

通过方式二下载和引入

在这里插入图片描述

1.2 Vue的初体验

1.2.1 HelloVuejs

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

<div id="app">
    <h1>{{message}}</h1>
    <h2>{{name}}</h2>
</div>

<script src="../js/vue.js"></script>

<script>
    // let和const的区别
    // let定义的是变量，指的是在之后可能会发生变化重新赋值等操作的数据
    // const定义的是常量，指不会发生变化了的数据
    // 编程范式：声明式编程
    const app = new Vue ({
        el: '#app', // 用于挂载要管理的元素（和元素的id对应）
        data: { // 定义数据
            message: '你好呀，xx',
            name: 'xiong'
        }
    })

    // 命令式编程（Vuejs之前的常规方式）
    // 元素js的做法（编程范式：命令式编程）
    // 1.创建div元素，设置好id的属性
    // 2.定义一个变量
    // 3.将定义的变量放在前面的div元素中进行显示
</script>

</body>
</html>

1.2.1.1 体验修改数据而不修改界面

在这里插入图片描述

1.2.2 vue列表展示

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

<div id="app">
  <ul>
    <li v-for="a in movies">{{a}}</li>
  </ul>
</div>

<script src="../js/vue.js"></script>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好呀',
      movies: ['星际穿越', '大话西游', '少年派', '少年的你']
    }
  })
</script>

</body>
</html>

1.2.2.1 尝试页面内向数组添加数据

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-edCZTrDE-1627703471745)(C:\Users\xiong\AppData\Roaming\Typora\typora-user-images\image-20210721132149570.png)]$

1.2.3 vue计数器案例

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

<div id="app">
  <h2>当前数值为： {{counter}}</h2>
<!--<button v-on:click="counter++">+</button>
<button v-on:click="counter&#45;&#45;">-</button>-->
  <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>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BcrFRgJ6-1627703471747)(C:\Users\xiong\AppData\Roaming\Typora\typora-user-images\image-20210721140757917.png)]$

1.3 Vue中的MVVM

1.3.1 什么是MVVM？

概念介绍
- MVVM分为三个部分：分别是M（Model，模型层），V（View，视图层），VM（ViewModel，V与M连接的桥梁，也可以看作为控制器）
  1、 M：模型层，主要负责业务数据相关；
  2、 V：视图层，顾名思义，负责视图相关，细分下来就是html+css层；
  3、 VM：V与M沟通的桥梁，负责监听M或者V的修改，是实现MVVM双向绑定的要点；
- MVVM支持双向绑定，意思就是当M层数据进行修改时，VM层会监测到变化，并且通知V层进行相应的修改，反之修改V层则会通知M层数据进行修改，以此也实现了视图与模型层的相互解耦；
关系图

1.4 创建Vue时, options可以放那些东西

el:

类型：string | HTMLElement

作用：决定之后Vue实例会管理哪一个DOM。
data:

类型：Object | Function （组件当中data必须是一个函数）

作用：Vue实例对应的数据对象。
methods:

类型：{ [key: string]: Function }

作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。
生命周期函数

new Vue() --> beforeCreate() --> created() --> … --> destroyed()

二. 插值语法

mustache语法（也就是双大括号）

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LJoS3Vmg-1627703471749)(C:\Users\xiong\AppData\Roaming\Typora\typora-user-images\image-20210731113321246.png)]$
v-once（该指令表示元素和组件只渲染一次，不会随着数据的改变而改变。）
v-html（按照html格式解析并显示）

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nY9QKoz3-1627703471749)(C:\Users\xiong\AppData\Roaming\Typora\typora-user-images\image-20210731113455254.png)]$
v-text（与Mustache比较相似：都是用于将数据显示在界面中）
v-pre: {{}}（用于跳过这个元素和它子元素的编译过程）

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uwFdaGAx-1627703471751)(C:\Users\xiong\AppData\Roaming\Typora\typora-user-images\image-20210731113821734.png)]$
v-cloak: 斗篷（当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决网页闪烁的问题）

<div id="app" v-cloak>
    {{context}}
</div>

[v-cloak]{
    display: none;
}

三. v-bind

3.1 v-bind绑定基本属性

比如动态绑定a元素的href属性
比如动态绑定img元素的src属性

3.2 v-bind动态绑定class

对象语法: :class="{类名: boolean}"

用法一：直接通过{}绑定一个类
<h2 :class="{'active': isActive}">Hello World</h2>

用法二：也可以通过判断，传入多个值
<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>

用法三：和普通的类同时存在，并不冲突
注：如果isActive和isLine都为true，那么会有title/active/line三个类
<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>

用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>

数组语法: :class="[ ]"

用法一：直接通过{}绑定一个类
<h2 :class="['active']">Hello World</h2>

用法二：也可以传入多个值
<h2 :class=“[‘active’, 'line']">Hello World</h2>

用法三：和普通的类同时存在，并不冲突
注：会有title/active/line三个类
<h2 class="title" :class=“[‘active’, 'line']">Hello World</h2>

用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>

3.3 v-bind动态绑定style(内联样式)

对象语法:

:style="{color: currentColor, fontSize: fontSize + 'px'}"
style后面跟的是一个对象类型
对象的key是CSS属性名称
对象的value是具体赋的值，值可以来自于data中的属性

数组语法:

<div v-bind:style="[baseStyles, overridingStyles]"></div>
style后面跟的是一个数组类型
多个值以，分割即可

四. 计算属性

案例一: firstName+lastName

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uXKPdZjj-1627703471752)(C:\Users\xiong\AppData\Roaming\Typora\typora-user-images\image-20210731114755636.png)]$
案例二: books -> price

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

<div id="app">
  <h2>总价格: {{totalPrice}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      books: [
        {id: 110, name: 'Unix编程艺术', price: 119},
        {id: 111, name: '代码大全', price: 105},
        {id: 112, name: '深入理解计算机原理', price: 98},
        {id: 113, name: '现代操作系统', price: 87},
      ]
    },
    computed: {
      totalPrice: function () {
        let result = 0
        for (let i=0; i < this.books.length; i++) {
          result += this.books[i].price
        }
        return result

        // for (let i in this.books) {
        //   this.books[i]
        // }
        //
        // for (let book of this.books) {
        //
        // }
      }
    }
  })
</script>

</body>
</html>