Vue-2-前端框架Vue基础入门之二-海口c网

文章目录

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) {// 反转输入内容并更新 reversedTextthis.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基础入门