作为国内目前最火的框架，功能强大，语法简单，基于Angular 基础上，比angular 更轻量，更适配于移动端
先引入vue文件。。
<script src="js/Vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload=function(){
new Vue({
el:".oDiv", //el 是固定的语法 必须这么写
data:{ //data 也是固定的语法
a:"welcome to vue"
}
})
};
</script>
和angular 一样绑定数据到元素
<div class="div">
<p>{{a}}</p></div>
是不是很简单。
new Vue 里面可以随便写 array、json 、string 都可以
循环遍历和angular 一样 但是不再是 ng-repeat 而是 v-for="item in arr"
还有好多angular 的指令 和vue的差不多
比如：v-model
v-if
v-else
v-show
v-bind等等
vue 的事件比angular 也简单很多 比如 ng-click="get()"
在 vue 里是 v-click="get()" 可以简写为 @click="get()"
这些事件的方法写在实例化vue对象里面
<script type="text/javascript">
window.onload=function(){
new Vue({
el:".oDiv", //el 是固定的语法 必须这么写
data:{ //data 也是固定的语法
a:"welcome to vue"
},
methods:{ // methods 也是固定的语法
get:function(){
alert(‘welcome to vue‘)
}
}
})
};
</script>
<input type="button" value="按钮" @click="get()" />
如果不需要传参 后面的括号也不用写。但是为了写法规范带上比较好。
附上小的练习留言板
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/Vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload=function(){
new Vue({
el:".div",
data:{
a:"",
arr:[]
},
methods:{
// 这里的this 指的是 vue 对象
add:function(){
if(this.a!=""){
this.arr.unshift(this.a);
this.a="";
}
},
remove:function(index){
this.arr.splice(index,1);
}
}
})
};
</script>
</head>
<body>
<div class="div">
<input type="text" v-model="a" @keyup.13="add()" />
<input type="button" value="按钮" @click="add()" />
<p v-if="this.arr.length==0">暂无留言</p>
<ul>
<li v-for="item in arr">{{item}}
<a href="javascript:;" @click="remove($index)">删除</a>
</li>
</ul>
</div>
</body>
</html>
vue 其实和面向对象的构造函数差不多
@keyup.13="add()" keyup是键盘事件 13是回车的键位码
@keyup.enter 也可以写成英文的 方便记忆
类推下去还有很多 比如
.up .down .left .right 键盘上的 上下左右键
下次会分享一些vue 其他的比如 过滤器 指令 路由等等
谢谢~~
时间： 2024-11-05 16:01:47