Vue学习笔记3

最新推荐文章于 2024-09-17 13:42:29 发布
最新推荐文章于 2024-09-17 13:42:29 发布
阅读量165 收藏
点赞数
分类专栏： 学习记录 文章标签： vue.js 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52046856/article/details/130796465
版权

上一篇笔记点这

使用Vue脚手架

下载node.js

安装nodejs的目录不能有中文以及空格

检查node版本：node -v

在这里插入图片描述

全局安装cnpm工具

npm install-g cnpm --registry=https://registry.npm.taobao.org

安装vue-cli脚手架（最新版本）

//全局安装
npm install -g @vue/cli

创建项目

vue create 项目名

选择vue版本

第三行是自定义（新手不建议），回车确定

在这里插入图片描述

启动服务

npm run sreve

在这里插入图片描述

成功启动页面

在这里插入图片描述

这样就成功使用vue脚手架创建了一个项目（它自己默认的简单项目）

分析脚手架

|-- node_modules   放置node模块
|-- public
|   |__ favicon.ico   页签图标
|   |__ index.html    主页面
|-- src  项目源码
|  |-- asserts  存放静态资源（图片等）
|  |-- component 存放组件
|  |   |__HelloWorld.vue
|  |-- App.vue 所有组件的父组件
|  |-- main.js 入口文件
|-- .gitignore  git版本管制忽略的配置
|-- babel.config.js  babel的配置文件
|-- package-lock.json  包版本控制文件
|-- package.json 应用宝配置文件
|-- READEME.md  应用描述文件
|-- vue.config.js 配置文件

在这里插入图片描述

index.html文件

  • 让ie浏览器以最高的渲染级别渲染页面

  • <%= BASE_URL %> public文件夹

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <!-- 让ie浏览器以最高的渲染级别渲染页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- <%= BASE_URL %> public文件夹 -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <!-- 当浏览器不支持js时 这个标签里面的html会被渲染 -->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <!-- 容器 -->
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

main.js文件

在我们引入vue时，它的文件是vue.runtime.xxx.js,不是vue.js，所以需要使用render函数，即模板解析器。

  • vue.js和vue.runtime.xxx.js的区别：
    • vue.js是完整的Vue： 核心功能 + 模板解析器
    • vue.runtime.xxx.js是运行版的vue： 核心功能
  • vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容
// 该文件是整个项目的入口文件
//引入Vue
import Vue from 'vue'
//引入App组件 是所有组件的父组件
import App from './App.vue'

//关闭vue的生产提示
Vue.config.productionTip = false

//创建vue实例对象
new Vue({
  //将App组件放入容器中
  render: h => h(App) ,
}).$mount('#app')

vue.config.js文件

使用vue inspect > output.js 命令可以查看到Vue脚手架的默认配置。
使用vue.config.jsi可以对脚手架进行个性化定制，详情见官网。

ref属性

  • 被用来给元素或子组件注册引用信息（id的替代者）
  • 应用在html标签上获取的是真实的DOM元素，应用在组件标签上是组件实例对象（vc）
  • 使用方式：
    • 打标识： <h1 ref="xxx">...<h1> 或 <School ref="xxx"></School>
    • 获取：this.$refs.xxx

案例：App.vue

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

<script>
	//引入School组件
    import School from './components/School'
    
    export default {
        name:'App',
        components:{School},
        data() {
			return {
                msg:'好好学习'
            }
        },
        methods: {
			showDom() {
				console.log(this.$refs.title);
                console.log(this.$refs.btn);
                console.log(this.$refs.sch);
            }
        }
    }
</script>

props配置

  • 让组件接收外部传过来的数据

  • 传递数据：

  • 接收数据：

    • 只接收：props:[‘name’]

    • 限制类型：props:{name:String}

    • 限制类型、限制必要性、指定默认值“

      props:{
    name:{
	typeString, //类型
    required:true,//必要性
    default:'007'//默认值
    }
}

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

案例：Student.vue

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

