Vue学习笔记(七)

Vue学习笔记(七)

1.0Vue组件（单文件组件）

文件写成.vue文件

<template>
	<div class="demo">
		<h2>学校名称：{{name}}h2>
		<h2>学校地址：{{address}}h2>
		<button @click="showName">点我提示学校名button>	
	div>
template>

<script>
	 export default {
		name:'School',
		data(){
			return {
				name:'铁道大学',
				address:'长春'
			}
		},
		methods: {
			showName(){
				alert(this.name)
			}
		},
	}
script>

<style>
	.demo{
		background-color: orange;
	}
style>

1.1单文件开发的写法

App.vue是管理所有组件的

school和student是App里面的组件

main.js创建Vue实例对象

index.html是网页的结构

1.2Vue脚手架的使用

1.2.1第一步

打开Windows的cmd窗口，配置 npm 淘宝镜像，输入以下命令：

npm config set registry https://registry.npmmirror.com/

1.2.2第二步

在cmd窗口输入，全局安装Vue

npm install -g @vue/cli

1.2.3第三步

安装成功后，重新进入cmd，输入vue，检查是否安装成功

1.2.4第四步

在想要创建的目录下输入

vue create

创建完成后选择默认的选项，按回车键

1.2.5第五步

启动项目，输入

npm run serve

在浏览器中输入端口号

想停掉项目，在cmd窗口按ctrl+c（复制键停掉项目的运行）

1.3分析脚手架

1.3.1报错解决

关于Vue报错“Component name “School“ should always be multi-word”的解决方法

**在项目目录里面找到vue.config.js文件，在module.exports里面添加一行配置即可。 **

lintOnSave:false //关闭语法检查

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false  //关闭语法检查
})

1.3.2模板结构

├── node_modules
├── public
│ ├── favicon.ico: 页签图标
│ └── index.html: 主页面
├── src
│ ├── assets: 存放静态资源
│ │ └── logo.png
│ │── component: 存放组件
│ │ └── HelloWorld.vue
│ │── App.vue: 汇总所有组件
│ │── main.js: 入口文件
├── .gitignore: git 版本管制忽略的配置
├── babel.config.js: babel 的配置文件
├── package.json: 应用包配置文件
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件

在控制台启动项目

1.3.3render函数

/* 
	关于不同版本的Vue：
	
		1.vue.js与vue.runtime.xxx.js的区别：
				(1).vue.js是完整版的Vue，包含：核心功能+模板解析器。
				(2).vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。

		2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用
			render函数接收到的createElement函数去指定具体内容。
*/

new Vue({
	el:'#app',
	//render函数完成了这个功能：将App组件放入容器中
  render: h => h(App),
	// render:q=> q('h1','你好啊')

	// template:`<h1>你好啊h1>`,
	// components:{App},
})

1.3.4脚手架的默认配置

红色地方的名字不能修改

修改默认配置配置文件名(自行去官网了解)

1.4 ref属性

1.4.1在元素上面绑定ref属性

通过this的Vuecomponent对象的$.refs属性拿到DOM对象

在此处的this代表的是Vuecomponent

1.4.2组件标签上面加上ref属性

如果在School组件标签上面添加ref属性，拿到的则是此标签的实例对象

1.5 props属性

功能：让组件接收外部传来的数据

1.5.1方式一（只接收）

在这里注意：年龄这里，最好动态绑定，计算结果是表达式，否则如果不写则做字符串拼接得到181

1.5.2方式二（限制类型）

props:{
name:Number
}

1.5.3方式三(限制类型，限制必要性，指定默认值)

props:{
type:Number,//类型
required:true //必要性
default:'老王' //默认值
}

注意：

props是只读的，Vue底层会检测你对props的修改，如果进行了修改，会发出警告，如果确实需要修改数据，请复制props的内容到data中一份，然后去修改data中的数据。

1.6 mixin混合

1.6.1mixin定义

1.6.2案例一

可以将相同的内容提取出来，写成一个js文件

定义一个混合

在需要的方法导入混合

如果有相同的数据，则以原来data中的数据为主

1.6.3案例二

定义了一个混合Da

Student里面有x和y的值

School中没有x和y的值

1.7 插件

1.8 scope样式

例如Student组件和School组件都写了一个demo样式，样式冲突了，显示的样式按住引入的先后顺序来执行，为了让样式在局部中生效，防止冲突

写法：

<style scoped>style>