Vue2 应用

最新推荐文章于 2024-07-24 14:58:19 发布
最新推荐文章于 2024-07-24 14:58:19 发布
阅读量977 收藏
点赞数
分类专栏： 前端开发 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51179717/article/details/121919051
版权

Vue是一套用于构建用户界面的渐进式框架。

渐进式的含义：主张最少。
每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。

本章节参考Vue官网教学视频，为个人学习总结。附官方教程 Vue.js教程

1.Vue的安装与部署

引入Vue.js，对于制作原型或学习，你可以这样使用最新版本：

<script src="https://unpkg.com/vue@next"></script>

对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏。
Vue下载安装地址

2、Vue的实例及生命周期

Vue的实例及生命周期

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	{{msg}}
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		msg : "hi vue",
	},
	//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
	beforeCreate:function(){
		console.log('beforeCreate');
	},
	/* 在实例创建完成后被立即调用。
	在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。
	然而，挂载阶段还没开始，$el 属性目前不可见。 */
	created	:function(){
		console.log('created');
	},
	//在挂载开始之前被调用：相关的渲染函数首次被调用
	beforeMount : function(){
		console.log('beforeMount');

	},
	//el 被新创建的 vm.$el 替换, 挂在成功	
	mounted : function(){
		console.log('mounted');
	
	},
	//数据更新时调用
	beforeUpdate : function(){
		console.log('beforeUpdate');
	},
	//组件 DOM 已经更新, 组件更新完毕 
	updated : function(){
		console.log('updated');
			
	}
});
setTimeout(function(){
	vm.msg = "change ......";
}, 3000);
</script>
</body>
</html>

3、Vue的组件化开发

1.组件是可复用的 Vue 实例，且带有一个名字。
2.因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。
3.组件的data选项必须是一个函数，这是组件定义的规范，是为了让每个实例可以维护一份被返回对象的独立的拷贝。
data: function () {
return {
count: 0
}
}
实例：定义一个全局的组件并给它绑定值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<qingjiang v-for="(item,index) in items" v-bind:p="item"></qingjiang>
		</div> 
	</body>
	<!-- 1.导入Vue.js -->
	<script src="vue/开发版/vue.js"></script>
	<script>
		Vue.component("qingjiang",{
			props:["p"],
			template:"<li>{{p}}</li>"
		})
		var vm = new Vue({
			el:"#app",
			data:{
				items:["java","Linux","前端"]
			}
		})
		
	</script>
</html>

4、Slot插槽

官方文档
插槽能够存放的内容：插槽内可以包含任何模板代码，包括 HTML，甚至是组件。
插槽的作用：
1.做后备内容，如下例当没有给插槽提供任何内容的时候模版会渲染后备的内容Submit。

<button type="submit">
  <slot>Submit</slot>
</button>

2.具名插槽，顾名思义即给slot添加一个name的属性，这样可以在我们使用时避免混乱，且更具辨识度。
使用案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<page>
				  <template v-slot:header>
						<h1>Here might be a page title</h1>
				  </template>
			</page>
		</div> 
	</body>
	<!-- 1.导入Vue.js -->
	<script src="vue/开发版/vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script>
		Vue.component("page",{
			template:`
			<div class="container">
			  <header>
			    <slot name="header">Header插槽</slot>
			  </header>
			  <main>
			    <slot></slot>
			  </main>
			  <footer>
			    <slot name="footer"></slot>
			  </footer>
			</div>
			`
		})
		var vm = new Vue({
			el:"#app"
		})
	</script>
</html>

使用具名插槽需要注意两点：
- v-slot 只能添加在 <template> 上。
- 一个不带 name 的 <slot> 插槽会带有隐含的名字“default”。.

