尚硅谷Vue学习笔记第三章上篇（使用Vue脚手架）

已于 2022-03-07 17:09:59 修改
阅读量596 收藏 4
点赞数
分类专栏： 前端学习 尚硅谷 文章标签： vue.js 前端 javascript
于 2022-01-17 00:25:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/clearlove36963/article/details/122432972
版权

目录

初始化脚手架

具体步骤

01-分析脚手架

Student.vue

School.vue

App.vue

main.js

02-ref属性

School.vue

App.vue

main.js

03-props配置

Student.vue

App.vue

main.js

04-mixin混入

Student.vue

School.vue

App.vue

main.js

mixin.js

 05-Vue插件

School.vue

Student.vue

App.vue

main.js

plugins.js

Scoped样式

School.vue

Student.vue

App.vue

main.js

第三章学习笔记

初始化脚手架

1.Vue脚手架是Vue官方提供的标准化开发工具（开发平台）

2.最新的版本是4.x

3. 文档:https://cli.vuejs.org/zh/.

具体步骤

第一步（仅第一次执行）:全局安装@vue/cli

npm install -g @vue/cli

第二步：切换到你要创建项目的目录，然后使用命令创建项目

vue create xxxx

第三部：启动项目

 npm run serve

第四步：打包上线项目

npm run build

备注：

如果出现下载缓慢请配置npm淘宝镜像：

1. npm config set registry

https://registry.npm.taobao.org

2. Vue脚手架隐藏了所有webpack相关的配置，若想查看具体的webpack配置，

请执行：vue inspect  > output.js

01-分析脚手架

Student.vue

<template>
	<!-- 组件的结构 -->
	<div class="demo">
		<h2>学校名称：{{schoolName}}</h2>
		<h2>学校地址：{{address}}</h2>
		<button @click="showName">点我提示学校名</button>
	</div>
</template>

<script>
	//组件交互相关的代码（数据，方法等等）
	
	export default{
		name:'School',//一般跟文件名保持一致
		 
		data(){
			return {
				schoolName:'尚硅谷',
				address:'北京昌平'
			}
		},
		methods:{
			showName(){
				alert(this.schoolName)
			}
		},
	}
</script>

<style>
	/* 组建的样式 */
	.demo{
		background-color: orange;
	}
</style>

School.vue

<template>
	<div class="demo">
		<h2>学生姓名：{{name}}</h2>
		<h2>学生年龄：{{age}}</h2>
	</div>
</template>

<script>
	export default{
		name:'Student',//一般跟文件名保持一致
		
		data(){
			return {
				name:'张三',
				age:18
			}
		},
	}
</script>

<style>
</style>

App.vue

<template>
	<div>
		<img src="./assets/logo.png" alt="logo">
		<School></School>
		<Student></Student>
	</div>
</template>

<script>
	//引入组件
	import School from './components/School.vue'
	import Student from './components/Student.vue'
	export default{
		name:'App',
		components:{
			School,
			Student
		}
	}
</script>

<style>
</style>

main.js

/*
	该文件是整个项目的入口文件
*/

//引入Vue
// 第一种改法，引入完整版本的vue import Vue from 'vue/dist/vue'
import Vue from 'vue'
//引入App组件，它是所有组件的父组件
import App from './App.vue'
//关闭vue的生产提示
Vue.config.productionTip = false

/*
	关于不同版本的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函数去指定具体内容。
*/

let person = {name:'Tom',age:18,
}

//创建Vue的实例对象 -- vm
new Vue({
	el:'#app',
	//下面这行代码一会解释，完成了这个功能：将App组件放入容器中
   render: h => h(App),
})

02-ref属性

School.vue

<template>
	<div class="school">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
	</div>
</template>

<script>
	export default {
		name:'School',
		data(){
			return{
				name:'尚硅谷',
				address:'北京-昌平'
			}
		}
	}
</script>

<style>
	.school{
		background-color: gray;
	}
</style>

App.vue

<template>
	<div>
		<!-- <h1 v-text="msg" id="title"></h1> -->
		<h1 v-text="msg" ref="title"></h1>
		<button @click="showDOM" ref="btn">点我输出上方的DOM元素</button>
		<School ref="sch"></School>
	</div>
