谷粒商城之Vue框架学习

最新推荐文章于 2025-04-02 20:41:54 发布

兰交余文乐

最新推荐文章于 2025-04-02 20:41:54 发布

阅读量1.4k

点赞数 1

分类专栏：尚硅谷谷粒商城文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_56674682/article/details/121763508

版权

尚硅谷谷粒商城专栏收录该内容

32 篇文章

订阅专栏

基本语法和插件安装

快速入门：介绍 — Vue.js

我们学习的是vue2.x版本

vue的安装：

①使用src进行引入

② 使用npm进行安装

1.vscode 创建一个文件夹，进行一个初始化

npm init -y

生成package.json文件进行一个包的管理

2.使用npm install vue命令，安装vue

npm install vue

Vue的使用

①导入vue

实现了一个单向的绑定，修改数据页面跟着动态变化

插值表达式

使用：{{}}

①{{}}里面可以放Vue实例定义的数据或者函数，表达式，js内置函数(必须要有返回值)

②标签内部使用插值表达式，在网络不佳情况下会造成插值闪烁的问题

v-html与v-text讲解

将网络调成慢3G

会出现{{msg}}然后再出现<h1>hello</hello>，这种现象称为：插值闪烁

解决方案：使用v-html(会进行转义)和v-text(不会进行转义)

v-bind讲解

作用：为html标签的属性绑定

在class和style属性中的运用，使用一对{}里面存放的是对象

v-model的讲解

作用：双向绑定

应用：表单、vue自定义组件

v-on事件绑定讲解

v-on:事件名="数据、函数、表达式"

简写：@

事件冒泡讲解

当点击小div时会触发两次hello函数，这个就称为事件冒泡

.stop：阻止事件冒泡到父元素

.prevent：阻止默认事件发生

.once：只执行一次

此时点击小div只会出现一次点击了

阻止跳转

阻止跳转并且不向上冒泡

只生效一次

按键修饰符

组合按键

v-for遍历

1.显示user信息：v-for="user in users"

2.获取数组的下标：v-for="(user,index) in users"

3.遍历对象

①v-for="value in Object"

②v-for="(value,key) in Object"

③v-for="(value,key,index) in Object"

4.遍历的时候加上:key来区分不同的数据，提高vue的渲染效率

v-if和v-show的讲解

v-if：顾名思义，用于条件判断，如果为true的话，所在的元素才会进行渲染

v-show：当得到的结果为true时，所在的元素才会被显示

区别：

计算属性、监听器、过滤器

计算属性：在vue实例中使用computed

监听器：可以监控一个值的变化做出相对应的反应

过滤器常用来处理文本格式化操作，过滤器可以用在两个地方：双花括号插值和v-bind表达式

使用三元运算符的话，后台处理会比较复杂

局部过滤器仅限于当前vue实例管控的标签使用

全局过滤器

第一个参数：全局过滤器的名字

第二个参数：过滤的规则

组件

假如我们想要复用这个点赞组件 ，我们可以注册一个全局组件

注册一个局部组件

说明：

1.组件也是个vue实例，因此它在定义时也会接收：data、methods、声明周期函数等

2.不同的是组件不会与页面元素绑定，否则就无法复用了，因此没有el属性

3.但是组件渲染需要html模板，因此增加了template属性，值就是html模板

4.全局组件定义完毕，任何vue实例都可以直接在html中通过组件名称来使用组件了

5.data必须是个函数，不再是个对象

Vue的生命周期

Vue模块化开发

1.全局安装webpack

npm install webpack -g

2.全局安装vue脚手架

npm install -g @vue/cli-init

3.初始化vue项目

vue init webpack appname

vue脚手架使用webpack模板初始化一个appname项目

①创建一个vue-demo文件夹，在路径上输入cmd

如果在初始化时，你点击鼠标左键不动了，cmd以为你要输输入字符，可以进行下面设置

鼠标右击下图处

初始化项目的目录

我们目前主要关注src

index.html是首页面，有main.js中的vue实例对它进行管控

这是一个典型的单文件组件

路由视图在index中配置

访问/就相当于访问helloworld.vue

创建新的视图

添加路由

整合element-ui进行快速开发

为了方便开发，我们编写一个单文件组件模板

输入vue ，下面是模板

// {
// 	// Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
// 	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
// 	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
// 	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
// 	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
// 	// Placeholders with the same ids are connected.
// 	// Example:
// 	// "Print to console": {
// 	// 	"scope": "javascript,typescript",
// 	// 	"prefix": "log",
// 	// 	"body": [
// 	// 		"console.log('$1');",
// 	// 		"$2"
// 	// 	],
// 	// 	"description": "Log output to console"
// 	// }
// }
{
	"生成vue模板": {
		"prefix": "vue",
		"body": [
			"<!-- $1 -->",
			"<template>",
			"<div></div>",
			"</template>",
			"",
			"<script>",
			"//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）",
			"//例如：import 《组件名称》 from '《组件路径》';",
			"",
			"export default {",
			"//import引入的组件需要注入到对象中才能使用",
			"components: {},",
			"props: {},",
			"data() {",
			"//这里存放数据",
			"return {",
			"",
			"};",
			"},",
			"//监听属性 类似于data概念",
			"computed: {},",
			"//监控data中的数据变化",
			"watch: {},",
			"//方法集合",
			"methods: {",
			"",
			"},",
			"//生命周期 - 创建完成（可以访问当前this实例）",
			"created() {",
			"",
			"},",
			"//生命周期 - 挂载完成（可以访问DOM元素）",
			"mounted() {",
			"",
			"},",
			"beforeCreate() {}, //生命周期 - 创建之前",
			"beforeMount() {}, //生命周期 - 挂载之前",
			"beforeUpdate() {}, //生命周期 - 更新之前",
			"updated() {}, //生命周期 - 更新之后",
			"beforeDestroy() {}, //生命周期 - 销毁之前",
			"destroyed() {}, //生命周期 - 销毁完成",
			"activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发",
			"}",
			"</script>",
			"<style  scoped>",
			"$4",
			"</style>"
		],
		"description": "生成vue模板"
	},
	"http-get请求": {
		"prefix": "httpget",
		"body": [
			"this.\\$http({",
			"url: this.\\$http. adornUrl(''),",
			"method: 'get',",
			"params: this.\\$http.adornParams({})",
			"}).then(({data})=>{",
			"})"
		],
		"description": "httpGet请求"
	},
	"http-post请求": {
		"prefix": "httppost",
		"body": [
			"this.\\$http({",
			"url: this.\\$http. adornUrl(''),",
			"method: 'post',",
			"data: this.\\$http.adornData(data, false)",
			"}).then(({ data })=>{ });"
		],
		"description": "httpPost请求"
	}
}

Element-ui官方文档：Element - The world's most popular Vue UI framework

①Element-ui安装