3.作用域插槽（使用较少）
了解，插槽是不能直接访问父组件的属性。那么如何才能访问父组件的属性元素。
以下是一个具名插槽的获取父组件作用域属性的案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!-- 1.导入Vue.js -->
	<script src="vue/开发版/vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<body>
		<div id="app">
			<child :lists="nameList">
				<template v-slot:list="slotProps">
					{{slotProps}}
				</template>
			</child>
		</div>
	</body>
<script>
    Vue.component('child',{
        props:['lists'],
        template:`
            <div>
                <ul>
					<slot name="list" :bbbbb="lists" aaa="123456"></slot>
                </ul>
            </div>
        `
    })

    let vm = new Vue({
        el:'#app',
        data:{
            nameList:[
            {id:1,name:'孙悟空'},
            {id:2,name:'猪八戒'},
            {id:3,name:'沙和尚'},
            {id:4,name:'唐僧'},
            {id:5,name:'小白龙'},
            ]
        }
    })
</script>
</html>

案例中组件的定义如下，组件中插槽定义了多个属性，name插槽的名称，:bbbb="lists"表示给自定义属性bbbb绑定组件的props属性lists。aaa="123456"则是一个普通的属性。

Vue.component('child',{
    props:['lists'],
    template:`
        <div>
            <ul>
	<slot name="list" :bbbbb="lists" aaa="123456"></slot>
            </ul>
        </div>
    `
})

我们通过属性绑定将需要的数据绑定到了插槽上，就可以通过以下方式在调用绑定的数据了。{{slotProps}}就是我们绑定在插槽上的属性键键值对。

<child :lists="nameList">
	<template v-slot:list="slotProps">
		{{slotProps}}
	</template>
</child>

4.插槽的缩写
我们可以把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header。但是要注意使用这种方式要注意一定要明确插槽名，如默认的default插槽名必须也要写成#default这种形式。

5、 组件自定义事件内容分发

组件如何操作Vue实例的数据，注意组件与实例的是不相干的。需要使用$emit，本例中实现了在组件中操作Vue实例的作用域。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in todoItems" :item="item" :index="index" v-on:remove="removeItems(index)"></todo-items>
    </todo>
</div>
</body>
<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    //slot 插槽
    Vue.component("todo",{
        template:
            "<div>" +
                "<slot name='todo-title'></slot>" +
                "<ul>" +
                    "<slot name='todo-items'></slot>" +
                "</ul>" +
            "</div>"
    });
    Vue.component("todo-title",{
        props:['title'],
        template:"<div>{{title}}</div>"
    })
    Vue.component('todo-items',{
        props:['item','index'],
        template:'<li>{{index}}------{{item}} <button @click="remove">删除</button></li>',
        methods:{
            remove:function (index) {
				this.$emit('remove',index);//用于触发remove方法绑定的方法，可用于间接操作VUe模型中的数据。
            }
        }
    })
    var vm = new Vue({
        el:"#app",
        data:{
            title:"教学内容",
            todoItems:['狂神说Java','狂神说前端','狂神说Linux']
        },
        methods:{
            removeItems:function (index) {
				alert("removeItem方法")
                console.log("删除了"+this.todoItems[index]+"OK");
                this.todoItems.splice(index,1);//一次删除一个元素
            }
        }
    })
</script>
</html>

以下是$emit的官方解释。
pp

6、Vue的重定向与参数传递

路由的参数传递
路由配置

{
  //路由路径
  path: '/content/:id',
  name:"con",
  //跳转的组件
  component:Content,
  props: true
}

如何传递参数

<router-link :to="{name:'con',params:{id:1}}">内容页</router-link>

接收参数的页面

<template>
  <div>
    <h1>内容页</h1>
    {{id}}
  </div>
</template>

<script>
    export default {
      props:['id'],
      name: "Content"
    }
</script>

路由的重定向

{
  path:'/main',
  name:'main',
  component: Main
},{
  path: '/path',
  redirect:'/main'
}

7、axios异步通信

