vue
Posted 小太阳wy927
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue相关的知识，希望对你有一定的参考价值。
首先 vue的雏形
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="vue.js"></script> </head> <body> <div id="box"> {{msg}} </div> </body> <script> new Vue({ el:"#box", //这是个选择器，可以是id名字，class名字，也可以是body data:{ //数据 msg:"hellow vue" } }) </script> </html>
常用指令:
指令：扩展html 标签功能，属性
1.v-model
一般用在表单元素上（input） 实现双向数据绑定
<div id="box">
<input type="text" v-model="msg">
<input type="text" v-model="msg">
{{msg}}
</div>
<script>
new Vue({
el:"#box",
data:{
msg:"hellow vue"
}
})
</script>
2.循环 v-for
v-for="name in arr";
v-for="name in josn"
v-for="(k,v) in json"
<div id="box">
<ul>
<li v-for="value in arr">{{value}}</li>
</ul>
<hr>
<ul>
<li v-for="item in json">{{item}}</li>
</ul>
</div>
</body>
<script>
new Vue({
el:"#box",
data:{
arr:["apple","orange","bananr"],
json:{a:‘apple‘,b:‘orange‘,c:‘banner‘}
}
})
</script>
</html>
3.事件 v-on:click="函数"
new Vue({
el:"#box",
data:{ //数据
arr:["apple","orange","bananr"],
json:{a:‘apple‘,b:‘orange‘,c:‘banner‘}
},
methods:{ //方法
show:function()
{
alert(1)
}
}
})
以上是关于vue的主要内容，如果未能解决你的问题，请参考以下文章