vue-表单操作-循环操作
2016-11-29 本文已影响0人
嘬烟盒的程序员
框架：mvvm 数据
mvc思想
angular---大 pc端来用
vue：小巧 容易上手 （国人开发的） 移动端
vue兼容性：IE9+ chrome FF
手册：http://cn.vuejs.org/v2/api/
—————————————————————————————————————
vue使用流程：
1.引入vue.js 文件
new Vue({
el:'#box',
data:{
myData:'hello Vue'
}
});
<div id="box">
{{myData}}
</div>
表单元素：
数据双向绑定
<input type="text" v-model="d" />
<p>{{d}}</p>
加个*数据就不跟着变了
<p>{{*d}}</p>
展示数据：
{{d}}->会随着数据的更新而更新
{{*d}}->数据更新，模板不会更新
{{d+'a'}} 字符串拼接
{{d.split(' ')}} 字符串方法
{{}} 里面可以放表达式
操作arr,json
v-for="val in 数据名"
{{val}} {{$index}}
v-for="(key,value) in 数据名"
{{key}} {{value}} {{$index}}
添加时显示重复数据：
track-by="$index"
操作arr
<script type="text/javascript" src="js/vue.js" ></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
fruit:['苹果','香蕉','梨子','木瓜']
}
});
};
</script>
<body>
<div id="box">
<p>{{fruit}}</p>
</div>
</body>
操作json：
<script type="text/javascript" src="js/vue.js" ></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
myFruit:{
a:'苹果',
b:'香蕉',
c:'梨子',
d:'木瓜'
}
}
});
};
</script>
<body>
<div id="box">
<ul>
<li v-for="(key,value) in myFruit">
{{value}} {{key}}
</li>
</ul>
</div>
</body>
事件:
v-on:click="add()"
@click="add()" 事件的简写方式
事件例子：
<script type="text/javascript" src="js/vue.js" ></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
fruit:['苹果','香蕉','梨子','木瓜']
},
//写单击事件
methods:{
add:function(){
this.fruit.push('香瓜');
}
}
});
};
</script>
<body>
<div id="box">
<ul>
<li v-for="val in fruit">
{{val}} {{$index}}
</li>
</ul>
{{fruit}}
<input type="button" value="添加" @click="add()" />
</div>
</body>
—————————————————————————————————
综合例子（简易留言板）
<script type="text/javascript" src="js/vue.js" ></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
list:[]//创建一个空数组，放内容
},
methods:{
add:function(){
this.list.unshift(this.content);//在前面添加
},
remove:function(index){//删除
this.list.splice(index,1);
}
}
});
};
</script>
<body>
<div id="box">
内容：
<input type="text" v-model="content" @keyup.enter="add()" />
<input type="button" value="添加" @click="add()"/>
<ul>
<li v-for="val in list" track-by="$index">
{{val}}
<a href="javascript:;" @click="remove($index)">删除</a>
</li>
</ul>
</div>
</body>
模板：
{{d}}
{{*d}}
{{{d}}} //能展示标签
<script>
window.onload=function(){
new Vue({
el:'.box',
data:{
d:'<h1>标题</h1>'
}
});
};
</script>
<body>
<div class="box">
<input type="text" v-model="d" />
<input type="text" v-model="d" />
<p>{{d}}</p>
{{{d}}}
</div>
</body>
