先端Vue基礎学習
44805 ワード
Vueベース
vueとの簡潔明瞭な干物の分かち合いに対して、白さんが勉強して見るのに適しています.もし書き間違えたり、もっと知りたいことがあれば、筆者に伝言を残してください.その後も分かち合います.ゼロから始まるvueに関する経験はもちろん、vueプロジェクトを構築したことがない場合は、筆者のもう一つの博文vue入門レベルのチュートリアルを見てください.ゼロからvueプロジェクトを構築します. vueインスタンス を作成する補間構文 条件レンダリング リストレンダリング イベント処理 cssとstyleのバインド フォームの入力とバインド 次のvueのコンポーネントと通信を表示
vueとの簡潔明瞭な干物の分かち合いに対して、白さんが勉強して見るのに適しています.もし書き間違えたり、もっと知りたいことがあれば、筆者に伝言を残してください.その後も分かち合います.ゼロから始まるvueに関する経験はもちろん、vueプロジェクトを構築したことがない場合は、筆者のもう一つの博文vue入門レベルのチュートリアルを見てください.ゼロからvueプロジェクトを構築します.
<div id="app"></div>
const vm = new Vue({
el:'app',
data:{
}
})
<!--
，
xss -->
<div id="box">
{{name}}
<p> {{20>30?' ':' '}}</p>
<p>{{10+20}}</p>
<!-- v-html -->
<p v-html="name"></p>
<p v-if="isShow"> </p>
<p v-show="isShow"> </p>
<!--
v
v-bind ：class = :class//
v-on click = @click//
v-if isShow true, ，false
v-show .... ，...,
-->
<button v-on:click="handleClick"> </button>
<p v-bind:class="isShow?'aa':'bb'"></p>
</div>
<script>
var vm = new Vue({
el:"#box",
data:{
name:"xiaoming",
isShow:true,
},
methods:{
handleClick(){
console.log(11);
this.isShow=false;
}
}
})
</script>
<body>
<div id="box">
<p v-if="isCreated"> </p>
<p v-else>qqq</p>
<!-- template -->
<template v-if="isCreated">
<p>ddddd</p>
<p>ddddd</p>
<p>ddddd</p>
<p>ddddd</p>
<p>ddddd</p>
</template>
<!-- v-show template -->
<p v-show="isShow"> </p>
</div>
</body>
<script src="../vue.js"></script>
<script>
const vm = new Vue({
el:"#box",
data:{
isCreated:true
}
})
</script>
body>
<div id="box">
<!-- v-for ， in/of 2 （data ，index ） -->
<!-- key id -->
<!-- ， -->
<!-- vue.set(vm.datalist,0,newvalue)-->
<input type="text" v-model="mytext">
<!-- -->
<ul>
<!-- <li v-for="(data,index) in datalist" :key="index">
{{data}} -- {{index}}
</li> -->
<li v-for="(data,index) in cmputeddatalist" :key="index">
{{data}} -- {{index}}
</li>
</ul>
</div>
</body>
<script src="../vue.js"></script>
<script>
const vm = new Vue({
el:"#box",
data:{
datalist:['aa','bb','ccc'],
mytext:"",
},
cmputed:{
cmputeddatalist:function(){
return this.datalist.filter(item=>item.indexof(this.mytext)>-1)
}
}
})
</script>
<div id="box">
<!-- ： -->
<p>{{count}}</p>
<button @click="count=count-1">-</button>
<button @click="count=count+1">+</button>
<!-- ： , -->
<p>{{name}}</p>
<button @click="handleClick">click</button>
<!-- ： $event -->
<button @click="handleClick1(1,2,$event)">click</button>
<!-- vue click.stop-->
<!-- .stop prevent once self , .stop.prevent -->
<ul @click="ulclick ">
<li @click="liclick">1111</li>
</ul>
<!-- enter ，space -->
<input type="text" v-model="text" @keydown.enter="enter">{{newtext}}
</div>
<script src="../vue.js"></script>
<script>
var vm =new Vue({
el:"#box",
data:{
count:1,
name:"xiaoming",
text:"",
newtext:""
},
// methods ， this $options.methods ，
methods:{
enter(){
this.newtext=this.text
},
handleClick(ev){
console.log(ev.target);
this.name="aaaa"
},
handleClick1(a,b,event){
console.log(a,b,event.target)
},
ulclick(){
console.log('ul ')
},
liclick(){
console.log('li ')
}
}
})
</script>
<style>
.aa{
background: red;
}
.bb{
background: yellow;
}
</style>
</head>
<body>
<!-- class -->
<!-- v-bind ， ， -->
<div id="app">
<p class="red" :class="isshow?'aa':'bb'">css </p>
<p :style="obj"> </p>
<p :style="[obj,obj2]"> </p>
</div>
<script src="../vue.js"></script>
<script>
const vm = new Vue({
el:"#app",
data:{
isshow:false,
obj:{
background:"red",
},
obj2:{
fontSize:"30px"
}
}
})
// vue font-size:30px, fontSize:"30px";
</script>
<body>
<!-- v-model value value, checked -->
<div id="box">
<input type="text" v-model="value">{{value}}<br/>
<input type="checkbox" v-model="isChcked">{{isChcked}}<br/>
<!-- ， value ， -->
<input type="checkbox" v-model="checkgroup" value="react">react<br/>
<input type="checkbox" v-model="checkgroup" value="vue">vue<br/>
<input type="checkbox" v-model="checkgroup" value="jquery">jquery<br/>
{{checkgroup}}
<!-- lazy ,number number trim -->
<input type="text" v-model.lazy="name">{{name}}<br/>
<input type="number" v-model.number="age">{{age}}<br/>
<input type="text" v-model.trim="text">|{{text}}|<br/>
</div>
</body>
<script src="../vue.js"></script>
<script>
const vm = new Vue({
el:"#box",
data:{
value:"",
isChcked:false,
checkgroup:[],
name:"",
age:"100",
text:""
}
})
</script>