</template>

<script>
	//引入school组件
	import School from './components/School'
	
	export default {
		name:'App',
		data(){
			return {
				msg:'欢迎学习Vue'
			}
		},
		components:{School},
		methods: {
			showDOM(){
				//直接使用原生DOM不太好
				//console.log(document.getElementById('title'))
				console.log(this.$refs.title)
				console.log(this.$refs.sch)
				console.log(this.$refs.btn)
			}
		},
	}
</script>

<style>
	
</style>

main.js

//引入Vue
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
	el:'#app',
	render: h => h(App)
})

03-props配置

Student.vue

<template>
	<div>
		<h1>{{msg}}</h1>
		<h2>学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
		<h2>学生性年龄：{{age}}</h2>
		<button @click="updateAge">尝试修改收到的年龄</button>
	</div>
</template>

<script>
	export default {
		name:'School',
		data(){
			return{
				msg:'我是你爸爸',
			}
		},
		methods:{
			updateAge(){
				this.age = 22
			}
		},
		//简单声明接收   
		 props:['name','age','sex']
		
		//接收同时对数据进行类型限制
		/*props:{
			name:String,
			age:Number,
			sex:String
		}*/
		
		//接收的同时对数据进行：类型限制+默认值指定+必要性的限制
		/*props:{
			name:{
				type:String,  //name的类型是字符串
				required:true //name必须要传
			},
			age:{
				type:Number,
				default:99  //默认值
			},
			sex:{
				type:String,
				required:true 
			}
		}*/
	}
</script>

App.vue

<template>
	<div>
		<Student name="李四" sex="女" :age="18+1"/>
		<hr>
		<Student name="王五" sex="男" :age="44"/>
	</div>
</template>

<script>
	//引入school组件
	import Student from './components/Student'
	
	export default {
		name:'App',
		components:{Student},
	}
</script>

<style>
	
</style>

main.js

//引入Vue
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
	el:'#app',
	render: h => h(App)
})

04-mixin混入

Student.vue

<template>
	<div>
		<h2 @click="showName">学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
	</div>
</template>

<script>
	// import {mixin,hunhe} from '../mixin.js'
	export default {
		name:'Student',
		data(){
			return{
				name:'张三',
				sex:'男'
			}
		},
		// mixins:[mixin,hunhe],
	}
</script>

School.vue

<template>
	<div>	
		<h2 @click="showName">学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
	</div>
</template>

<script>
	//引入一个混合
	// import {mixin,hunhe} from '../mixin.js'
	export default {
		name:'School',
		data(){
			return{
				name:'尚硅谷',
				address:'北京昌平'
			}
		},
		// mixins:[mixin,hunhe]
		mounted() {
			console.log('你好啊！！！！！')
		}
	}
</script>

App.vue

<template>
	<div>
		<Student/>
		<hr>
		<School/>
	</div>
</template>

<script>
	//引入school组件
	import Student from './components/Student'
	import School from './components/School'
	
	export default {
		name:'App',
		components:{Student,School},
	}
</script>

<style>
	
</style>

main.js

//引入Vue
import Vue from 'vue'
import App from './App.vue'
import {mixin,hunhe} from './mixin.js'
Vue.config.productionTip = false
Vue.mixin(hunhe)
Vue.mixin(mixin)
new Vue({
	el:'#app',
	render: h => h(App)
})

mixin.js

export const mixin = {
	methods:{
		showName(){
			alert(this.name)
		}
	},
	mounted(){
		console.log('你好啊')
	},
}
export const hunhe = {
	data() {
		return {
			x:100,
			y:200
		}
	}
}

 05-Vue插件

School.vue

<template>
	<div>	
		<h2>学校名称：{{name | mySlice}}</h2>
		<h2>学校地址：{{address}}</h2>
		<button @click="test">点我测试一下hello方法</button>
	</div>
</template>

<script>
	export default {
		name:'School',
		data(){
			return{
				name:'尚硅谷1234',
				address:'北京昌平'
			}
		},
		methods:{
			test(){
				this.hello()
			}
		}
	}
</script>

Student.vue

