script引用vue，iview入门实战

最新推荐文章于 2022-01-25 18:18:56 发布

我的小熊不见了

最新推荐文章于 2022-01-25 18:18:56 发布

阅读量4.6k

点赞数 1

分类专栏： vue 文章标签： script vue iview 实战

本文链接：https://blog.csdn.net/qq1311256696/article/details/80855416

版权

vue 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

iview大体上可以分为两种使用方式：

1，直接使用script引用iview的js。

2，使用iview提供的脚手架。

第一种方式使用iview和vue比较简单，适合刚上手vue和iview以及想体验vue特性但是又不想搭建webpack的小伙伴。

<!-- import Vue.js -->

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<!-- import stylesheet -->

<link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">

<!-- import iView -->

<script src="//unpkg.com/iview/dist/iview.min.js"></script>

当然引用js之后，对于iview的组件使用方式和iview的写法略有不同，大概就是组件的第一个大写变成小写然后后面跟一个‘-’。

如果不想引用别人的资源或者希望在没有网络的环境下也能使用，可以单独下载vue.js和iview.js。放到你自己的项目中就可以了。

在引入相关的js之后，就是创建我们的html模板了。

<div id='test'>
    <i-button :type="" :title="" v-text="删除" @click="clickme"></i-button>
    <i-modal v-model="showDel" title="删除" @on-ok="confirmDel">
        <p>
            删除后数据将无法恢复！确定删除吗？
        </p>
    </i-modal>
<div>

这是简单的按钮和弹出框。接下来在<script></script>之间写js代码。当然也可以新建一个js放js代码。

new Vue({
        el: '#test',
        data: {
            
        },
        mounted: function () {
            this.init();
           
        },
        methods: {
            init(){},
            clickme(){}
        }
    })

这就是初始化vue对象的代码了。在data里写你需要用到的数据，mounted在vue生命周期中是在created和beforeMount之后，created的时候数据已经和data属性进行绑定（放在data中的属性当值发生改变的同时，视图也会改变）。

el中必须写你想要为哪一段html代码初始化vue。你也可以在一个html中初始化多个vue对象，当然这没有必要。

简单来说mounted是挂载vue数据的。

methods中写用到的各种方法了。比如点击事件的方法就会写在methods中。方法之间的调用记得用this.方法名。

这就是简单的script使用iview的方法了。这种方法虽然简单但并不是推荐的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- import Vue.js -->

    <script src="//vuejs.org/js/vue.min.js"></script>

    <!-- import stylesheet -->

    <link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">

    <!-- import iView -->

    <script src="//unpkg.com/iview/dist/iview.min.js"></script>
</head>
<body>
<div id='test'>
    <i-button :type="" :title="" v-text="删除" @click="clickme"></i-button>
    <div @click="clickme">按钮不好使就点我</div>
    <i-modal v-model="showDel" title="删除" @on-ok="confirmDel">
        <p>
            删除后数据将无法恢复！确定删除吗？
        </p>
    </i-modal>
<div>
<script type="text/javascript">
	new Vue({
        el: '#test',
        data: {
            
        },
        mounted: function () {
            this.init();
           
        },
        methods: {
            init(){},
            clickme(){}
        }
    })
</script>

</body>
</html>

vue.js下载

iview推荐的是使用vue脚手架iview入门实战。

我的小熊不见了

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
script引用vue，iview入门实战

iview大体上可以分为两种使用方式：1，直接使用script引用iview的js。2，使用iview提供的脚手架。第一种方式使用iview和vue比较简单，适合刚上手vue和iview以及想体验vue特性但是又不想搭建webpack的小伙伴。<script src="https://cdn.jsdelivr.ne...
复制链接

扫一扫

专栏目录