Vue-2-前端框架Vue基础入门之二

文章目录

1 计算属性
- 1.1 计算属性简介
- 1.2 计算属性示例
2 侦听器
- 2.1 简单的侦听器
- 2.2 深度监听
- 2.3 监听对象单个属性
3 vue-cli
- 3.1 工程化的Vue项目
- 3.2 Vue项目的运行流程
4 vue组件
- 4.1 Vue组件的三个部分
- - 4.1.1 template
  - 4.1.2 script
  - 4.1.3 style
- 4.2 组件之间的关系
- - 4.2.1 使用组件的三个步骤
  - 4.2.2 通过components注册私有子组件
  - 4.2.3 注册全局组件
5 参考附录

计算属性、侦听器的概念。Vue.js开发的标准工具vue-cli。每个vue组件中必须包含template模板结构，而script行为和style样式是可选的组成部分。

1 计算属性

1.1 计算属性简介

计算属性指的是通过一系列运算之后，最终得到一个属性值。
这个动态计算出来的属性值可以被模板结构或methods方法使用。

① 虽然计算属性在声明的时候被定义为方法，但是计算属性的本质是一个属性。
② 计算属性会缓存计算的结果，只有计算属性依赖的数据变化时，才会重新进行运算。

1.2 计算属性示例

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!-- 1、导入vue.js的script脚本文件 -->
        <script src="./lib/vue.global.js"></script>
    </head>
    <body>
        <!-- 2、声明将要被Vue控制的Dom区域 -->
        <div id="app">
            <p>message 的值是：{{ formatMessage }}</p>
        </div>
        <!-- 3、创建Vue实例并挂载到指定的Dom区域 -->
        <script>
            Vue.createApp({
              data() {
                return {message: 'hello vue.js'}
              },
              computed: {
                // 计算属性：将 message 首字母大写
                formatMessage() {
                  const first = this.message.charAt(0).toUpperCase();
                  const other = this.message.slice(1);
                  return first + other;
                }
              }
            }).mount('#app')
        </script>
    </body>
</html>

在这里插入图片描述

2 侦听器

watch侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。
语法格式如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!-- 1、导入vue.js的script脚本文件 -->
        <script src="./lib/vue.global.js"></script>
    </head>
    <body>
        <!-- 2、声明将要被Vue控制的Dom区域 -->
        <div id="app">
            <p>用户名的值是：{{ username }}</p>
        </div>
        <!-- 3、创建Vue实例并挂载到指定的Dom区域 -->
        <script>
            Vue.createApp({
              data() {
                return {username: 'lucy'}
              },
              // 所有的侦听器，都应该被定义到 watch 节点下
              watch: {
                // 侦听器本质上是一个函数，要监视哪个数据的变化，就把数据名作为方法名即可
                // 新值在前，旧值在后
                username(newVal, oldVal) {
                  cons.log( newVal, oldVal )
                }
              }
            }).mount('#app')
        </script>
    </body>
</html>

2.1 简单的侦听器

实现了一个简单的侦听器来响应数据的变化！

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!-- 1、导入vue.js的script脚本文件 -->
        <script src="./lib/vue.global.js"></script>
    </head>
    <body>
        <!-- 2、声明将要被Vue控制的Dom区域 -->
        <div id="app">
            <input v-model="inputText" placeholder="输入一些内容">
            <p>你输入的内容是：{{ inputText }}</p>
            <p>内容的反转版本是：{{ reversedText }}</p>
        </div>
        <!-- 3、创建Vue实例并挂载到指定的Dom区域 -->
        <script>
            Vue.createApp({
              data() {
                return {
                    inputText: '',
                    reversedText: ''
                }
              },
              // 所有的侦听器，都应该被定义到 watch 节点下
              watch: {
                 // 当 inputText 改变时，触发该函数
                inputText(newVal) {
                    // 反转输入内容并更新 reversedText
                    this.reversedText = newVal.split('').reverse().join('');
                }
              }
            }).mount('#app')
        </script>
    </body>
</html>

在这里插入图片描述

2.2 深度监听

如果watch侦听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。此时需要使用deep选项。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!-- 1、导入vue.js的script脚本文件 -->
        <script src="./lib/vue.global.js"></script>
    </head>
    <body>
        <!-- 2、声明将要被Vue控制的Dom区域 -->
        <div id="app">
            <input v-model="user.name" placeholder="输入用户名">
            <p>当前用户名：{{ user.name }}</p>
        </div>
        <!-- 3、创建Vue实例并挂载到指定的Dom区域 -->
        <script>
            Vue.createApp({
              data() {
                return {
                     user: {name: '张三'}
                }
              },
              // 所有的侦听器，都应该被定义到 watch 节点下
              watch: {
                 // 深度监听 user 对象
                user: {
                    handler(newVal) {
                        console.log('user 发生了变化：', newVal);
                    },
                    deep: true, // 开启深度监听
                    immediate: false // 可根据需要设置为 true
                }
              }
            }).mount('#app')
        </script>
    </body>
