Vue组件知识整理

最新推荐文章于 2022-12-01 18:14:37 发布

White Root

最新推荐文章于 2022-12-01 18:14:37 发布

阅读量176

点赞数

分类专栏：前端文章标签： vue.js node.js

本文链接：https://blog.csdn.net/root1228544694/article/details/105498595

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Vue组件

Vue基础回顾
- Vue基本使用
- axios请求
Vue组件基础
单文件组件

Vue基础回顾

Vue基本使用

<body>
<div id="app">
    {{content}}
    <input type="button" value="改变content" @click="change_content">
</div>
</body>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            content:"hello world"
        },
        methods:{
            change_content:function () {
                this.content="hello silly dog"
            }
        }
    })
</script>

axios请求

在vue中，可以使用axios发起异步请求

axios.get(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.delete(url[, config])

axios.get(url[, config]).then(response => {
// 请求成功执行的代码
}).catch(error => {
// 请求失败时执行的代码
})

<body>
<div id="app">
    <input type="button" value="获取图书" @click="get_books">
    <table>
        <tr v-for="book in books">
            <td>{{book.id}}</td>
            <td>{{book.btitle}}</td>
            <td>{{book.bpub_date}}</td>
            <td>{{book.bread}}</td>
            <td>{{book.bcomment}}</td>
        </tr>
    </table>
</div>
</body>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            books:[]
        },
        methods:{
            get_books:function () {
                axios.get('http://127.0.0.1:8000/books')
                    .then(response=>{
                        this.books=response.data;
                    }).catch(error=>{console.log(error.response.data);
                    })
            }
        }
    })

CORS跨域请求错误

pip install django-cors-headers

#settings.py
INSTALLED_APPS = [
    'corsheaders',
]

#MIDDLEWARE中间件配置中注册中间件
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware', # 此处为注册的中间件]
    
#在settings.py中进行如下配置。
CORS_ORIGIN_ALLOW_ALL=True
CORS_ALLOW_CREDENTIALS = True  # 允许携带cookie

Vue组件基础

概念：封装可重用的代码和html页面。
使用：将组件名当做标签来使用。

基本使用

全局注册组件

全局注册的组件在任何Vue对象控制的区域中都可以进行使用。

<body>
    <div id="app">
        <!-- 使用组件时，直接将组件名当做标签使用即可 -->
        <login></login>
    </div>
</body>
<script>
    // 定义组件并注册
    Vue.component('login', {
        // login组件的模板内容
        template: '<div>登录组件内容</div>'
    });

    // 创建Vue对象
    var vm = new Vue({
        // 接管app对应的div区域
        el: "#app"
    })
</script>

局部注册组件

局部注册的组件注册到谁里面，就只能在谁里面进行使用。

<body>
    <div id="app">
        <!-- 使用组件 -->
        <login-name></login-name>
    </div>
</body>
<script>
    // 定义login组件
    var login = {
        // 定义组件的模板内容
        template: '<div>登录组件内容</div>'
    };
    // 创建Vue对象
    var vm = new Vue({
        // 接管app对应的div区域
        el: "#app",
        components: {
            // 组件名: 组件
            'login-name': login
        }
    })
</script>

组件属性

Vue组件本质上是一个Vue对象，Vue对象大多数属性组件中都有，除了el，比如：data和methods。

<body>
    <div id="app">
        <component-name></component-name>
    </div>
</body>
<script>
    // 创建组件
    var component_a = {
        template: '<div>组件属性：{{ number }}<input type="button" value="改变number" @click="change_number"></div>',
        // 组件的data选项必须是一个函数
        data: function () {
            return {
                number: 10
            }
        },
        methods: {
            change_number: function () {
                this.number = 20;
            }
        }
    };
    // 创建Vue对象
    var vm = new Vue({
        el: "#app",
        // 局部注册组件
        components: {
            "component-name": component_a
        }
    })
</script>

注意：

组件中的data必须是一个function
组件中的data和methods只能直接在组件的template中进行使用

父子组件

概念：将一个组件局部注册到另一个组件中，这两个组件就是父子组件关系。

父子组件关系
注：子组件只能在父组件的template中进行使用。

<body>
    <div id="app">
        <parent></parent>
    </div>
</body>
<script>
    // 创建组件
    var child = {
        template: '<div>子组件内容</div>'
    };

    // 创建组件
    Vue.component("parent", {
        template: '<div>父组件内容<child></child></div>',
        components: {
            "child": child
        }
    });
    // 创建Vue对象
    var vm = new Vue({
        el: "#app"
    })
</script>

父组件向子组件传数据

1. 在子组件中定义props元素，用来接收父组件传递的数据：props=['num']
2. 在父组件使用子组件时，需要进行数据的传递：<child :num='count'></child>

<body>
    <div id="app">
        <parent></parent>
    </div>