什么是Axios？
Axios是一个开源的可以用在浏览器端和NodeJS的异步通信框架，它的主要作用是实现AJAX异步通信，其功能特点如下：

  • 从浏览器中创建XMLHttpRequests
  • 从node.js创建http请求
  • 支持Promise API（JS中链式编程）
  • 拦截请求和响应数据
  • 取消请求
  • 自动转换JSON数据
  • 客户端支持防御 XSRF （跨站请求伪造）

案例：通过axios获取数据并绑定值
数据文件a.json

{
	"name":"狂神说Java",
	"url":"https://..",
	"page":1,
	"isNonProfit":true,
	"address":{
		"street":"含光",
		"city":"陕西",
		"country":"中国"
	},
	"links":[
		{
			"name":"bilibili",
			"url":"https://space.bili..."
		},
		{
			"name":"狂神说Java",
			"url":"https://space.bili..."
		},
		{
			"name":"百度",
			"url":"https://space.bili..."
		}
	]
}

获取a.json内的数据并将它们绑定到组件中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div>{{info.name}}</div>
			<div>{{info.address.city}}</div>
			<a v-bind:href="info.url">点我</a>
		</div> 
	</body>
	<!-- 1.导入Vue.js -->
	<script src="vue/开发版/vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script>
		var vm = new Vue({
			el:"#app",
			data(){
				return{
					info:{
						name:null,
						address:{
							country:null,
							city:null,
							street:null
						},
						url:null
					}
				}
			},
			mounted(){//钩子函数
				axios
				.get("a.json")
				.then(response => (this.info =response.data));
			}
		})
	</script>
</html>

8、Vue Cli

什么是vue-cli？
vue-cli是官方提供的一个脚手架，用于快速生成一个vue的项目模板；
预先定义好的目录结构及基础代码，就好比咱们在创建Maven项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架，我们的开发更加的快速；
主要功能：

  • 统一的目录结构
  • 本地调试
  • 热部署
  • 单元测试
  • 集成打包上线

