1,使用vue
vue只有一个js文件,像引入jq一样引入就行了
2,数据绑定
<div id=”app”>{{msg}}</div>
<script>
var app=new Vue({
el:”#app”,
data:{
msg:”hello vue !”,
}
})
</script>
3,绑定属性
<span v-bind:title=”msg”></span>
4,隐藏元素
<span v-if=”seen”>我不见了</span>
var app=new Vue({
el:”#app”,
data:{
seen:false,
}
})
5,循环
<p v-for=”el in arr”>{{e.age}}</p>
var app=new Vue({
el:”#app”,
data:{
arr:[
{age:12},
{age:12},
{age:12},
{age:12},
]
}
})
6,点击事件绑定
<p v-on:click=”m1”>点我</p>
var app=new Vue({
el:”#app”,
data:{
msg:”hhhh”,
}
methods:{
m1:function(){
alert(this.msg);
}
}
})
7,双向绑定
<input type=”text” v-model=”msg” />{{msg}}
var app=new Vue({
el:”#app”,
data:{
msg:”kkk”,
}
})
8,自定义组件
1,简单模板
<com1></com1>
Vue.component(“com1”,{
template:”<p>我是一个模板</p>”
})
2,带参数的模板
<com1 v-bind:pro=”kk”></com1>
Vue.component(“com1”,{
prop:”pro”,
templete:”<p>{{pro}}</p>”
})
var app=new Vue({
el:”#app”,
data:{
kk:”kk123”,
}
})