Vuejs介绍及入门
1.1 VueJS介绍
Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。
官网:https://cn.vuejs.org/
渐进式:选择性使用,就是在需要用的时候就可以使用,能够和JavaScript,jQuery等框架一起结合使用,没有严格的使用场景;
实现响应的数据绑定和组合的视图组件:将视图UI和业务逻辑分开,简单理解就是前后端可以分离开来,后端代码写好,测试通过后可以再去写前端,把数据绑定过来即可。
1.2 MVVM模式
Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层。它的核心是 MVVM 中的 VM,也就是 ViewModel。 ViewModel负责连接 View 和 Model,保证视图和数据的一致性,这种轻量级的架构让前端开发更加高效、便捷。
1.3 VueJS 快速入门
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>快速入门</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
{{message}} <!--//vue的插值表达式,把data中定义的数据显示在这-->
</div>
</body>
<script>
//view model
new Vue({
el:"#app", //表示当前vue对象接管了div区域
data:{
message:"hello vue?" //此处不要加分号
}
})
</script>
</html>
{{message}}:插值表达式,数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值,Mustache 标签将会被替代为对应数据对
象上属性的值。无论何时,绑定的数据对象上属性发生了改变,插值处的内容都会更新。
注意:v-bind的用法
插值语法不能作用在 HTML 标签属性上,遇到这种情况应该使用 v-bind指令
<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>v-model</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<font size="5" v-bind:color="ys1">范延钧</font>
<font size="8" :color="ys2">范延钧</font>
<hr>
<a v-bind={href:"http://www.itcast.cn/index/"+id}>itcast</a>
</div>
</body>
<script>
//view model
new Vue({
el:"#app", //表示当前vue对象接管了div区域
data:{
ys1:"red",
ys2:"green",
id:1
}
})
</script>
</html>
ys1:“red”,ys2:“green”,是修饰两个字体的颜色的,这里需要v-bind:或者:修饰标签属性
1.4 v-for
它的作用用到的比较多,用来循环遍历数组,对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for遍历对象</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<table border="1">
<tr>
<td>序号号</td>
<td>编号</td>
<td>名称</td>
<td>价格</td>
</tr>
<tr v-for="(product,index) in products">
<td>{{index}}</td>
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td>{{product.price}}</td>
</tr>
</table>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
products:[
{id:1, name:"bijiben", price:6000},
{id:2, name:"shouji", price:8000},
{id:3, name:"dainshi", price:5000},
]
}
})
</script>
</html>
1.5 v-on
可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码,以
v-on:click为例
<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>v-on:click</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
{{message}}
<button v-on:click="fun1('vue v-on')">点击改变数据</button>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
message:"hello vue"
},
methods:{
fun1:function (msg) {
alert("hello");
this.message=msg;
}
}
});
</script>
</html>
1.6 .VueJS ajax
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中,相当于之前学的Ajax。
先得引入库如下
<script src="js/axios.js"></script>
语法格式见下面代码
这里简单说明一下,created()这个函数不用管,这是vuejs生命周期的东西,基本开发时不涉及到,几乎能用到的就是created()。黑色圈住的this的意思是,products是定义在vue里面的,相当于是全局变量,created()函数里面要想给他赋值,首先得把之前的全局变量放进来,var _this = this;这句代码就起这个作用的。
蓝色圈住的就是类似Ajax的post请求,括号里就是url,可以是本地文件路径,也可以是请求路径。
下一个博客我会具体一个案例来说明vuejs的使用,今天大家先学一些基础入门。如果觉得不错,点赞收藏一下!