</html>

在这里插入图片描述
注意：对象中任何一个属性变化了，都会触发“对象的侦听器”。

2.3 监听对象单个属性

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!-- 1、导入vue.js的script脚本文件 -->
        <script src="./lib/vue.global.js"></script>
    </head>
    <body>
        <!-- 2、声明将要被Vue控制的Dom区域 -->
        <div id="app">
            <input v-model="user.name" placeholder="输入用户名">
            <hr>
            <input v-model="user.company" placeholder="输入公司">
            <p>当前用户名：{{ user.name }}</p>
            <p>当前公司：{{ user.company }}</p>
        </div>
        <!-- 3、创建Vue实例并挂载到指定的Dom区域 -->
        <script>
            Vue.createApp({
              data() {
                return {
                     user: {name: '张三', company: '字节跳动'}
                }
              },
              // 所有的侦听器，都应该被定义到 watch 节点下
              watch: {
                // 如果要侦听的是对象的子属性的变化，则必须包裹一层单引号
                'user.name'(newVal) {
                  console.log(newVal)
                }
              }
            }).mount('#app')
        </script>
    </body>
</html>

在这里插入图片描述

3 vue-cli

单页面应用程序(Single Page Application)简称SPA，顾名
思义，指的是一个Web网站中只有唯一的一个HTML页面，所有的功能与交互都在这唯一的一个页面内完成。

vue-cli是Vue.js开发的标准工具，它简化了程序员基于webpack创建工程化的Vue项目的过程。

3.1 工程化的Vue项目

vue-cli是npm上的一个全局包，使用npm install命令，即可方便的把它安装到自己的电脑上：

npm install -g @vue/cli

基于vue-cli快速生成工程化的Vue项目：

vue create 项目的名称

3.2 Vue项目的运行流程

在工程化的项目中，vue要做的事情很单纯：通过main.js把App.vue渲染到index.html的指定区域中。

其中：
① App.vue用来编写待渲染的模板结构。
② index.html中预留被Vue控制的Dom区域。
③ main.js把App.vue渲染到了index.html所预留的区域中。
在这里插入图片描述

4 vue组件

组件化开发指的是：根据封装的思想，把页面上可重用的UI结构封装为组件，从而方便项目的开发和维护。

vue是一个支持组件化开发的前端框架。
vue中规定：组件的后缀名是.vue。
App.vue文件本质上就是一个vue的组件。

4.1 Vue组件的三个部分

每个.vue组件都由3部分构成，分别是：
template -> 组件的模板结构。
script -> 组件的JavaScript行为。
style -> 组件的样式。
其中，每个组件中必须包含template模板结构，而script行为和style样式是可选的组成部分。

4.1.1 template

vue规定：每个组件对应的模板结构，需要定义到 template节点中。

<template>
  //模板内容
</template>

(1)template是vue提供的容器标签，只起到包裹性质的作用，它不会被渲染为真正的DOM元素。
(2)template中只能包含唯一的根节点。

4.1.2 script

vue规定：开发者可以在script节点中封装组件的JavaScript业务逻辑。

<script>
// 默认导出。这是固定写法！
export default {
  // data 数据源
  // 注意：.vue 组件中的 data 不能像之前一样，不能指向对象。
  // 注意：组件中的 data 必须是一个函数
  data() {
    // 这个 return 出去的 { } 中，可以定义数据
    return {username: ''}
  },
  methods: {
    changeName() {
      // 在组件中， this 就表示当前组件的实例对象
      console.log(this)
      this.username = '哇哈哈'
    }
  },
  // 当前组件中的侦听器
  watch: {},
  // 当前组件中的计算属性
  computed: {},
}
</script>

4.1.3 style

vue 规定：组件内的style节点是可选的，开发者可以在style节点中编写样式美化当前组件的UI结构。

<style>
.test-box {
  background-color: pink;
}
</style>

4.2 组件之间的关系

(1)组件在被封装好之后，彼此之间是相互独立的，不存在父子关系。
(2)在使用组件的时候，根据彼此的嵌套关系，形成了父子关系、兄弟关系。

4.2.1 使用组件的三个步骤

在这里插入图片描述

4.2.2 通过components注册私有子组件

在组件A的components节点下，注册了组件F。
则组件F只能用在组件A中；不能被用在组件C中。

4.2.3 注册全局组件

在vue项目的main.js入口文件中，通过Vue.component()方法，可以注册全局组件。
示例代码如下：

// 导入全局组件
import Count from './components/count.vue'
// 注册全局组件
Vue.component('MyCount',Count)

注意：在组件中无需导入注册，即可以标签形式使用main.js中注册的全局组件。

<template>
	<div>
		<MyCount></MyCount>
	</div>
</template>

5 参考附录

参考vue基础入门