vuejs組件樣式

Ⅰ 如何正確使用Vue.js的組件

正確使用Vue.js的組件：
最基本一個vue結構如下：
var vue = new Vue({
el: 'body',
data: {
//這里負責數據
myData: {},
},
ready: function () {
//這里是vue初始化完成後執行的回函數
this.test();
},
methods: {
//這里是自定義答的方法
test: function () {
alert('test');
}
}
});

Ⅱ VUE中如何構建js調用的全局組件

Vue 可以通過全局注冊來實現全局組件的功能，比如有這么一個組件 exampleComponent ，如果想把它注冊成全局組件的話，只需要在引入 Vue 的文件里調用 Vue.component('example-component',exampleComponent) 來實現，又或者如同大部分 Vue 的 ui框架 那樣，直接調用 Vue.use(/* 組件 */) 來實現。

Vue.use() 方法比 Vue.component() 要復雜些，其大致用法如下：

這兩種全局注冊組件的方法在注冊成功後都是通過使用標簽名如 <example-component></example-component> 來使用的。使用過 element 、 iview 等UI框架的朋友肯定會注意到這么一種比較特殊的組件，如 loading 和 message ，這類組件的使用場景大部分是在js執行環境時要用到，比如請求發送前要出現一個 loading 遮罩層防止用戶重復請求，請求成功後這個遮罩層又要消失掉。這種需求若是也用預先在 html 中放置對應組件標簽的形式的話，未免顯得太過麻煩。所以，為了解決這個問題，有這么一種通過調用 Vue 原型方法來調用組件的方式。如 element 中 this.$message('這是一條消息提示'); 這樣調用後在頁面上顯示一條消息提示的js方法。

不管什麼組件，其本質都是操作DOM，只不過因為直接原生操作 DOM 會對瀏覽器的開銷比較大， Vue 裡面使用了一種虛擬dom的技術來盡可能的減少這種開銷，而且操作dom雖然是一種很直觀的改變顯示效果的形式，但操作太過於繁瑣。種種原因， Vue 的基本思想就是 數據驅動DOM ，盡量不要去親手修改 DOM 。但凡事無絕對，上面所說的就是一種不操作 DOM 就難以繞開的一種便捷功能的實現。

那如何實現全局js方法調用組件的功能呢？

要實現這個目的，必須先了解兩個東西： vm.$mount 、 Vue.extend() 。

翻看官方文檔，找出了這兩者的用法如下：

上面兩個東西，簡單理解就是用 Vue 自身的方法定義一個 html 標簽，然後又用 Vue 的方法找到某個特定id的標簽，將其內容替換掉。

那麼用這兩個特性，我們來創建一個能夠自定義入參內容的 fullName 組件，它的功能是調用時，頁面出現一個半透明遮罩層，頁面中間顯示入參內容。

步驟如下：

Ⅲ 如何使用vue.js構造modal組件

使用vue.js構造modal組件的方法是使用v-model指令：

v-model指令在表單控制項元素上創建雙向數據綁定。根據控制項類型它自動選取正確的方法更新元素。

比如，多個勾選框，綁定到同一個數組：

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames | json }}</span>

new Vue({
el: '...',
data: {
checkedNames: []
}
})

輸出結果：