callback function を利用します。 thisを利用する場合はアロー関数で記述してthisを固定しましょう。
submit() {
this.$emit('submit', () => this.closeDialog())
},
async submit(closeDialog) {
await this.foo1();
await this.foo2();
closeDialog()
}
パラメーターは param , query で渡す方法がありますが、直接 query で渡したい場合(あまりないですが。。。)
<router-link to="/mypage">マイページ</router-link>
↓
<router-link :to="{ path: '/mypage', query: { plan: 'private' }}">
マイページ
</router-link>
<div id="app"></div>
<!-- 外部からVue.jsのメソッドを実行する -->
<script>
document.querySelector('#app').__vue__.testMethod();
</script>
index.html
<div id="app"
my-option='{ "styles": { "td":"width" } }'
>
main.js
const myOption = JSON.parse(this.$el.getAttribute('my-option'));
index.html に 渡したい引数をセット
<div id="app" arg1="hoge" arg2="fuga"></div>></div>
new Vue({
render: h => h(App),
).$mount('#app')
↓ このように書き換えます
new Vue({
render: function(createElement) {
const arg1 = this.$el.getAttribute('arg1')
alert( arg1 );
return createElement(App,
{
props: {
arg1: arg1
}
})
}
}).$mount('#app')
export default {
name: 'App',
components: {
MyComponent ,
},
props: {
arg1: {
type: String,
required: true,
} ,
},
created: function () {
alert( 'App.vue : ' + this.arg1 );
},
}
touch vue.config.js
例: sample-app.js のような命名になります。
module.exports = {
configureWebpack: {
output: {
filename: 'sample-[name].js',
chunkFilename: 'sample-[name].js'
}
},
css: {
extract: {
filename: 'sample-[name].css',
chunkFilename: 'sample-[name].css'
},
},
}
npm run build
必ず value という名前で作成しましょう
export default {
props: {
value: {
type: String,
required: true
}
}
}
export default {
computed: {
inputValue: {
get() {
return this.value;
},
set(value) {
this.$emit('input', value);
}
}
} ,
}
$emitの書式は
$emit( '任意のイベント名' )
です。
<input type="text" v-model="inputValue" />
以上です。
<my-component v-model="item.content.value"></my-component>
引用: https://b1tblog.com/2019/10/17/vue-vscode-addons/
・補足1. v-model とは何か? (答: 次の書式のシンタックスシュガーです)
<input type="text" v-model="value">
↓ 同じ
<input type="text" :value="value" @input="e => value = e.target.value">
・「htmlタグのvalue」 に 変数 value の値をセットします。
・inputイベントに無名関数をセットしてその中で 変数valueに「htmlタグのvalue」をセットします。
なお、自動で付与されるイベントはhtmlタグによって異なります。
テキストと複数行テキストは、value プロパティと input イベントを使用します
チェックボックスとラジオボタンは、checked プロパティと change イベントを使用します
選択フィールドは、value プロパティと change イベントを使用します
・補足2. v-model="xxxxx" で指定する xxxxx はどこで宣言するのか?
data または computed(get() ,set() 両方指定)で宣言します。
同名で両方存在するときは data が使用されるので、同じ名前をつけるのはやめておきましょう(ややこしい)
data で変数 hoge を定義しておく
data(){
return {
hoge: 1 ,
}
},
computed で変数 hoge を定義しておく
ゲッター(アクセサ)、セッター(ミューテータ) 、両方定義しておきましょう。
computed: {
hoge: {
get() {
return this.$store.state.myState.hoge;
},
set(value) {
const key = 'hoge';
this.$store.commit('myState',[key,value]);
}
}
},
https://v3.ja.vuejs.org/guide/migration/v-model.html#はじめに
2.x では、コンポーネントで v-model を使うことは、value プロパティを渡して input イベントを発火することと同じでした。
<ChildComponent v-model="pageTitle" />
<!-- これは下記の省略形です -->
<ChildComponent :value="pageTitle" @input="pageTitle = $event" />
インストール
yarn add vuedraggable
cssがめんどくさい場合は bootstrapも入れておきましょう
yarn add bootstrap-vue
コレクションの操作がめんどくさい場合は lodashも入れておきましょう
yarn add lodash
yarn add @types/lodash
xhr を使用するときは axios も入れておきましょう
yarn add axios
main.js に 以下も追加します
import Axios from 'axios'
Vue.use(Axios)
mkdir src/types
vi src/types/vuedraggable.d.ts
src/types/vuedraggable.d.ts
declare module 'vuedraggable'
コピーをさせたいリストを次のように変更します
<draggable
group="items"
>
↓
<draggable
:group="{ name: 'items', pull: 'clone', put: false }"
>
<template v-if="data == 'aaa' ">
<img src="cool-img" alt="awesome">
<h1>AAA</h1>
<p>Cool Text AAA</p>
</template>
<template v-else-if="data == 'bbb' ">
<img src="cool-img" alt="awesome">
<h1>BBB</h1>
<p>Cool Text BBB</p>
</template>
npm install --global @vue/cli
一度ターミナルを再起動してから
バージョンの確認
vue -V
@vue/cli 4.5.11
vue create my-project-name
Typescript を利用するために Manually select features を選択します。
cd my-project-name
npm run serve
dist フォルダにビルド結果が出力されます
npm run build
vue 2 の場合は
vue.config.js
module.exports = {
publicPath: './'
}
vue 3 の場合は
vue.config.js
module.exports = {
baseUrl: './'
}
クラスコンポーネントのがおすすめですが、こちらを参考に決定するといいでしょう。↓
https://zenn.dev/kata_n/articles/233ee8e03c5cb1
https://qiita.com/aLiz/items/5f7cab2b86116b496586
https://meetup-jp.toast.com/1843
基本形
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Component, Vue } from 'nuxt-property-decorator' // nuxtの場合
@Component
export default class extends Vue {
}
</script>
あとは、こちらを参考に。
https://qiita.com/ryo2132/items/4d43209ea89ad1297426#created-mounted-updated-destroyed-etc
これはオブジェクトが undefined なのに、オブジェクトのメンバ変数にアクセスしようとした時によくおこります。
次のようにあらかじめ存在チェックを入れて回避しましょう。
{{ props.row.client.tel }}
↓ ( v-if を使って props.row.client の存在を確認する )
<span v-if="props.row.client">{{ props.row.client.tel }}</span>
(例: projects の中身が3つ以上ある場合 )
<li v-if="props.row.projects.length > 2">
↓ エラーが出る場合はこのように書き換えます
<li v-if="props.row.projects && props.row.projects.length > 2">
npm install -g yarn
プロジェクト名を mysite としています。
yarn create nuxt-app mysite
cd mysite
yarn dev
http://localhost:3000/
でサイトにアクセスできるようになります。
pages ディレクトリの中に works ディレクトリを作成して 1001.vue を次の内容で保存します。
<template>
<div>
アイウエオ
</div>
</template>
http://localhost:3000/works/1001
でアクセスできるようになります。
yarn generate
dist/ ディレクトリが作成されてそこに書き出されます。
<div v-html="my_calc(props.row.sum_no)"></div>
↑
props.row.sum_no を my_calc メソッドを通した結果を エスケープせずに表示します
<span v-html="rawHtml"></span>
↑
この span のコンテンツは rawHtml プロパティの値に置き換えられ、プレーンな HTML として解釈されます。
http://haixing-hu.github.io/vue-html-editor/
jQueryのsummer note の vue.js移植版
[v-cloak] {
display: none;
}
<div v-cloak>
これだけでレンダリング前は非表示にして、レンダリング後に自動的に表示されるようになります。
<transition-group>
<div v-for="v,i in data_loop" :key="v.id">
(% v.tanto_name %)
</div>
</transition-group>
↓ これはレンダリングするとこのようになります
<span>
<div>担当者A</div>
<div>担当者B</div>
<div>担当者C</div>
</span>
transition-group タグが span タグ に変わります
任意のタグにするには
<transition-group>
↓
<transition-group tag="div">
とします。(div タグになります)
.v-enter-active, .v-leave-active {
transition: opacity 1s;
}
.v-enter, .v-leave-to {
opacity: 0;
}
以上で vue.js のデータを削除した時にアニメーションがつけられます。 簡単ですね。
拡張は色々できます。
数字に3桁ごとにカンマをつけるフィルター「number_format」を作成する
Vue.filter('number_format', function (value) {
if (! value) { return false; }
return value.toString().replace( /([0-9]+?)(?=(?:[0-9]{3})+$)/g , '$1,' );
});
よくあるテンプレートのフィルターと同じ書き方で使えます。
{{ props.row.price_with_shipping_no|number_format }}
{{ 123456789 | number_format }}