怎麼在vue中寫方法

1. vue中符號的寫法問題

你第一個 `` 是es6的語法 用於拼接字元串的 裡面的變數則用${xxx} 表示
第二個用的話只能'xxx'+變數+'xxx' 用加號拼接

2. vue怎麼在方法裡面寫循環

export default{ data(){ return { } }, mounted: function () { myfun("myCls",/*這里傳入每次數據 */); } } li循環重復多次，每個li上都綁定有一個myfun這個方法，並且每個myfun內部傳入的數據都不同，比如我想實現跟以下代碼一樣的效果：

3. vue中關於屬性和方法客戶端代碼怎麼寫

直接寫就行了。 如果需要傳入變數，則寫成： vue中用v-bind:屬性名="屬性值" 的方式動態設置屬性，注意屬性值的引號內不要加{{}}

4. .vue文件怎麼寫js代碼

單個組件裡面可以使用import $ from 'jquery' 引用

當前你得使用npm把jquery 安裝了。 把jquery 用exportdefault 導出來(就是在jquery.js的最後一行寫上 exportdefault $)， 然後使用import $ from 『jquery的文件地址』

至於 script標簽裡面怎麼寫

import$from'jquery'
exportdefault{
data:function(){
return{
testData:1//這個對象裡面定義所有的變數這些變數可以在html直接和dom綁定
}
},
mounted:function(){
//生命周期函數，有好幾個執行的順序都不一樣，可以根據場景選擇不同的生命周期函數這塊一般是初始化數據的地方
},
methods:{//這里寫所有的方法，這些方法可以在方法內部使用this.方法名調用，也可以在html中使用@時間名=『函數名()』調用
init(){
//實例方法
//使用this.變數可以訪問data中的變數
console.log(this.testData)
}
}
}

5. vue中如何書寫函數式代碼

子組件向父組件傳值，為了增加回調函數的復用性，事件綁定採用函數式編程，但是總是不能正確調用實例方法返回的函數：
1
2
3
4
5
6
7
8
9
10
11
12
13
<slideDown :choosestyle="chooseStyle"
:useroptions="useroptions1"
@changeSubData="receiveData(prodMoneyOff)"
></slideDown>
data () { message: { prodMoneyOff: ''
}
}, methods: {
receiveData (item) { let _self = this
console.log(`選擇的item是${item}`) return function (val) { console.log(`傳遞的值是 ${val}`)
_self.message[item] = val
}
}
}

6. VUE中在方法里寫的button按鈕對應的方法怎麼寫啊

var vm = new Vue({
el:"#main",
seen: true,
data:{
enlist: "",
status: "",
},
created:function(){
this.get_data();
},
methods:{
get_data:function(){
var _self=this;
var idArray = window.location.pathname.split("/");
var id = idArray['5'];
$.post("{:url('/enlist/index/details')}",{enlist:id},function(e){
console.log(e);
_self.enlist = e;
_self.status = e.recorde;
})
},
recruitment:function(){
var idArray = window.location.pathname.split("/");
var id = idArray['5'];
window.location.href="/enlist/index/entry_form/enlist/"+id;
}
}
});
方法名就寫在methods裡面，例如<button @click="recruitment()"></button>就是調用的上面recruitment方法；

7. vue怎麼在組件里寫methods

作用域：它是指對某一變數和方法具有訪問許可權的代碼空間,在JS中,作用域是在函數中維護的。表示變數或函數起作用的區域，指代了它們在什麼樣的上下文中執行，亦即上下文執行環境。Javascript的作用域只有兩種：全局作用域和本地作用域，本地作用域是按照函數來區分的。閉包：在js中的我的理解就是函數嵌套函數，當內部函數在定義它的作用域的外部被引用時,就創建了該內部函數的閉包,如果內部函數引用了位於外部函數的變數,當外部函數調用完畢後,這些變數在內存不會被釋放,因為閉包需要它們.使用閉包要注意：1）由於閉包會使得函數中的變數都被保存在內存中，內存消耗很大，所以不能濫用閉包，否則會造成網頁的性能問題，在IE中可能導致內存泄露。解決方法是，在退出函數之前，將不使用的局部變數全部刪除。2）閉包會在父函數外部，改變父函數內部變數的值。所以，如果你把父函數當作對象（object）使用，把閉包當作它的公用方法（PublicMethod），把內部變數當作它的私有屬性（privatevalue），這時一定要小心，不要隨便改變父函數內部變數的值。

