Vue-02

最新推荐文章于 2025-09-21 19:01:09 发布

原创最新推荐文章于 2025-09-21 19:01:09 发布 · 148 阅读

0 ·

CC 4.0 BY-SA版权

语言学习专栏收录该内容

5 篇文章

订阅专栏

一.组件

1.什么是组件:

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。
总结:

组件是用来完成特点功能的一个自定义的HTML标签

2.组件的分类:

全局组件和局部组件:
最大的区别就是作用于:
全局组件可以作用于全局的挂载对象;
局部组件:只能作用于挂载的当前对象;

3.组件的语法:

全局组件:
Component:组件;
Vue.component(“组件名字”,”组件的配置”)
局部组件:
在vue对象上:
components:{
组件名字:{组件的配置},
组件名字:{组件的配置},
}

4.组件使用

如果是全局组件:
在挂载了vue对象上的html标签中,都可以使用:
/mycomponent>
如果是局部组件:
只能在挂载的html标签中使用;
/mycomponent>

5.组件使用两种HTML模板

两种方式
1.直接在template属性写上html代码字符串

template: “html代码的字符串”

2.将当前网页中的html标签作为模板代码 (大量的HTML不用拼装HTML字符串)

a. 在网页中定义template标签或者script标签包含模板中需要的html模板代码

   <template id="mytemplate">
        <h1>template标签中的html</h1>
    </template>
    
       <script type="text/template" id="mytemplate">
            <h1>template标签中的html</h1>
        </script>

b. template属性上使用上门的html模板代码.

"mycomponent2":{
      template: "#mytemplate" ,  #代表找到对应的html代码作为当前组件的模板代码
}

3.注意事项:

如果是script的话建议加上 type=“text/template”

6.组件中的数据必须是函数

组件中数据的定义

语法:
“组件的名字”:{
template: “”,
data : function(){
return {
键1:值1,
键2:值2
}
}
}

2.注意事项:
2.1 data数据只能够以函数的形式返回,因为函数中可用写其他的业务代码
2.2 只能够在各自的组件模板中使用各自的组件中的data数据
2.3 Vue对象中的数据不能够在组件中使用. 组件的数据也不能够在挂载的html标签上使用.

二.路由

1.什么是路由

路由是负责将进入的浏览器请求映射到特定的组件代码中。即决定了由谁(组件)去响应客户端请求。简单说路由就是url地址和对应的资源(组件)的映射，通过一个路径的url地址，可以唯一找到一个资源。路由不包含在vue中，是一个插件，需要单独下载。
官方地址：https://router.vuejs.org/zh/
地址：https://unpkg.com/vue-router@3.0.1/dist/vue-router.js

2.路由入门

⑴在js中定义路由；
⑵挂载到一个dom元素上；
⑶使用路由；
⑷定义路由出口

<div id="app">
		<!-- 使用 router-link 组件来导航. -->
		<!-- 通过传入 `to` 属性指定链接. -->
		<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
		<!-- 使用app中的路由：匹配到product路由地址，然后在router-view标签中展示这个地址对应的资源 -->
		<router-link to="/product">公司产品</router-link>
		<router-link to="/about">关于我们</router-link>
		<hr />
		<!-- 路由出口 -->
		<!-- 路由匹配到的组件将渲染在这里 -->
		<router-view></router-view>
	</div>
	<script type="text/javascript" src="js/vue/vue.js"></script>
	<script type="text/javascript" src="js/vue/vue-router.js"></script>
	<script type="text/javascript">
		//>>1.定义首页:组件
		var index = Vue.component("index", {
			template : "<h1>首页</h1>"
		});
		//>>2.公司产品：组件
		var product = Vue.component("product", {
			template : "<h1>公司产品</h1>"
		});
		//>>3.关于我们：组件
		var about = Vue.component("about", {
			template : "<h1>关于我们</h1>"
		});

		//>>4.创建一个路由：
		var router = new VueRouter({
			routes : [ {
				path : "/",//路由地址
				component : index
			//路由对应的资源
			}, {
				path : "/about",//路由地址
				component : about
			//路由对应的资源
			}, {
				path : "/product",
				component : product
			}, ]
		});

		//创建一个vue对象
		var app = new Vue({
			el : "#app",//挂载在app上
			router : router
		//使用路由对象
		});
	</script>

三.常用的Vue组件框架

饿了么-PC端(ElementUI)
http://element-cn.eleme.io/#/zh-CN
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，类似于easyui一样，提供了很多的ui组件。
资料下载网站：https://unpkg.com/element-ui@2.4.6/lib/

1.ElementUI入门

①：引入elementui样式
②：引入vue.js
③：引入elementui脚本

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!--elementui的css引入  -->
<link rel="stylesheet" type="text/css"
	href="js/elementui/lib/theme-chalk/index.css" />
</head>
<body>
<div id="app">
    	<!--创建一个button，绑定一个点击事件，点击后设置visible为true  -->
		<el-button @click="visible = true">Button</el-button>
		<!--绑定一个visible属性：当为true时，弹出一个dialog，
		 title:标题；
		 -->
		<el-dialog :visible.sync="visible" title="Hello world">
		   <p>Try Element</p>
		</el-dialog>
	</div>
</body>
<!-- import Vue before Element -->
<script type="text/javascript" src="js/vue/vue.min.js"></script>
<!-- import JavaScript -->
<script type="text/javascript" src="js/elementui/lib/index.js"></script>
<script>
	new Vue({
		el : '#app',//挂载在app上
		data : function() {
			return {
				visible : false
			}
		}
	})
</script>

</body>
</html>

效果：
在这里插入图片描述