Vue学习笔记（五）

已于 2022-07-31 11:55:14 修改
阅读量148 收藏
点赞数
分类专栏： # Vue 文章标签： vue.js npm 前端框架 javascript 前端
于 2021-12-17 18:24:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45075124/article/details/122002015
版权

点击跳转：Vue学习（一）

点击跳转：Vue学习（二）

点击跳转：Vue学习（三）

点击跳转：Vue学习（四）

点击跳转：Vue学习（六）

点击跳转：Vue学习（七）

点击跳转：Vue学习（八）

文章预览：

4、使用Vue脚手架

4.1、初始化脚手架

1、说明

1.Vue脚手架是Vue官方提供的标准化开发工具（开发平台）.
2.最新的版本是4.x.
3.文档

2、具体步骤

建议先配置下方的npm淘宝镜像

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

npm install -g @vue/cli

第二步：切换到你要创建项目的目录（cd切换，或者进入文件夹在路径栏中cmd回车），然后使用命令创建项目

vue create xxxx

在这里插入图片描述

  • vue2
  • vue3
  • 自定义

babel ：ES6 ===>ES5
eslint：语法检查

第三步：启动项目

npm run serve
4、备注：

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

npm config set registry https://registry.npm.taobao.org

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

vue inspect > output.js

4.2、分析脚手架

1、脚手架文件结构
├── 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：包版本控制文件

main.js

/*
  该文件是整个项目的入口文件
 */
// 引入vue
import Vue from 'vue'
// 引入app组件，它是所有组件的父组件
import App from './App.vue'
//关闭vue的生产提示
Vue.config.productionTip = false

//创建vue实例对象vm
new Vue({
  render: h => h(App),
}).$mount('#app')
2、关于不同版本的Vue

  1. vue.js与vue.runtime.xxx.js的区别：

    • vue.js是完整版的Vue，包含：核心功能 + 模板解析器。
    • vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。

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

在这里插入图片描述

实践：总是使用非完整版，然后配合 vue-loader 和 vue 文件

  • 保证用户体验，用户下载的 js 文件体积更小，但只支持 h 函数.
  • 保证开发体验，开发者可以直接在 vue 里面写 HTML标签，而不写 h 函数.
  • vue-loader 可以把 vue 文件里的 HTML，转为 h 函数

思考的问题

既然不能解析template，那么下图中vue组件中的template是谁解析的呢？

在这里插入图片描述

是package.json中vue-template-compiler配置解析的，但是它不会去管vm中的解析

在这里插入图片描述

在这里插入图片描述

3、vue.config.js配置文件

  1. 使用vue inspect > output.js可以查看到Vue脚手架的默认配置，但无法更改。文件标红最外面加上const a ={}，在output.js文件中
    在这里插入图片描述

  2. 在根目录建立vue.config.js文件可以对脚手架进行个性化定制，详情见：

VueCLI配置参考

module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: 'src/index/main.js'
    },
  },
  lintOnSave:false //关闭语法检查
}
4、使用脚手架构建出来的index.html文件
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <!-- 针对IE浏览器的一个特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 开启移动端的理想视口 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 配置页签图标 <%= BASE_URL %>代替./是当前目录下的图标-->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- 配置网页标题 -->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <!-- 当浏览器不支持js时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>
5、使用脚手架构建出来的main.js文件
/* 
  该文件是整个项目的入口文件
*/
//引入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函数去指定具体内容。
*/

//创建Vue实例对象---vm
new Vue({
  el: '#app',
  /*
  render(createElement) {
    return createElement('h1', '你好啊')
    // return console.log(typeof createElement);
    // 打印出的createElement是函数
  },
  简写：
    render:createElement=>createElement('h1', '你好啊'),
  再简化：
    render:q=> q('h1','你好啊')
  */
  
  //render函数完成了这个功能：将App组件放入容器中
  render: h => h(App),

  // template: `<App></App>`, 运行版本的vue， main.js不能写模板
  // components: { App },
})

4.3、ref属性

被用来给元素或子组件注册引用信息（id的替代者）

应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）

使用方式：

  1. 打标识：<h1 ref="xxx">.....</h1> 或 <School ref="xxx"></School>
  2. 获取：this.$refs.xxx

App.vue:

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

<script>
	//引入School组件
	import School from './components/School'

	export default {
		name:'App',
		components:{School},
		data() {
			return {
				msg:'欢迎学习Vue！'
			}
		},
		methods: {
			showDOM(){
				console.log(this.$refs.title) //真实DOM元素
				console.log(this.$refs.btn) //真实DOM元素
				console.log(this.$refs.sch) //School组件的实例对象（vc）
			}
		},
	}
</script>

在这里插入图片描述

