Vue教程15 Vue元件

該節教程**可通過npm start執行devserver，在http://localhost:8080/檢視效果

示例**：/lesson15/src/cmp1.js

import vue from 'vue/dist/vue.esm';

// 通過vue.component註冊乙個元件
export default vue.component('cmp1', ;
},// 元件模板
template: `
姓名：}
年齡：}
`});
複製**

示例**：/lesson15/src/vm.js

也可以通過通用元件使用，is屬性為需要使用的元件名，通過改變該屬性的值，可以控制渲染的元件。

import vue from 'vue/dist/vue.esm';

import cmp1 from './cmp1';
let vm=new vue(,
// 區域性元件
// 元件可以直接引入，也可以通過通用component元件引入，當is屬性為特定元件名時，渲染相應元件。
template: `
可以嘗試輸入cmp1或my-dialog
type="text" v-model="type" />
"lee chen" age="18" :list="[1, 2, 3]" />
"type" name="lee chen" age="18" :list="[1, 2, 3]" />`})
複製**

// 例項化元件，主要用於測試

let cmp=new cmp1(
});// 生成虛擬vm物件
let vm=cmp.$mount();
// vm.$el中儲存了dom，但不渲染在頁面中
console.log(vm.$el);
// 測試**
if(vm.$el.queryselector('li').innerhtml=='88')else
複製**

在使用元件時，元件標籤內部的內容都為插槽內容。其中帶有相應name屬性的內容會被插入到插槽的位置，其餘內容會插入到預設插槽。

示例**：/lesson15/src/my-dialog.js

import vue from 'vue/dist/vue.esm';

import 'bootstrap/dist/css/bootstrap.css';
import './css/my-dialog.css';
export default vue.component('my-dialog', ;
},template: `
"panel panel-default my-dialog">
"panel-heading">
"title"/>
"panel-body">
`});
複製**

示例**：/lesson15/src/vm.js

import vue from 'vue/dist/vue.esm';

import cmp1 from './cmp1';
import mydialog from './my-dialog';
let vm=new vue(,
// 區域性元件
// 元件可以直接引入，也可以通過通用component元件引入，當is屬性為特定元件名時，渲染相應元件。
template: `
可以嘗試輸入cmp1或my-dialog
type="text" v-model="type" />
"lee chen" age="18" :list="[1, 2, 3]" />
"type" name="lee chen" age="18" :list="[1, 2, 3]" />
"title">標題
一些文字文字文字
`})複製**

1 5 Vue 表單處理

1.基礎用法 文字輸入繫結 使用v model和 實現對表單元素的雙向資料繫結 2.繫結值 選擇性框輸入繫結值 需要動態資料時，使用v bind繫結 3.修飾符 常用修飾符可以控制資料同步的時機 常用修飾符 demo 文字框h4 type text v model message change ch...

Npm 發布 Vue 元件教程

平時我們在開發的時候經常使用npm安裝各種元件。今天我們就來嘗試下製作乙個自己的元件發布到npm上。k progress npm install s k progress main.js import k progress import k progress dist k progress.css ...

Vuejs（15） Vue的非同步元件

建議使用webpack browserify在預設情況下不支援 首先上官網說明 非同步元件 雖然說明是沒問題的，但是示例中的寫法怪怪的，不符合一般新手學習者在實際使用中的習慣。嗯，換句話說，這段 告訴你，通過這種方式引入非同步元件，然後他漏掉了一些內容，比如說賦值，如何使用之類。官方示例 vue.c...