直接上手组件化开发:寻求"刺激"的”学习方法

最新推荐文章于 2024-03-13 23:33:50 发布

学习笔记666

最新推荐文章于 2024-03-13 23:33:50 发布

阅读量2.2k

点赞数 3

分类专栏： VUEJS+PHP+NODEJS实战

本文链接：https://blog.csdn.net/github_26672553/article/details/52809811

版权

VUEJS+PHP+NODEJS实战专栏收录该内容

36 篇文章 1 订阅

订阅专栏

在前面已经简单了解了Vue里的模板渲染

<div id="me">我的名字是张三</div>

加入上面这部分在其他地方也有，我们可以封装为”组件”

比如这样myanme 就是一个组件

    <div class="container">
        <myname></myname>
    </div>

3.来看看js中是怎么写的？

import Vue from "vue";

// 定义组件
let me_name = {
    template: '<div id="me">我的名字是张三</div>'
};


new Vue({
    el:".container",
    components:{"myname": me_name} // 挂载组件,myname就是组件名称
});

我们定义了一个组件，并且挂载到了模板.container 下

4.执行webpack打包，查看编译之后的结果，webapp/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
    <div class="container">
        <myname></myname>
    </div>
<script type="text/javascript" src="js/index.js?b01310963ad0f25cca1d"></script></body>
</html>

浏览器查看：
这里写图片描述

如何在组件里使用变量

// 定义组件
let me_name = {
    template: '<div id="me">我的名字是{{name}}</div>',
    data: function(){
        return {name:"jack"}
    }
};

逼格提升：把函数换成ES 2015的写法

let me_name = {
    template: '<div id="me">我的名字是{{name}}</div>',
    data: ()=>{
        return {name:"lily"}
    }
};

上面套路还是不够刺激，还是太low，还可以进一步提升逼格

如果组件多了，我们全部罗列到一个js文件里就太low了。
我们能不能把组件代码封装到外部呢？
我们首先用已有的知识来尝试一下
1、在src目录里创建一个componets文件夹
这里写图片描述
2、然后创建一个文件叫myname.js
内容如下：

export default{
    template: '<div id="me">我的名字是{{name}}</div>',
    data: ()=>{
        return {name:"王武"}
    }
}

注意：export default是ES2015的写法，是一种匿名导出方式，在import的时候名字可以随便写，import xxxxoooo from ‘my name.js’

jssrc/index.js 里如何引入？

import Vue from "vue";

// 导入myname组件
import me_name from "./../components/myname.js";

new Vue({
    el:".container",
    components:{"myname": me_name} // 挂载组件,myname就是组件名称
});

4.执行webpack打包，浏览器查看效果
这里写图片描述

如何在vuejs的组件里写css样式呢？

其vue给我们提供了独立化的封装组件的方法
1.把componets\myname.js 文件名修改为 myname.vue
内容如下：

<style>
    #me{color:red}
</style>

<template>
    <div id="me">我的名字是{{name}}</div>
</template>

<script>
    export default{
        template: '<div id="me">我的名字是{{name}}</div>',
        data: ()=>{
            return {name:"王武"}
        }
    }
</script>

2.因为文件名被修改，所以jssrc/index.js里导入的文件名也要修改：

// 导入myname组件
import me_name from "./../components/myname.vue";

3.至此，是否就OK了呢，肯定没有，因为babel并不认识.vue文件，所以我们需要安装一个loader

npm install vue-loader --save-dev

然后加入webpack配置：

{test:/\.vue$/,loader:"babel!vue",exclude:"/node_modules/"},

babel!vue, !是连接符，先执行右边，再执行左边。这里表示先用vue,再用babel转换。

4.最后执行webpack打包，浏览器查看效果:
这里写图片描述

注意：如果webpack打包的时候遇到下面错误
这里写图片描述
这是2个版本不同造成了，只需要把vue安装为相同的版本就可以解决：

npm install vue@2.0.3 --save-dev

学习笔记666

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
9
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录