<script>
	export default {
		name:'Student',
		data() {
			console.log(this)
			return {
				msg:'我是一个尚硅谷的学生',
				myAge:this.age
			}
		},
		methods: {
			updateAge(){
				this.myAge++
			}
		},
		//简单声明接收
		// 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>

mixin(混入)属性

  • 可以把多个组件共用的配置提取成一个混入对象、

  • 使用方式：

    • 定义混入

      {
    data(){},
	methods:{},
    ...
}

    • 使用混入：
      全局混入：Vue.mixin(xxx)
      局部混入：mixins:[‘xxx’]

案例：

mix.js 定义了两个混入方法

export const hunhe = {
    methods:{
        showName(){
            alert(this.name)
        }
    },
    mounted() {
		console.log('你好啊！')
    }
}

export const hunhe2 = {
    data() {
        return {
            x:200,
            y:499
        }
    },
}

main.js 全局混入

//引入混入属性
import {hunhe,hunhe2} from './mixin'

//使用混入
Vue.mixin(hunhe)
Vue.mixin(hunhe2)

Student.vue

<template>
	<div>
		<h2@click="showName'">学生姓名：{{name}</h2>
		<h2>学生性别：{{sex}</h2>
	</div>
</template>
                  
<script>
//1、引入混入
//import {hunhe,hunhe2}from '../mixin'
export default {
	name:'Student',
	data() {
        return {
			name:'张三'，
			sex:'男'
        }
	},
/2、使用局部混入
//mixins:[hunhe,hunhe2]
}
</script>

插件 plugin.js

定义插件：plugin.js

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

使用插件：Vue.use() 在创建Vue实例前应用插件

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import plugins from './plugins'
//关闭Vue的生产提示
Vue.config.productionTip = false

//应用插件
Vue.use(plugins,1,2,3)
//创建vue实例
new Vue({
    el:'#app',
    render:h => h(App)
})

scoped样式

  • 让样式在局部生效，防止冲突

  • 当 style 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。

  • <style scoped>

    ​

<template>
	<div>
		<h1 class="title">你好啊</h1>
		<School/>
		<Student/>
	</div>
</template>

<script>
	import Student from './components/Student'
	import School from './components/School'

	export default {
		name:'App',
		components:{School,Student}
	}
</script>

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

TodoList案例

静态实现（页面）

  • 首先拆分页面，把页面划分为一个父组件App.vue和四个子组件

    在这里插入图片描述

  • 拆分之后，建立对应的文件，注册引用组件

  • 进行每个组件的编码

动态实现（数据改变）

  • 数据的存放位置
  • 获取数据，进行修改 ，页面随之变化

总结TodoList案例

  • 组件化编码流程
    • 拆分静态组件：组件要按照功能点进行拆分，命名不能与html元素冲突
    • 实现动态组件：考虑好数据的存放位置，数据是一个组件在用还是一些组件在用
      • 一个组件在用，数据放在组件自身
      • 一些组件再用，放在组件的共同父组件上（状态提升）
    • 实现交互：从绑定事件开始
  • props适用于：（1）父组件 ==> 子组件 通信 （2）子组件 ==> 父组件 通信 父组件先给子组件一个函数
  • 使用v-model时：v-model绑定的值不能是props传过来的值，因为props是不可以修改的
  • 修改props中的值的情况：props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这种方式
  • 数据在哪里，操作数据就在哪里

浏览器本地存储

webStorage

  • 存储内容大小一般支持5MB左右（不同浏览器可能不一样）
  • 浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制
  • 相关API（4个）：
    • xxxStorage.setItem(‘key’, ‘value’); 此方法接收一个键和值作为参数，会把键值对添加到存储中，如果键名存在则更新其对应的值
    • xxxStorage.getItem(‘person’); 该方法接收一个键名作为参数，返回键名对应的值
    • xxxStorage.removeItem(‘key’); 该方法接收一个键名作为参数，并把该键名从存储中删除
    • xxxStorage.clear(); 该方法清空存储中的所有数据
  • 注意
    • localStorage存储的内容需要手动清除才会消失
    • sessionStorage存储的内容会随着浏览器窗口的关闭而消失
    • xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那getlteml的返回值是null
    • JSON.parse(nul1)的结果依然是null

给TodoList添加本地存储

data() {
	return {
	//由于todos是MyHeader组件和MyFooter组件都在使用，所以放在App中（状态提升）
	todos:JSON.parse(localStorage.getItem('todos')) || []
		}
	},
//深度监视
watch: {
		todos:{
			deep:true,
			handler(value){
				localStorage.setItem('todos',JSON.stringify(value))
			}
		}
	},
沈北漂
关注
专栏目录
vue3源码（六）渲染原理-runtime-core
cwjxyp的博客
07-09 627
2.init 2.1 package init runtime-core/package.json 2.2 调整依赖 3.实现 3.1 init 接受一个参数渲染相关配置，提供一个方法，参数为虚拟节点和真实的元素 3.2 render实现 vnode如图： 此时可以实现基础渲染,由于我们知道节点是文本，可以直接使用文本进行渲染，那如果里面又嵌套一个呢?为了能够判断子节点的类型，定义一个枚举 比如是节点和文本的组合，节点为1，文本为8，采用或运算，得出节点类型数据9，可以看到上图中节点的为9，采用&运算
Vue学习笔记2-安装Vue
摘繁华
06-12 1334
Vue.js 设计的初衷就包括可以被渐进式地采用。这意味着它可以根据需求以多种方式集成到一个项目中。
Vue3源码学习之路-实现runtime-core
凉秋秋秋
09-09 967
Vue3源码学习之路-实现runtime-core
Vue学习笔记（尚硅谷天禹老师）
热门推荐
qq_55593227的博客
08-15 31万+
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
Vue 3 学习笔记
qq_46735055的博客
05-23 2961
禹神最新Vue3教程学习笔记
vue3学习笔记，亲测有效，持续更新
06-14
这篇学习笔记将逐步介绍如何从零开始搭建一个 Vue3 项目，以及在开发过程中遇到的关键概念和功能。 首先，Vue3 的安装是通过命令行工具 CMD 来完成的。在你希望创建项目的位置打开终端，然后使用 Vue CLI 或 Vite ...
vue学习笔记vue学习笔记
08-14
Vue 学习笔记 本文档主要介绍 Vue 框架的基础知识点，包括 Vue 路由、CSS 样式、表单获取值、数据绑定、事件处理等。 一、Vue 路由 在 Vue 中， `<router-view/>` 是用来承载当前级别下的子级路由的一个视图标签...
vue 3 学习笔记 vue3 vue3学习笔记
10-18
Vue 3 学习笔记 本文是关于 Vue 3 的学习笔记，涵盖了 Vue 3 的基础知识点，包括 Setup、Reactive、Ref、计算属性、Watch、生命周期函数、父子组件通信、Hook 等。 一、Setup Setup 是 Vue 3 中的组合式 API 的...
vue学习笔记
11-22
本学习笔记将涵盖Vue的基础概念、核心特性以及常见应用场景，帮助初学者建立起对Vue的全面理解。 一、Vue.js简介 Vue.js的核心理念是通过声明式的模板语法来简化DOM元素的更新，实现数据驱动视图。它采用MVVM...
Vue使用query传参Boolean类型，刷新之后转换为String问题
q879936814的博客
09-12 450
要解决这个问题，不能直接Boolean处理，因为如果传入false，那么转换成字符串，Boolean(‘false’)会变成true；做项目时发现第一次进入页面时传参是正常的Boolean类型，刷新之后变成了String，这是浏览器进行的一次强制转换；解决方法：使用JSON.parse处理参数。
Vue Router push方法的使用
ithongchou的博客
09-13 782
是一个用于编程式导航的方法，它可以将用户导航到应用中的不同路由。它提供了灵活的路由控制能力，允许你在应用的逻辑中进行路由操作，例如在用户交互后进行页面跳转。
Vue接入高德地图并实现基本的路线规划功能
黄团团的个人博客
09-11 568
找到public目录下的index.html文件，把刚才申请好的2个密钥分别粘贴进去，第一个securityJsCode是填入安全密钥，第二个红框是填入Key。登录高德开放平台，点击我的应用，先添加新应用，然后再添加Key。如图所示填写对应的信息，系统就会自动生成。
vue组件通信，点击传值，动态传值（父传子，子传父）
爱敲代码的卡拉米的博客
09-12 671
通过上面的例子，你应该对Vue中如何使用按钮来传递值（通过内部方法或组件间通信）有了基本的了解。记得Vue的数据绑定和组件通信机制是构建Vue应用的关键。
基于python+django+vue的旅游网站系统
最新发布
计算机学姐的博客
09-17 1683
【2025最新】基于协同过滤+python+django+vue+MySQL的旅游网站系统，前后端分离。
大文件切片上传-vue3.0
m0_56416159的博客
09-12 597
大文件切片上传（也称为分片上传）是一种处理大文件上传的有效方法，它通过将大文件分割成多个较小的部分（即切片或分片），然后分别上传这些切片到服务器，最后在服务器上将这些切片合并成原始文件。以下是关于大文件切片上传的详细步骤和注意事项。onUploadInit： 文件初始化调用接口，用于后端创建存放切片文件的文件夹。SparkMD5：生成文件唯一的hash，用来验证文件的完整性。onUploadFinish：文件上传完成验证完整性的接口。onUploadChunk：分片上传接口。基于vue3.0代码实现。
基于Java、SpringBoot、Vue的加油站管理系统设计
程序猿大波的博客
09-14 364
本系统是一个基于Java、SpringBoot和Vue的加油站管理系统。它旨在提高加油站的运营效率，优化客户服务体验，并通过数据分析支持更精准的业务决策。该系统包括用户管理、汽油管理、站点管理等功能模块。通过这些功能，管理员可以方便地管理关键业务信息，同时提供实时的设备监控和数据分析工具，帮助管理者做出明智的决策。此外，系统还提供了安全与权限控制功能，确保只有授权用户才能访问敏感信息，保护加油站的数据安全。整个系统设计简洁易用，能够满足加油站日常运营的需求，提高工作效率和客户满意度。
vue3 透传 Attributes
咸鱼滚滚
09-15 883
“透传 attribute”指的是传递给一个组件，却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。 当一个组件以单个元素为根作渲染时，透传的 attribute 会自动被添加到根元素上。 最常见的例子就是 class、style 和 id。
vue3前端tab切换
susu1083018911的博客
09-12 491
vue3前端tab切换
vue3 自定义el-tree树形结构样式
小白小白从不日别的博客
09-16 455
这里也可以用模拟的数据，下面用的是后端请求的真实数据。这里样式设置主要用到了 windcss。
Vue学习笔记：核心概念与生命周期解析
"个人学习vue笔记，包含作者在学习和工作中整理的重要知识点，涵盖vue的指令、生命周期、计算属性等内容" Vue.js 是一个流行的前端JavaScript框架，用于构建用户界面。以下是对标题和描述中提及知识点的详细说明： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值