本來想這一周做一個關于vuex的總結的,但是由于朋友反應說還不知道如何用vue去寫一個組件,所以在此寫寫一篇文章來說明下如何去寫vue頁面或者組件。vue的核心思想就是組件,什么是組件呢?按照我的理解組件就是裝配頁面的零件,比如一輛車有大大小小許多零件組成,那么同樣的一個頁面,也是有許多組件構成的比如說頭部組件 按鈕組件等等,vue三大核心組件 路由 狀態管理,路由控制頁面的渲染,頁面由組件組成,數據有vuex進行管理和改變。下面我會以一個簡單的案例來說
第一步:構建一個簡單的vue項目,老規矩直接在命令行輸入
vant組件有table表格嗎?vue init webpack myproject
cd my vue
cnpm/npm install
vue實現excel表格編輯器?cnpm/npm run dev
執行結果如下
然后你會在8080端口看到vue的標志頁面
vant表單、第二步:分析目錄結構 主要是組件入口app.vue和main.js
第三步:寫頁面
我們在app.vue下這樣寫
vue elementui表格?
data () {
return {
}
},
components: {
}
}
在main.js中這樣寫
import Vue from 'vue'
import App from './App'
import Home from './pages/Home.vue'
import VueRouter from 'vue-router'
import 'bootstrap/dist/css/bootstrap.css'
Vue.use(VueRouter)
const routes = [{
path: '/',
component: Home
}]
const router = new VueRouter({
routes
})
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '',
components: { App }
})
main.js主要包括模塊導入以及組件導入和注冊,路由配置,當然路由配置可以單獨寫出來。
由上面的路由配置可以知道當path為‘/’時候,我們渲染到app.vue中的頁面為home.vue頁面,如下
export default {
data () {
return {
}
},
components: {
tableCom: table
}
}
其中import table from '../components/Hello.vue'表示導入這個table組件到home.vue頁面
但是只導入而沒有注冊這個組件是無效的,就好像定義了一個函數而沒有執行。所以我們需要注冊這個組件
也就是components:{tableCom: table}意思是自定義一個tableCom標簽來映射這個組件,但是vue規定但標簽名過長的時候,需要以分開方式去寫比如tableCom 要寫成table-com.
這樣就完成了一個組件的導入和注冊,下面我們來完成這個組件
table.vue界面如下
序號用戶名年齡畢業學校操作
{{index+1}}{{user.name}}{{user.age}}{{user.school}}removeinsertname: 'hello',
data () {
return {
user: {'name': '', 'age': '', 'school': ''},
users: [
{'name': '李磊', 'age': '25', 'school': '洛陽理工'},
{'name': '張成', 'age': '23', 'school': '桂林電子科技'},
{'name': '煉心', 'age': '22', 'school': '江西電子科技'}
]
}
},
methods: {
insert: function () {
this.users.push(this.user)
},
remove: function (index) {
this.users.splice(index, 1)
}
}
}
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
tr,th{
text-align:center;
}
這個組件實現了簡單的增刪功能,主要是對data數據的修改,我們要明白,我們平常使用的jquery只是對dom節點的操作,比如我們要改變一個數據我們就要首先獲取dom然后通過jquery的方法來獲取值,而vue則不然它是對data數據進行操作,數據雙向綁定,數據改變則視圖改變,同樣視圖改變則數據改變。
到最后我們看到的效果是這樣的
大家有什么問題可以聯系我,或者留言
大家也許也發現了這樣操作data太繁瑣,有沒有簡單的方式呢,有,那就是vuex 就像一個倉庫提供你需要的數據。下一章節我會開始對vuex的使用做個總結,希望想了解更多的朋友關注我,謝謝你們的支持。
版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。
工作时间:8:00-18:00
客服电话
电子邮件
admin@qq.com
扫码二维码
获取最新动态