您的位置：首页 > 产品设计 > UI/UE

Vue.js的学习1.0

2018-03-06 18:55 288 查看

Vue.js的学习1.0

有看过angular的话，再看vue的话是不陌生的，也是相对容易上手的。

那么vue和angular有什么区别呢？

vue——简单、易学

指令以 v-xxx

一片html代码配合上json，在new出来vue实例

个人维护项目

适合: 移动端项目,小巧

angular——上手难

指令以 ng-xxx

所有属性和方法都挂到$scope身上

angular由google维护

合适: pc端项目

共同点: 不兼容低版本IE

1.hello vue

举个栗子：

1.引入vue.js
<script type="text/javascript" src="vue.js"></script>

<script>
window.onload=function(){
var c=new Vue({
el:'#div1',//这是一个选择器，说明要把数据展示到div1里面
data:{
msg:'welcome vue'
}
});
};
</script>
<body>
<div id="div1">
{{msg}}
</div>
</body>
</html>

2.vue循环（ v-for）

angular中用的是ng-repeat

<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
//循环数组
arr:['apple','banana','orange','pear'],
//循环json
json:{a:'apple',b:'banana',c:'orange'}
}
});
};
</script>
</head>
<body>
<div id="box">
<ul>
<li v-for="value in arr">
{{value}}   {{$index}}
</li>
</ul>
<hr>
<ul>
<li v-for="value in json">
//json 咱主要就是想拿到这个key
{{value}}   {{$index}}  {{$key}}
</li>
</ul>

<hr>
<ul>
<li v-for="(k,v) in json">
//你要实在记不住这个key，也可以这样写
{{k}}   {{v}}   {{$index}}  {{$key}}
</li>
</ul>
</div>
</body>
</html>

3.基础点击事件（v-on:click=“”）

v-on — 就相当于绑定一个事件

点击按钮后数组增加tomato

script>
window.onload=function(){
new Vue({
el:'#box',
data:{ //数据
arr:['apple','banana','orange','pear'],
json:{a:'apple',b:'banana',c:'orange'}
},
methods:{
//放函数、方法...
add:function(){
this.arr.push('tomato');
}
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="按钮" v-on:click="add()">
<br>
<ul>
<li v-for="value in arr">
{{value}}
</li>
</ul>
</div>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航