vue入門ノート04テンプレート文法_インストラクション
テンプレート構文_インストラクション
index.html
index.html
<div id="app">
<p v-if="arrar.length == 9">{{mes}}</p>
<p v-else="">" ... .. ."</p>
<a href="https://www.google.com">google </a>
<a v-bind:href="google">google </a>
<button v-on:click="btnClick">btnClick</button>
<input type="text" v-on:keydown="keydown"/>
<input type="text" v-on:keydown.37="keydow37"/>
<a v-bind:href="google" v-on:click.prevent="showPage">google AAAAA </a>
<p> </p>
</div>
<!-- ， -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"/>
<script>
new Vue({
el:"#app",
data:{ //
mes:" vuew",
arrar:[0,1,2,3,4,5,6,7,8,9],
google:"https://www.google.com",
},
methods:{//
btnClick:function(){
console.log("btnClick");
},
keydown:function(event){
let e = window.event || event;
console.log("keydown: "+e.keyCode);
},
keydow37:function() {
console.log("Keycode 37 down");
},
showPage:function () {
// mui.alert('message','title','btnValue',function (e) {
// e.index
// },'div')
alert(" i");
},
showPage01:function(){
alert(" ");
}
},
components:{
}
})
</script>
</code></pre>
<p> </p>
<p> </p>
<p> </p>
<p><strong> ：</strong></p>
<p> 1. <strong>Vue </strong>： (Directives) <code>v-</code> 。 </p>
<p> v-if</p>
<p> v-else</p>
<p> </p>
<p> v-bind : <span style="color:#3399ea;"> </span> <a v-bind:href="google">google </a></p>
<p> <span style="color:#3399ea;"> </span> <a :href="google">google </a></p>
<p> </p>
<p> v-on :<span style="color:#3399ea;"> </span> <button v-on:click="btnClick">btnClick</button></p>
<p> <span style="color:#3399ea;"> </span> <button>btnClick</button></p>
<p> </p>
<p> </p>
</div>
</div>
</div>
</div>