</body>
<script>
    // 创建组件
    var child = {
        template: '<div>子组件内容：{{ number }}</div>',
        props: ['number']
    };

    // 创建组件
    Vue.component("parent", {
        template: '<div>父组件内容<child :number="num"></child></div>',
        data: function () {
            return {
                num: 20
            }
        },
        components: {
            "child": child
        }
    });

    // 创建Vue对象
    var vm = new Vue({
        el: "#app"
    })
</script>

子组件向父组件传数据

1. 在子组件中通过$emit('事件名', '传递数据')触发事件，向父组件传递数据：$emit('send', 'hello!!!')
2. 在父组件中需要定义接收数据的函数：recevie_data(a)
3. 在父组件中使用子组件时，需要进行事件和接收函数之间的绑定：<child @send='recevie_data'></child>

<body>
    <div id="app">
        <parent></parent>
    </div>
</body>
<script>
    // 创建组件
    var child = {
        template: '<div>子组件内容<a href="#" @click="send_data">传递数据给父组件</a></div>',
        data: function () {
            return {
                name: 'smart'
            }
        },
        methods: {
            send_data: function () {
                // ① 触发事件
                this.$emit('send', this.name);
            }
        }
    };

    // 创建组件
    Vue.component("parent", {
        // ③ 绑定事件和接收函数
        template: '<div>父组件内容<child v-on:send="receive_data"></child></div>',
        components: {
            "child": child
        },
        methods: {
            // ② 定义接收函数
            receive_data: function (param) {
                // param: 用来接收子组件传递的数据
                alert(param);
            }
        }
    });

    // 创建Vue对象
    var vm = new Vue({
        el: "#app"
    })
</script>

单文件组件

单文件组件和单页面系统

单文件组件：将组件的html内容、script内容和css内容封装到一个单独的.vue文件中
单页面系统：使用单文件组件构建单页面系统，项目开发完成之后只有一个index.html页面

单页面系统项目

1）安装node版本管理工具nvm
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
// 更新配置
source .bashrc
注：也可不执行source .bashrc，关闭终端，重新打开即可。
2）安装最新版本的node
nvm install node
3）更新npm的安装源
npm config set registry https://registry.npm.taobao.org
4）创建项目目录
mkdir <项目目录名>
5）进入项目目录，初始化项目目录
cd <项目目录名>
npm init
6）配置package.json文件，该文件定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）
7）安装项目依赖模块
npm install

开发过程：

单页面系统中有3个最基本的文件：index.html、main.js、App.vue
- App.vue：顶级单文件组件
- index.html：首页文件
- main.js：创建Vue对象，还需要引入App.vue单文件组件
单页面项目打包
- 创建打包配置文件：webpack.config.js：打包入口文件和打包输出文件
- 打包命令：npm run build
- 只需要把打包输出js文件引入到index.html中

注：不管单页面系统中有多少个单文件组件，只要以main.js作为入口文件进行打包，就可以把所有内容打包输出文件。

多个单文件组件使用

嵌套使用

在单文件组件中导入其他的单文件组件
import Child1 from './components/Child1.vue'
import Child2 from './components/Child2.vue'

进行组件的注册
export default {
    data: function () {
        return {
          count: 10
        }
    },
    
    // 进行组件注册
    components: {
        'Child1': Child1,
        'Child2': Child2
    }
}

进行嵌套使用(把组件名当做标签)
<Child1></Child1>
<Child2></Child2>

路由使用
创建一个router.js文件，定义路由规则：指明某个path路径对应的是哪个单文件组件

export default new Router({
    routes: [
        {
            path: '/',
            component: Child1
        },
        {
            path: '/child2',
            component: Child2
        }
    ]
})

在main.js文件中导入定义好的路由规则，然后让Vue对象使用路由规则.

// 导入定义的路由规则
import router from './router/router.js'
// 创建Vue对象
new Vue({
    el: "#app",
    // 让Vue对象使用定义的路由规则
    router: router,
    // 将单文件组件的内容显示到Vue对象控制的区域中
    render: function (create) {
        return create(App)
    }
})

使用Element-ui

在main.js中引入Element-UI插件

// 引入ElementUI插件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

// 让Vue使用ElementUI插件
Vue.use(ElementUI)

vue-cli插件使用

作用：创建前端单页面系统项目，会创建主要的文件以及下载前端依赖包。
安装：npm install --global vue-cli
创建：vue init webpack <项目名>
调试运行：npm run dev

White Root

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue组件知识整理

Vue组件Vue基础回顾Vue基本使用axios请求Vue组件基础基本使用全局注册组件局部注册组件组件属性父子组件单文件组件Vue基础回顾Vue基本使用<body><div id="app"> {{content}} <input type="button" value="改变content" @click="change_content"&g...
复制链接

扫一扫