js-vue hi0a.com
view source
JavaScript
console.log('vue');
function deepCopy(o) {
return JSON.parse(JSON.stringify(o));
}
Vue.component('counter', {
data: function(){
return {count:0}
},
methods: {
countUp : function(){
this.count++;
},
},
template : '<a v-on:click="countUp">{{count}}</a>'
});
var vm = new Vue({
el: '#app',
data: {
aa:'xx',
email:'',
radio:[],
input: '',
message: 'hello!',
todos: [
{ text: 'aaaa' },
{ text: 'bbbb' },
{ text: 'cccc' },
],
events: [],
checkboxNames:[],
},
methods: {
add: function () {
var text = this.input.trim()
if (text) {
this.todos.push({ text: text })
this.input = ''
}
},
remove: function (index) {
this.todos.splice(index, 1)
},
console: function () {
console.log(this.todos);
},
change: function (e) {
console.log(this);
console.log(e);
console.log(e.targetVM);
console.log(vm.$data);
console.log(deepCopy(vm.$data));
},
},
//called when loaded
created: function(){
// GET request
var self = this;
axios.get('test.json')
.then(function (res) {
console.log(res.data);
console.log(self);
for(var i = 0; i < res.data.a.length; i++){
self.events.push(res.data.a[i]);
}
console.log(self.events);
}).catch(function (data, status, request) {
// handle error
})
},
/*
components:{
'v-item': {
template: '<input name="aaaa">{{ message }}<input name="bbbb" v-model="message">',
//コンポーネントインスタンスでは data は関数でなければならない
data: function(){
return {
text : 'xxxxx',
message : 'xxxxx',
}
}
}
}
*/
});
new Vue({
el: '#flip-list-demo',
data: {
items: [1,2,3,4,5,6,7,8,9]
},
methods: {
shuffle: function () {
this.items = _.shuffle(this.items)
}
}
});
CSS
/*
https://jp.vuejs.org/v2/guide/transitions.html
アニメーション関連
*/
.flip-list-move {
transition: transform 1s;
}
HTML
ページのソースを表示 : Ctrl+U , DevTools : F12
view-source:https://hi0a.com/demo/-js/js-vue/
ABOUT
hi0a.com 「ひまあそび」は無料で遊べるミニゲームや便利ツールを公開しています。
プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
必要な機能の関数をコピペ利用したり勉強に活用できます。
プログラムの動作サンプル結果は画面上部に出力表示されています。
環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
仕様変更、API廃止等、実験途中で動かないページもあります。