Weitere ähnliche Inhalte
Ähnlich wie はじめてのVue.js (20)
はじめてのVue.js
- 9. Angular.js
app.controller("demoCtrl", [
"$scope", "$timeout", "$modal", "socketer", "authenticationSvc",
"chatRoom", function($scope, $timeout, $modal, socketer,
authenticationSvc, chatRoom) {
$scope.***
$scope.***
}]);
$scopeにいろいろくっつけていくやつ
- 10. Vue.js
var app = new Vue({
el: "#demo",
data: {
message: "Hello World"
},
methods: {
method: function(){/* 処理 */}
},
ready: function(){}
});
- 11. Vue.js
var app = new Vue({
el: “#demo", //バインド対象のElements
data: { //ビューモデルが保持するData
message: "Hello World"
},
methods: { //ビュー側で使用する関数など
method: function(){/* 処理 */}
},
ready: function(){ //初期化処理
}
});
- 14. {{}} / v-text / v-html
var app = new Vue({
data: {
hello: “<h1>Hello World</h1>"
}
});
<p>{{hello}}</p>
<p v-text="hello"></p>
<p v-html="hello"></p>
- 15. v-model
var app = new Vue({
data: {
message: "Hello World"
}
});
<p>message</p>
<input v-model="message" />
- 16. v-on
var app = new Vue({
methods: {
hogeMethod: function(e){},
fugaMethod: function(e){},
}
});
<button v-on="click: hogeMethod, keyup : fugaMethod “>
Hey
</button>
- 17. v-repeat
var app = new Vue({
data: {
users: [
{name: “hoge”, id:1002394},
{name: “fuga”, id:1001784}]
}
});
<ul>
<li v-repeat="user : users">{{user.name}}</li>
</ul>
- 18. v-show
var app = new Vue({
data: {
isDone: false
}
});
<p v-show=“!isDone">
Task A
<p>
- 22. app.controller("chatCtrl", [
"$scope", "$timeout", "$modal", "socketer", "authenticationSvc",
"chatRoom", function($scope, $timeout, $modal, socketer,
authenticationSvc, chatRoom) {
$scope.data = {
room: chatRoom.getInfo(),
lists: []
};
$scope.state = {
isTitleView: false
};
$scope.fn.information = function() {};
}
]);
参考