4.4、props配置项

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

  1. 传递数据：

    <Demo name="xxx"/>

  2. 接收数据：

    1. 第一种方式（只接收）：props:['name']
    2. 第二种方式（限制类型）：props:{name:String}
    3. 第三种方式（限制类型、限制必要性、指定默认值）：
    props:{
	name:{
	type:String, //类型
	required:true, //必要性
	default:'老王' //默认值
	}
}

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

props中接收的数据会被绑定到组件实例对象vc上，且优先级高于data中的数据，data中的数据属性名字不能与接收的props属性名一致

App.vue:

<template>
  <div>
    <Student name="李四" sex="女" :age="18" />
    <!-- 在组件标签中声明传入属性 
	:即v-bind 将字符串18变为js表达式，使其可以接受加法运算
	-->
  </div>
</template>
<script>
import Student from "./components/Student";
export default {
  name: "App",
  components: { Student },
};
</script>

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,
       //   props的数据不允许修改，想要改动得到propo的数据放入data中
      //   props的优先级高，data中的this.age是props中接收的数据
    };
  },
  methods: {
    updateAge() {
      this.myAge++;
    },
  },
  //方法一:简单声明接收，放在组件实例对象vc上
  // 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>

4.5、mixin(混入)

  1. 功能：可以把多个组件共用的配置提取成一个混入对象

  2. 使用方式：

    第一步定义混合：

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

    第二步使用混入：

    • 使用前需要import导入
    • 全局混入：Vue.mixin(xxx)放在main.js文件中,所有vm,vc都能得到混入的属性
    • 局部混入：mixins:['xxx']放在需要的文件中,在此文件中得到混入的属性
    • 如果混入与自身有同名属性,自身属性优先级高,会覆盖掉混入属性

在这里插入图片描述

School.vue

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

<script>
//引入一个hunhe
// import {hunhe,hunhe2} from '../mixin'

export default {
  name: "School",
  data() {
    return {
      name: "尚硅谷",
      address: "北京",
      x: 666,
      // 如果混入与自身有同名属性。自身属性优先级高
    };
  },
  // mixins:[hunhe,hunhe2],
};
</script>

Student.vue

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

<script>
//局部混合：
// import {hunhe,hunhe2} from '../mixin'

export default {
  name: "Student",
  data() {
    return {
      name: "张三",
      sex: "男",
    };
  },
  // mixins:[hunhe,hunhe2]
};
</script>

App.vue

<template>
	<div>
		<School/>
		<hr>
		<Student/>
	</div>
</template>
<script>
	import School from './components/School'
	import Student from './components/Student'

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

main.js

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

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

// 全局混合，给所有的vm和vc得到混合
import { hunhe, hunhe2 } from './mixin'
Vue.mixin(hunhe)
Vue.mixin(hunhe2)

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

mixin.js

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

4.6、插件

  1. 功能：用于增强Vue
  2. 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。
  3. 定义插件：
对象.install = function (Vue, options) {
    // 1. 添加全局过滤器
    Vue.filter(....)

    // 2. 添加全局指令
    Vue.directive(....)

    // 3. 配置全局混入(合)
    Vue.mixin(....)

    // 4. 添加实例方法
    Vue.prototype.$myMethod = function () {...}
    Vue.prototype.$myProperty = xxxx
}
  1. 使用插件：Vue.use()

在这里插入图片描述

plugins.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
			},
			//指令所在元素被插入页面时
			inserted(element, binding) {
				element.focus()
			},
			//指令所在的模板被重新解析时
			update(element, binding) {
				element.value = binding.value
			}
		})

		//定义混入
		Vue.mixin({
			data() {
				return {
					x: 100,
					y: 200
				}
			},
		})

		//给Vue原型上添加一个方法（vm和vc就都能用了）
		Vue.prototype.hello = () => { alert('你好啊') }
	}
}

main.js

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

//引入插件
import plugins from './plugins'
//应用（使用）插件
Vue.use(plugins, 1, 2, 3)
// 传入参数

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

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:'尚硅谷atguigu',
				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>
		<School/>
		<hr>
		<Student/>
	</div>
</template>

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

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

4.7、scoped样式

如果不同组件起了相同的样式名，会造成样式冲突，在App.vue中后import导入的组件样式会覆盖前面一个组件的同名样式，所以用scoped解决。最好不要再App.vue的style中加入scoped，因为他是汇总组件，写在其中的样式为公共样式。

  1. 作用：让样式在局部生效，防止冲突。

  2. 写法：

    <style lang="less" scoped> 
//lang =''规定了用什么来写style，不写默认为css
	.demo{
		background-color: pink;
	}
