vue.js
-------------------------hello vue!---------------------------------
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title></title>
</head>
<body>
<div id="only">
{{xiaoxi}}
</div>
</body>
<script type="text/javascript">
var myvue = new Vue({
el:'#only',
data:{
xiaoxi:'hello vue'
}
})
</script>
</html>
---------------------v-bind(v的指令)----------------------------
<div id="demo">
<span v-bind:title="xiaoxi">
鼠标悬停查看效果！
</span>
</div>
<script type="text/javascript">
var mydemo = new Vue({
el:'#demo',
data:{
xiaoxi:'页面加载于：' + new date().toLocaleString()
}
})
</script>
---------------------------v-if----------------------------------
<div id="only">
<span v-if="xiaoxi">
如果是true就显示！
</span>
</div>
<script type="text/javascript">
var mydemo = new Vue({
el:'#only',
data:{
xiaoxi:true
}
})
</script>
---------------v-for----------------------------------
<div id="only">
<ul>
<li v-for="item in array">
{{ item.text }}
</li>
</ul>
</div>
<script type="text/javascript">
var mydemo = new Vue({
el:'#only',
data:{
array:[
{ text:'1' },
{ text:'2' },
{ text:'3' }
]
}
})
</script>
或者
<div id="only">
<ul>
<li v-for="item in array">
{{ item}}
</li>
</ul>
</div>
<script type="text/javascript">
var mydemo = new Vue({
el:'#only',
data:{
array:[ "1","2","3" ]
}
})
</script>
-----------------------v-on----------------------------
<div id="only">
<span>
{{ xiaoxi }}
<span>
<input type="button" value="点击" v-on:click="dj" />
</div>
<script type="text/javascript">
var demo = new Vue({
el:"#only",
data:{
xiaoxi:"abcdefg"
}
methods:{
dj:function(){
this.xiaoxi = this.xiaoxi.split('').reverse().join('')
}
}
})
</script>
---------------------v-model（v-model:value）------------------------
<div id="only">
<p>
{{xiaoxi}}
</p>
<input type="text" v-model:"xiaoxi" />
</div>
<scirpt type="text/javascript">
var demo = new Vue({
el:'#only',
data:{
xiaoxi:''
}
})
</script>
---------------------v-bind:class-------------------------------
<style type="text/css">
.c1{
background-color: red;
}
.c2{
background-color: green;
}
</style>
<div id="only">
<span v-bind:class="isactive ? c1 : c2">
123321
</span>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#only',
data:{
isactive:true,
c1:'c1',
c2:'c2'
}
})
</script>
---------------------v-bind:style----------------------------------
<div id="only">
<span v-bind:style="instyle">
123321
</span>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#only',
data:{
instyle:{
backgroundColor:'red',
fontSize:'25px'
}
}
})
</script>
--------------Vue.component（定义全局自定义组件）/ template（自定义组件最后返回的内容）--------------------
<div id="only">
<zdy-button></zdy-button>
</div>
<script type="text/javascript">
Vue.component('zdy-button',{
data:function(){
return{
zdy:'自定义组件'
}
},
template:'<button>{{zdy}}</button>'
})
new Vue({el:'#only'})
</script>
---------------------------定义局部自定义组件--------------------------------
<div id="only">
<zdy-button></zdy-button>
<zdy-button></zdy-button>
</div>
<div id="only2">
<zdy-button></zdy-button>
</div>
<script type="text/javascript">
Vue.component('zdy-button',{
template:'<p>全局自定义组件</p>'
})
new Vue({el:'#only'});
var vm = new Vue({
el:'#only2',
components:{
'zdy-button':{
template:'<p><b>局部自定义组件</b></p>'
}
}
})
</script>
---------------------------自定义组件嵌套（<slot />）--------------------------
<div id="only">
<zdy-head>
<button slot="left">左</button>
<zdy-title></zdy-title>
<button slot="right">右</button>
</zdy-head>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#only',
components:{
'zdy-head':{
template:'<div> <slot name="left" /> 局部自定义head<slot /> <slot name="right" /></div>'
},
'zdy-title':{
template:'<h2> 局部自定义title </h2>'
}
}
})
</script>
-------------------------组件动态切换-----------------------------------
<div id="only">
<button v-on:click="dj(1)">第1项</button>
<button v-on:click="dj(2)">第2项</button>
<button v-on:click="dj(3)">第3项</button>
<keep-alive>
<component v-bind:is="nowindex"></component>
</keep-alive>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#only',
data:{
nowindex:'indexone'
},
components:{
indexone:{
template:'<div>组件1:<input type="text" /></div>'
},
indextwo:{
template:'<div>组件2:<input type="text" /></div>'
},
indexthree:{
template:'<div>组件3:<input type="text" /></div>'
}
},
methods:{
dj:function(index){
if(index == 1){
this.nowindex = 'indexone'
}else if(index == 2){
this.nowindex = 'indextwo'
}else if(index == 3){
this.nowindex = 'indexthree'
}
}
}
})
</script>
（ps：<keep-alive></keep-alive>可以保留用户对组件的输入值）
---------------------------------------------
浙公网安备 33010602011771号