vue的使用方法

❶ vue.js中怎樣用onload事件

1、創建一個Vue.js文件，在template標簽中插入div，div包裹無序列表和fusioncharts組件，其中無序列表子項元素綁定點擊事件，如下圖所示。

❷ vue 怎麼創建組件及組件使用方法

使用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: []
}
})

❸ 使用vuejs時一個方法怎麼訪問另一個方法返回的數據

具體代碼如下：

❹ 怎樣使用Vue中字元串

vue.js 中的可以實現字元串操作
主要通過兩個方法：
when()：配置路徑和參數;
otherwise：配置其他的路徑跳轉，可以想成default。
when的第二個參數：
controller：對應路徑的控制器函數，或者名稱
controllerAs：給控制器起個別名
template：對應路徑的頁面模板，會出現在ng-view處,比如"<div>xxxx</div>"
templateUrl：對應模板的路徑，比如"src/xxx.html"
resolve： 這個參數著重說下，該屬性會以鍵值對對象的形式，給路由相關的控制器綁定服務或者值。然後把執行的結果值或者對應的服務引用，注入到控制器中。如果resolve中是一個promise對象，那麼會等它執行成功後，才注入到控制器中，此時控制器會等待resolve中的執行結果。

❺ Vue新手，在組件中怎麼使用v