安装vue -cli
要求安装了Nodejs [下载地址](http://nodejs.cn/download/)与cnpm淘宝镜像
输入命令cnpm install vue -cli -g，安装成功后可查看以下目录。
在这里插入图片描述
使用vue -cli模版创建Vue项目
在这里插入图片描述

CV菜鸟#
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue2的使用
m0_71769770的博客
09-15 546
数据驱动视图（单向的数据绑定，数据的变化会驱动视图自动更新）；双向数据绑定（不需要手动操作dom元素，自动将表单中的内容同步到数据源中，即js数据的变化会被自动渲染到页面；页面上表单数据变化时会被vue获取，并更新到js数据中）Directives节点下声明私有自定义指令在main.js中利用Vue.directive()声明全局自定义指令。
Vue-2 本地应用
niubiwhat的博客
08-26 275
Vue 本地应用
Vue2 - 关于 vuex 的运用
m0_63907100的博客
02-20 477
一般在项目中，或者中vuex 中的，不在组件中发送了！而且vuex需要模块化。工作模式（三连环）： api 编写发送请求函数 -> vuex 调用请求函数并存储数据 -> 组件利用 vuex 发送请求获取数据。
vue2初使用
qq_56378849的博客
06-09 108
分3步进行vue2使用。
vue2基础使用
wyqf0125的博客
08-30 284
vue2的基本使用
Vue2 概述
热门推荐
Dailyblue的专栏
04-28 1万+
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。...
vue2admin:专为Vue 2应用量身定制的AdminLTE仪表板
05-18
Vue2Admin是一个受启发的完全响应式管理模板。 该模板在开始时是内置于Vue 2的。 它也包括Vue资源，Vuex。 该项目的插件已通过脚本加载器加载。 Chart.js已升级至2.xx 现场演示 演示只是概念的证明。 屏幕截图 ...
Vue2自用模板.zip
12-09
Vue2自用模板.zip是一个基于Vue.js 2.x版本的项目模板，包含了开发Vue应用所需要的基本配置和依赖。这个模板的构建旨在简化新项目的初始化工作，使得开发者可以快速地开始编写Vue应用程序。以下是对该模板中涉及的...
vue2 dev-tools
09-21
Vue2 Dev-Tools 是一个专为Vue2应用开发设计的强大浏览器扩展，它允许开发者在Chrome浏览器中对Vue应用程序进行调试、性能分析和状态管理。 Vue2 Dev-Tools 的主要功能包括： 1. **组件树视图**：此工具显示了当前...
vue2+elementui+electron项目配置
06-06
最后，你可能还需要处理Electron与Vue应用之间的通信，这可以通过`contextBridge`和`ipcMain/ipcRenderer`实现。`epaper-tools`可能是项目的工具模块，包含了一些辅助功能，例如与硬件交互、数据处理等。 总的来说...
vue2的浏览器专用工具
01-21
"vuex"是Vue生态中的一个状态管理库，专门用于管理Vue应用中的全局状态。在大型项目中，随着组件数量的增长，状态管理会变得复杂，vuex提供了一种集中式存储的方式来管理这些状态，使得状态变化可以被跟踪和控制，...
【Vue】Vue2基本使用
櫆溟的博客
12-12 1079
插值语法用于解析标签体中的内容。数据绑定最常见的形式就是使用Mustache语法 (双大括号) 进行文本插值，被Mustache标签包裹的对象的值将会插入Mustache标签的位置，并且，无论何时，绑定的数据对象上发生了改变，插值处的内容都会更新。但是通过使用v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定。指令语法用于解析标签（包括标签属性、标签体内容、绑定事件……）。指令 (Directives)是带有 v-前缀。
Vue2的基本使用
折耳根的羹
03-07 930
vue的基本使用
Vue2的基本用法
qq_62499582的博客
11-25 1438
Vue2的基本使用
计算机毕业设计Django+Vue.js知识图谱音乐推荐系统 音乐爬虫可视化 音乐数据分析 大数据毕设 大数据毕业设计 机器学习 深度学习 人工智能
从业计算机毕业设计10年，打算用一年时间分享10年毕设经验！
07-23 502
计算机毕业设计Django+Vue.js知识图谱音乐推荐系统 音乐爬虫可视化 音乐数据分析 大数据毕设 大数据毕业设计 机器学习 深度学习 人工智能
Python Formulas模型以JSON格式文件导出导入
Humbunklung的专栏
07-23 388
Python Formulas库，JSON格式导出导入。
vue3——利用自定义指令实现下拉框分页懒加载
最新发布
zmy967131的博客
07-24 350
vue3——利用自定义指令实现下拉框分页懒加载
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 339
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
【vueUse库Time模块各函数简介及使用方法--全篇】
xiejunlan的博客
07-23 774
vueUseTime函数基本使用示例实现使用方法注意假设的 `useTimeAgo` 函数使用方法。
vue2router的应用
05-18
Vue Router 是 Vue.js 官方的路由管理器，它和 Vue.js 核心深度集成，可以非常方便地实现单页应用的路由功能。 以下是 vue2router 的应用步骤： 1. 安装 Vue Router： ```bash npm install vue-router --save ``` 2. 在 main.js 中引入 Vue Router 并注册： ```javascript import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) ``` 3. 创建路由对象并定义路由规则： ```javascript const router = new VueRouter({ routes: [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: About } ] }) ``` 4. 在 Vue 实例中挂载路由对象： ```javascript new Vue({ router, render: h => h(App) }).$mount('#app') ``` 5. 在模板中使用 `<router-link>` 和 `<router-view>`： ```html <template> <div> <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> <router-view></router-view> </div> </template> ``` 以上就是 vue2router 的基本应用步骤。在实际开发中，可以根据需要自定义路由规则，添加路由守卫等。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值