深入了解Vue

作者：很楠不爱3 | 2024-02-08 15:36:14

踩

深入了解vue

前言：vue基础入门篇点击进入

一、vue的组件

组件的概念;
组件(component)是vue的功能之一。可以扩展HTML元素，封装可重用的代码。它是自定义的元素，vue可以为它添加特殊功能。总之，组件是用来完成特定功能的一个自定义的HTML标签。
组件的作用
对特定功能代码(html,css,js)的封装, 通过组件的名字可以重复利用该组件中的代码.
组件的分类：
全局组件和局部组件。
在浅学vue的那一篇博客中已经详细的说明了，这里就不多做说明。
全局组件的语法:
Vue.component(“自定义标签的名字”,{配置对象})

全局组件特点：
全局组件可以在任何被挂着的标签中使用.
全局组件的配置对象中必须包含template属性
注意事项：
template中的html必须在一个标签中. 仅且只能有一个根节点.

局部组件的语法：

   var app = new Vue({
        el: "#app",
        data: {},
        components : {
            "局部组件的名字1" : {组件的配置对象}
            "局部组件的名字2" : {组件的配置对象}
        }
      });
1
2
3
4
5
6
7
8

局部组件特点：
局部组件只能够在所挂载的标签中使用.

二、模板的三种书写方式

直接写在template属性中。
如果内容很多就会非常麻烦
写在模板标签中
使用 < script>标签 ,但是必须加上 type="text/template"才能使用。

三、组件中的数据必须是函数（也就是方法）

组件中数据的定义：
语法：

语法:
      "组件的名字":{
            template: "",
            data : function(){
                return {
                  键1:值1,
                  键2:值2
                }
            }
       }
1
2
3
4
5
6
7
8
9
10

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

四、路由

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

先导入js文件
引入路由插件
代码结构图
页面展示图

五、使用Vue组件框架

饿了么-PC端 Elememt
类似于easyui一样，提供了很多的ui组件。
Element资料下载地址
 Element官网

入门

先将下载好的资源引入到项目中
引入css和js文件
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue的js文件-->
    <script src="vuejs/vue.js"></script>
    <!--引入element的样式和组件库-->
    <link rel="stylesheet" href="vuejs/element-ui/lib/theme-chalk/index.css">
    <script src="vuejs/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <!--@click:v-on点击事件的简写，点击时将visible变成true并展示出来-->
        <el-button @click="visible = true">Button</el-button>
        <el-dialog :visible.sync="visible" title="你好">
            <p>我是张三</p>
        </el-dialog>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                //false：默认不展示
                visible:false
            }
        })
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

页面展示

六、Eelement中还有页面布局、form表单、下拉框等等很多的样式，拷贝理解使用

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/69791?site