</style>
Zzz小白飞
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
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 学习笔记
weixin_43971312的博客
05-22 2192
VUE 学习笔记 1 简介 1.1 简介 中文网 https://cn.vuejs.org/v2/guide/ Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的
vue学习笔记五：vue路由
jinyeran的博客
12-08 1546
一、初识路由 二、vue-router 三、用户登录注册案例 四、动态路由 五、嵌套路由 六、命名路由 七、命名视图 八、编程式导航
Vue学习笔记（四）
qq_40196119的博客
05-14 207
props验证，计算属性，自定义事件，父子组件数据统一
JavaWeb03-Vue学习笔记
08-22
Vue学习笔记 Vue是一个渐进式的JavaScript框架，用于构建用户界面。Vue的核心思想是将组件化的思想应用于前端开发，通过组件的方式来构建应用程序。 一、Vue简介 Vue是一个基于MVVM（Model-View-ViewModel）模式...
vue学习笔记
11-22
本学习笔记将涵盖Vue的基础概念、核心特性以及常见应用场景，帮助初学者建立起对Vue的全面理解。 一、Vue.js简介 Vue.js的核心理念是通过声明式的模板语法来简化DOM元素的更新，实现数据驱动视图。它采用MVVM...
vue学习笔记vue学习笔记
08-14
Vue 学习笔记 本文档主要介绍 Vue 框架的基础知识点，包括 Vue 路由、CSS 样式、表单获取值、数据绑定、事件处理等。 一、Vue 路由 在 Vue 中， `<router-view/>` 是用来承载当前级别下的子级路由的一个视图标签...
Vue Markdonwn学习笔记
11-17
Vue Markdown学习笔记主要涵盖了使用Vue.js框架与Markdown语法结合，以构建高效、可维护的文档和界面的知识。Vue.js是一个轻量级的前端JavaScript框架，它以组件化开发为核心，而Markdown则是一种简洁的标记语言，常...
vue学习笔记五：在vue项目里面使用引入公共方法详解
10-17
在Vue项目中，引入公共方法是为了提高代码复用性，减少重复编写相同的逻辑代码，从而提升开发效率。本文将详细讲解如何在Vue项目中创建并引入公共方法。 首先，我们需要创建一个公共方法库。在项目的根目录下，新建...
谷粒商城实战笔记-38-前端基础-Vue-指令-单向绑定&双向绑定
epitomizelu的专栏
07-20 495
安全性v-text更安全，因为它总是将数据作为纯文本插入，不解析 HTML。v-html则可能引发安全问题，因为它会解析并渲染 HTML 标签。用途v-text适用于插入文本数据，而v-html适用于插入需要被解析为实际 HTML 的数据。处理 HTML 标签v-text忽略 HTML 标签，将其视为普通文本；v-html则会解析并显示 HTML 标签。二者都是单向绑定，元素绑定model，model不绑定元素，元素值改变时model值不会更新。
使用Vue实现点击页面触发特效
qq_45569925的博客
07-19 639
在页面上的指定区域内进行点击，则会在页面上显示设置好的随机文本，此文本出现后会执行动画，动画效果为节点在1s之内向右上方移动并在移动的过程中完成180°翻转，最后消失。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1033
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
vue图片存放在public目录和src/assets目录下的区别
Zing_ing的博客
07-19 465
使用随时要更换的图片，有更新动态显示的需求，像banner、轮播、广告、展示性等大型图片放在public下比较合适；而一些icon、精灵图、雪碧图更适合放在assets下。如果图片不需要被处理，比如网站的结构用图，如logo图片，则放public中，否则如内容图片或者需要被构建为base64的小图标可以放assets中。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
最新发布
epitomizelu的专栏
07-20 500
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
vue执行npm install问题idealTree:yudao-ui-admin-vben: sill idealTree buildDeps
yuan5025的博客
07-17 953
目前这个问题只在芋道源码yudao-ui-admin-vben碰到了，其他vue项目没用遇到过。
7.17（nodejs、vue、SSH服务、SSH免密登录）
m0_71589190的博客
07-17 1058
nodejs、vue、SSH服务、SSH免密登录
博客前端项目学习day03——框架页
qq_53237241的博客
07-19 273
【代码】博客前端项目学习day03——框架页。
自定义 Hooks 在 Vue3 中的应用和重要性
CodeQi技术小栈的博客
07-16 1026
自定义Hooks是Vue3提供的一种将可复用逻辑提取到独立函数中的方式。这不仅可以减少代码的重复，还能让你的代码更加清晰易读，维护起来也更加方便。在这篇文章中，我将通过详细的步骤和实例，带你深入了解如何在Vue3中使用自定义Hooks，以及它们在实际项目中的应用和重要性。首先，我们来看一下如何创建一个简单的自定义Hook。在Vue3中，自定义Hook本质上就是一个返回特定功能的函数。让我们从一个简单的计数器例子开始。
尚硅谷vue学习笔记
08-18
很高兴回答你关于尚硅谷Vue学习笔记的问题！对于Vue的学习，尚硅谷提供了很多优质的学习资源和教程。下面是一些关键的学习笔记要点： 1. Vue基础：了解Vue的基本概念和核心特性，如Vue实例、模板语法、计算属性、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值