8. vuePress裡面怎麼寫vue.js代碼

2.1 新建文件夾docs

配置package.json，添加下述兩行

{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}}

進入docs文件夾 創建 README.md文件

此時運行命令

npm run docs:dev

此時文件夾結構

study
+--docs
+----README.md
+--package.json

運行訪問http://localhost:8080/

image.png

結束運行 ，執行命令

npm run docs:build

然後看文件變化 多了個node_moles
docs 多了個 .vuepress文件夾

study+--docs+----.vuepress+------ dist //打包後的文件夾+----README.md+--package.json+--node_moles

我們在.vuepress 創建
config.js 文件
添加

mole.exports = {
title: 'Adroi媒體API 介面文檔', // 設置網站標題
description : 'Adroi',
base : '/v1/adroi-h5/adroiapi/',
themeConfig : {
nav : [
{ text: '介面定義', link: '/apiword' },
{ text: '介面欄位定義', link: '/api' },
{ text: '附錄：錯誤碼', link: '/error' }
],
sidebar: {
'/' : [
"/", //指的是根目錄的md文件 也就是 README.md 裡面的內容
"apiword", 根目錄創建 apiword.md文件 "api",根目錄創建 api.md文件 "error" 根目錄創建 error.md文件 ]
},
sidebarDepth : 2
}}

image.png

3）添加靜態圖片


4)添加指定樣式

添加樣式 分兩種 一種不用預編譯處理、一種使用

//不使用預編譯處理//直接在md文件底部添上<style></style>

//使用預編譯處理
首先需要安裝所需的模塊 舉例：stylus
npm i stylus stylus-loader -D<style lang="stylus"></style>

5)vuePress可添加js代碼

既然是尤大大的作品 那肯定是支持vue語法的
在MD文件中直接寫入js的語法

<script>
export default{
//...do something
}</script>

6)代碼發布或上傳至伺服器

關於發布問題：首先我們知道在打包後的文件都是靜態文件之前的MD文件都被打包成html靜態文件了,其次在文件config.js中 base至關重要

6-1發布在雲盤中如網路雲盤 github上可直接通過鏈接訪問

在雲盤上創建根目錄如vuepress，然後在config中 bese這部分就填寫/vuepress,然後進行打包操作，再然後把打包後的文件上傳至雲盤上的vuepress文件中

6-2 通過伺服器發布

在伺服器上安裝Apache或者nginx 這里拿nginx舉例：
至於nginx 安裝 以及配置文件的解讀使用 我這里就不詳述了，不了解的童鞋可以自己查閱相關文件

同樣base的填寫很重要

//為了簡單明了 我們把打包好的文件放入nginx中html文件下 之前的文件可以清空server {
listen 8081; //監聽8081埠
server_name localhost; //localhost:8081即可指向也可寫別名如local.vuepress.com.cn 那我們訪問這個埠的別名加埠就可以
location / {
root /nginx/nginx-1.9.15/html; //至關重要你的入口文件在本機的位置
index index.html index.htm; //入口文件
}
}

轉載於：https://www.jianshu.com/p/7a2cc8a7f40c

9. 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 去動態添加了。

10. 怎樣在vue中編寫出能生效的css代碼

你的 .h1是一個類了，此時你需要在上邊h1標簽裡面加上 calss=「h1」，這樣你的.h1就能生效了；但是看你的寫法是想直接控制標簽，那麼你只需要把 .h1的 . 去掉就行了，標簽直接寫就可以了，不用帶「.」。