iview大体上可以分为两种使用方式:
1,直接使用script引用iview的js。
2,使用iview提供的脚手架。
第一种方式使用iview和vue比较简单,适合刚上手vue和iview的小伙伴。
<!-- 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>
当然引用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的方法了。这种方法虽然简单但并不是推荐的。
iview推荐的是使用vue脚手架iview入门实战。