<template>
	<div>
		<h2>学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
		<input type="text" v-fbind:value="name" />
	</div>
</template>

<script>
	
	export default {
		name:'Student',
		data(){
			return{
				name:'张三',
				sex:'男'
			}
		},
	}
</script>

App.vue

<template>
	<div>
		<Student/>
		<hr>
		<School/>
	</div>
</template>

<script>
	//引入school组件
	import Student from './components/Student'
	import School from './components/School'
	
	export default {
		name:'App',
		components:{Student,School},
	}
</script>

<style>
	
</style>

main.js

//引入Vue
import Vue from 'vue'
import App from './App.vue'
import plugins from './plugins.js'
Vue.config.productionTip = false

Vue.use(plugins,1,2,3)
new Vue({
	el:'#app',
	render: h => h(App)
})

plugins.js

export default {
	install(Vue,x,y,z){
		console.log('@@@install',Vue)
		console.log(x,y,z)
		//全局过滤器
		Vue.filter('mySlice',function(value){
			return  value.slice(0,5)
		})
		
		//定义全局指令
		Vue.directive('fbind',{
			//指令与元素成功绑定时（一上来）
						bind(element,binding){
							element.value = binding.value
						},
						//指令所在元素被插入页面时
						inserted(element,binding){
							element.focus()
						},
						//指令所在的模板被重新解析时
						update(element,binding){
							element.value = binding.value
							element.focus()
						}
					})
					
		//定义混入
		
		Vue.mixin({
			data(){
				return {
					x:100,
					y:200
				}
			},
		})
	
		//给Vue原型上添加一个方法（vm和vc都能使用了）
		Vue.prototype.hello = ()=>{alert('你好啊')}
	}
}

Scoped样式

School.vue

<template>
	<div class="demo">	
		<h2 class="title">学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
	</div>
</template>

<script>
	export default {
		name:'School',
		data(){
			return{
				name:'尚硅谷1234',
				address:'北京昌平'
			}
		},
	}
</script>

<style scoped>
	.demo{
		background-color: skyblue;
	}
</style>

Student.vue

<template>
	<div class="demo">
		<h2 class="title">学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
	</div>
</template>

<script>
	
	export default {
		name:'Student',
		data(){
			return{
				name:'张三',
				sex:'男'
			}
		},
	}
</script>

<!-- // <style lang="less">
// 	.demo{
// 		background-color: orange;
// 		.qwe{
// 			font-size: 40px;
// 		}
// 	}
// </style> -->

App.vue

<template>
	<div>
		<Student/>
		<hr>
		<School/>
	</div>
</template>

<script>
	//引入school组件
	import Student from './components/Student'
	import School from './components/School'
	
	export default {
		name:'App',
		components:{Student,School},
	}
</script>

<style scoped>
	.title{
		color: red;
	}
</style>

main.js

//引入Vue
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false

new Vue({
	el:'#app',
	render: h => h(App)
})

第三章学习笔记

# 笔记

## 脚手架文件结构
    ├── node_moudles
    ├── public
    |    ├── ├── favicon.ico: 页签图标
    |    └── index.html: 主页面
    ├── src
    |     ├── assets: 存放经他自愿
    |     |     └── logo.png
    |     ├── conponent: 存放组件
    |     |     └── HelloWorld.vue
    |     ├── App.vue: 汇总所有组件
    |      ├── main.js: 入口文件
    ├── .gitignore: git版本管制忽略的配置
    ├── .babel.config.js: babel的配置文件
    ├── .package.json: 应用包配置文件
    ├── .README.md: 应用描述文件
    ├── .pacage-lock.json: 包版本控制文件
    
## 关于不同版本的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函数去指定具体内容。
## vue.config.js配置文件
    使用vue inspect > output.js 可以查看Vue脚手架的默认配置。
    使用vue.config.js可以对脚手架进行个性化定制，详情见： https://cli.vuejs.org/zh
    
## ref属性
    1.被用来给元素或子组件注册引用信息（id的替代者）
    2.应用在html标签上获取的是真实DOM元素，应用在组件标签上时组件实例对象（vc）
    3.使用方式：
        打标识：<h1 ref="xxx">.....</h1>  或 <School ref="xxx"></School>
        获取：this.$refs.xxx