var vue = new Vue({ el: 'body', data: { //負責數據 myData: {}, }, ready: function () { //vue初始化完執行函數 this.test(); }, methods: { //自定義 test: function () { alert('test'); } } });

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

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

❼ vue如何動態調用方法

通常我們會在組件里的 template 屬性定義模板，或者是在 *.vue 文件里的 template 標簽里寫模板。但是有時候會需要動態生成模板的需求，例如讓用戶自定義組件模板，或者設置組件的布局。
例如要做一個類 select 的組件，用戶傳入 options 數據，通過 value prop 獲取選中值，最基本的原型如下。
Vue.component('XSelect', {
template: `
<div class="select">
<input :value="value" readonly />
<div
class="option"
v-for="option in options"
@click="value = option.value">
<span v-text="option.label"></span>
</div>
</div>`,

props: ['value','options']
})

如果此時需要增加一個 API 支持讓用戶自定義 option 部分的模板。此處用 slot 並不能解決問題。
通過 $options.template 修改
通過列印組件對象可以獲得一個信息，在 $options 里定義了一個 template 屬性，寫在 template 標簽里的模板，最終編譯後也會在 $options.template 里。通過文檔的生命周期 可以得知，在 created 的時候， 實例已經結束解析選項， 但是還沒有開始 DOM 編譯 也就是說，如果用戶通過 prop 的數據我們可以獲得，但是模板其實還沒有渲染成 DOM。經過測試，在 created 修改 this.$options.template 是可以改變最終生成的 DOM 的，同時也能拿到 props 的內容。
那麼我們可以修改下代碼，使其支持自定義模板
Vue.component('XSelect', {
props: [
'value',
'options',
{
name: 'template',
default:'<span v-text="option.label"></span>'
}
],

created() {
varoptionTpl =this.template

this.$options.template =`
<div class="select">
<input :value="value" readonly />
<div
class="option"
v-for="option in options"
@click="value = option.value">
${optionTpl}
</div>
</div>`
}
})

用戶使用是就可以傳入模板了
<x-select
:value.sync="value"
template="<span>標簽: {{ option.label }}, 值: {{ option.value }}</span>"
:options="[
{value: 1, label: 'a'},
{value: 2, label: 'b'},
{value: 3, label: 'c'}
]">
</x-select>

可能存在的問題
我們知道 Vue 在內部幫我們做了許多優化，但是在這里可能會由於某些優化導致動態拼接的模板無法渲染成功。例如這里我們不使用 v-for 而是手工遍歷 options 生成需要的 HTML
consttpl = options.map(opt =>`<div>${this.optionTpl}</div>`)

this.$options.template =`
<div class="select">
<input :value="value" readonly>
${tpl}
</div>`

這里會導致一個 BUG，如果一個頁面有多個 x-select 組件，並且 options 長度不一樣，會導致長的 options 的組件後面幾個選項渲染不出來。究其原因是 Vue 會幫我們緩存模板編譯結果。翻看代碼可以找到 vue/src/instance/internal/lifecycle.js 里有做優化，同時提供的 _linkerCachable 本意是給 內聯模板 使用。我們可以通過設置 this.$options._linkerCachable = false 達到我們的目的。
這樣我們就可以開發讓用戶自定義布局的組件了，用戶傳入布局參數，通過手工拼接模板，設置了 _linkerCachable = false 也不會被緩存。
通過 $options.partials 動態添加 partial
使用 partials 也能達到添加自定義模板的目的，但是通常的做法是要全局注冊 partial，這么做並不優雅。 vue-strap 就是這么做的。如果重名了會被覆蓋（初次渲染不會，但是數據更新重新渲染 DOM 時就會被覆蓋）。
通過文檔我們知道可以在組件內部通過 partials 屬性注冊局部的 partial，因此自然而然也可以在 this.$options.partials 去動態添加了。

❽ vue的computed怎麼使用

在模板中綁定表達式是非常便利的，但是它們實際上只用於簡單的操作。模板是為了描述視圖的結構。在模板中放入太多的邏輯會讓模板過重且難以維護。這就是為什麼 Vue.js 將綁定表達式限制為一個表達式。如果需要多於一個表達式的邏輯，應當使用**計算屬性**。

基礎例子
<div id="example"> a={{ a }}, b={{ b }} </div> var vm = new Vue({ el: '#example', data: { a: 1 }, computed: { // 一個計算屬性的 getter b: function () { // `this` 指向 vm 實例 return this.a + 1 } } })
這里我們聲明了一個計算屬性 b。我們提供的函數將用作屬性 vm.b的 getter。
console.log(vm.b) // -> 2 vm.a = 2 console.log(vm.b) // -> 3
你可以打開瀏覽器的控制台，修改 vm。vm.b 的值始終取決於 vm.a 的值。

你可以像綁定普通屬性一樣在模板中綁定計算屬性。Vue 知道 vm.b 依賴於 vm.a，因此當 vm.a 發生改變時，依賴於 vm.b 的綁定也會更新。而且最妙的是我們是聲明式地創建這種依賴關系：計算屬性的 getter 是干凈無副作用的，因此也是易於測試和理解的。

計算屬性 vs. $watch

Vue.js 提供了一個方法 $watch，它用於觀察 Vue 實例上的數據變動。當一些數據需要根據其它數據變化時， $watch 很誘人 —— 特別是如果你來自 AngularJS。不過，通常更好的辦法是使用計算屬性而不是一個命令式的 $watch 回調。考慮下面例子：
<div id="demo">{{fullName}}</div> var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' } }) vm.$watch('firstName', function (val) { this.fullName = val + ' ' + this.lastName }) vm.$watch('lastName', function (val) { this.fullName = this.firstName + ' ' + val })
上面代碼是命令式的重復的。跟計算屬性對比：
var vm = new Vue({ data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } } })
這樣更好，不是嗎？

計算 setter

計算屬性默認只是 getter，不過在需要時你也可以提供一個 setter：
// ... computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } } } // ...
現在在調用 vm.fullName = 'John Doe' 時，setter 會被調用，vm.firstName 和 vm.lastName 也會有相應更新。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

❾ 如何使用vue的use方法使用element組件

1.打開cmd，運行：vue init webpack Vue-Demo

2.運行：cd Vue-Demo進入這一級

3.運行：npm install

4.運行：npm run dev

如果瀏覽器打開之後，沒有載入出頁面，說明本地的8080 埠被佔用，需要修改一下配置文件 config/index.js

解釋：1.將 build 的路徑前綴修改為 ' ./ '（原本為 ' / '），是因為打包之後，外部引入 js 和 css 文件時，如果路

徑以 ' / ' 開頭，那麼在本地是無法找到對應文件。所以如果需要在本地打開打包後的文件，

就得修改文件路徑。

2.將埠號改為不常用的埠。

項目新建完成。

二、引入Element

1.打開cmd，在當前目錄中運行：npm i element-ui -S

2.src/main.js（紅色的）

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

Vue.config.proctionTip = false

/* eslint-disable no-new */
Vue.use(ElementUI)

new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})

3.然後在.vue文件里就直接可以用了
例如：在src/components/Hello.vue做一下修改

❿ vue updated怎麼使用

由於數據更改導致的虛擬 DOM 重新渲染和打補丁，在這之後會調用該鉤子。
當這個鉤子被調用時，組件 DOM 已經更新，所以你現在可以執行依賴於 DOM 的操作。然而在大多數情況下，你應該避免在此期間更改狀態。如果要相應狀態改變，通常最好使用計算屬性或 watcher 取而代之。
注意 updated 不會承諾所有的子組件也都一起被重繪。如果你希望等到整個視圖都重繪完畢，可以用 vm.$nextTick 替換掉 updated：
updated: function () {this.$nextTick(function () {// Code that will run only after the// entire view has been re-rendered})}