## 配置项props

只能父子组件之间使用
        功能：让组件接收外部传过来的数据
            (1).传递数据：
                <Demo name="xxx">
            (2).接收数据：
                第一种方式（只接收）：
                    props:['name']
                第二种方式（限制类型）：
                    props:{
                        name:Number
                    }
                第三种方式（限制类型、限制必要性、指定默认值）：
                    props:{
                        name:{
                            type:String,    //类型
                            required:true,  //必要性
                            default:'老王'  //默认值
                        }
                    }
        备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，
        那么请复制props的内容到data中一份，然后去修改data中的数据。

## mixin(混入)
    功能：可以把多个组件共用的配置提取成一个混入对象
    使用方式：
        第一部以定义混合，例如：
            {
                data(){...},
                methods{....}
                ....
            }
        第二步使用混合，例如：
            (1) 全局混入： Vue.mixin(xxx)
            (2) 局部混入： mixins:['xxx']
    备注：如果使用data中的数据，methods中的方法冲突了，按照组件中的来，不破坏代码
        对于生命周期的钩子函数来说，混合的钩子函数在前，组件的在后。

## 插件
    功能：用于增强Vue
    本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。
    定义插件：对象.install = function(Vue options){
        // 1. 添加全局过滤器
        Vue.filter(....)
        
        // 2. 添加全局指令
        Vue.directive(....)
        
        // 3. 配置全局混入
        Vue.mixin(....)
        
        // 4. 添加实例方法
        Vue.prototype.$myMethod = function (){...}
        Vue.prototype.$myProperty = xxxx
    }
    使用插件： Vue.use()

## scoped样式
    作用：让样式在局部生效，防止冲突
    写法：<style scoped>
    
- assets文件夹一般放的是前端的静态资源（视频，图片，音频）    

尚硅谷 Vue2.0 + Vue3.0 入门到精通教程学习笔记 （一）
weixin_44566194的博客
12-08 3124
本文为总结尚硅谷Vue2.0+Vue3.0 的学习笔记系列的第一章——Vue的核心，包含Vue简介、模板语法、数据绑定、MVVM模型、事件处理，计算属性与监视、class与style绑定、列表渲染、过滤器、内置指定和自定义指令以及Vue生命周期等知识点
尚硅谷 Vue2.0 + Vue3.0 入门到精通教程学习笔记 （四）
weixin_44566194的博客
12-24 549
本文整理了B站尚硅谷Vue2.0 + Vue3.0 入门到精通教程视频第四章的学习内容的笔记，包括Vue 脚手架配置代理，GitHub 用户搜索案例，vue项目中常用的2个Ajax库，slot插槽等知识。
尚硅谷vue3.0笔记
05-30
尚硅谷vue3.0笔记
vue脚手架--尚硅谷学习笔记
sumisu666的博客
10-13 527
vue脚手架笔记脚手架文件结构关于不同版本的Vuevue.config.js配置文件ref属性props配置项mixin(混入)插件scoped样式总结TodoList案例webStorage组件的自定义事件全局事件总线（GlobalEventBus）消息订阅与发布（pubsub）nextTickVue封装的过度与动画vue脚手架配置代理方法一方法二插槽Vuex1.概念2.何时使用？3.搭建vuex环境4.基本使用5.getters的使用6.四个map方法的使用7.模块化+命名空间路由1.基本使用2.几个注
Vue3 学习笔记（六）——Vue应用的使用
最新发布
weixin_41252990的博客
08-01 11
1、创建应用并挂载到页面中：登录后复制 import { createApp } from 'vue' // 1、引用vue方法 import App from './App.vue' // 从一个单文件组件中导入根组件 const app = createApp(App); // 2、添加根组件 /* 或者：...
尚硅谷Vue3笔记
qq_54358705的博客
03-10 1907
vue3
尚硅谷vue3学习笔记
2302_77862232的博客
01-07 2280
setup`是`Vue3`中一个新的配置项，值是一个函数，它是 `Composition API` ，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在`setup`中。特点如下：- `setup`函数返回的对象中的内容，可直接在模板中使用。- `setup`中访问`this`是`undefined`。- `setup`函数会在`beforeCreate`之前调用，它是“领先”所有钩子执行的。姓名：{{ name }}
Vue3学习笔记（尚硅谷）
LQlove1的博客
05-09 1952
1. 理解：Vue3.0中一个新的配置项，值为一个函数。 2. setup是所有composition API "表演的舞台"。 3. 组件中所用到的数据、方法等，均要配置在setup中。 4. setup函数的两种返回值：
最新尚硅谷vue系列笔记
02-11
8. **学习资源**："尚硅谷vue系列笔记"可能包含的是针对Vue.js的学习资料，涵盖基础到高级的内容，帮助开发者深入理解Vue及其应用。`vue-learning-master.zip`和`vue-advance-master.zip`可能是不同阶段的学习资源，...
尚硅谷VUE核心技术课件资料-笔记总结
04-17
尚硅谷的Vue核心技术课程旨在深入讲解Vue的核心概念和技术，帮助开发者全面掌握Vue的使用。 1. **Vue安装与基本使用** - 安装Vue：通过npm或CDN引入Vue.js库，了解如何在项目中初始化Vue实例。 - 模板语法：学习...
Vue学习笔记（尚硅谷天禹老师）
m0_67391907的博客
03-06 1183
Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网 英文官网 中文官网 1.1.2. 介绍与描述 动态构建用户界面的渐进式JavaScript框架 作者：尤雨溪 1.1.3. Vue的特点 遵循MVVM模式 编码简洁，体积小，运行效率高，适合移动/PC端开发 它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联 借鉴 Angular 的模板和数据绑定技术 借鉴 React 的组件化和虚拟DOM
Vue3笔记 尚硅谷张天禹
03-07
Vue3笔记尚硅谷张天禹 markdown格式
尚硅谷Java学习文档集合
08-29
这里有尚硅谷的诸多有关Java开发精品PDF文档，[尚硅谷]_宋红康_常用sql操作总结，尚硅谷_宋红康_参悟Java基础核心技术，[尚硅谷]_宋红康_深度解析Java内存原型，[尚硅谷]_封捷_jQuery学习笔记
【vue3】尚硅谷vue3学习笔记
michiko98的博客
12-03 751
什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装。类似于vue2.x中的mixin。自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。
Vue3学习笔记（尚硅谷天禹老师）
2301_76201197的博客
01-03 6724
Vue3相较于Vue2打包大小减少41%；初次渲染快55%，更新渲染快133%；内存减少54%。
尚硅谷---Vue3同步笔记
Father_Of_Soft的博客
03-05 2179
Vue3新特性介绍，Vue3入门到精通。尚硅谷Vue3教程同步笔记，方便您预习复习~
[Vue]Vue3学习笔记(尚硅谷)
emmmm.....
01-04 5574
创建Vue3项目 vue-cli vite 项目结构 Vue3开发者工具的安装 初识setup ref 函数 reactive函数 Vue3.0中的响应式原理 vue2.x的响应式 Vue3.0的响应式 reactive对比ref setup的两个注意点 computed函数 watch函数 watchEffect函数 生命周期 自定义hook函数 toRef shallowReactive readonly 与 shallowReadonly toRaw 与 markRaw
【无标题】
qq_51685537的博客
12-24 867
修改名字
尚硅谷 Vue 学习笔记(3) 计算属性和监视
WoHowLearn的博客
10-23 269
vue实例vm有4个属性el, data, computed, watch , computed 即计算属性: computed: 执行时间: 1.初始化显示执行 2.相关的data属性数据(this.firstName , this.lastName)发生变化 3.this 指的是vm对象 fullName1( ) 和fullName3 括号什么意思具体看截图的代码注释; watch 和 ...
尚硅谷张天禹老师Vue2笔记：核心概念与配置详解
"Vue2.0的学习笔记，涵盖了Vue项目的文件结构、不同版本Vue的区别、vue.config.js配置、以及props的使用等核心概念。" 在深入Vue2.0的学习过程中，我们首先要理解一个标准Vue项目的文件结构。Vue脚手架创建的项目...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值