React.js、Angular.js、Vue.js这三个单页面的框架,也许就Vue最陌生了,所以最近需要学习学习,同时把相应的一些基础总结下来。
Vue的体系中,包括Vue.js、Vue-router、Vue-source、webpack等等一系列知识。
本篇文章的目标:掌握Vue.js的入门基础。
这些所有的demo的github地址:git地址
https://github.com/liwudi/Vue.git
demo1、Vue的hello world。
Vue是一个JavaScript框架,使用这个框架,需要引入Vue.js。
在本篇文章中,所有的Vue.js都使用官方的cdn托管。
<script src="https://cdn.jsdelivr.net/npm/vue">
一个Vue项目,本质是一个单页面应用,所以需要一个单页面的入口
<div id='app'></div>
然后,有了这个入口,就可以新建Vue的实例了。
new Vue({
el:'#app',//申明了vue的入口
data:{
message:'hello world!'
}
});
其中el是必须的,表示Vue的入口,data表示声明式渲染的数据。可在dom中展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue-demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">{{message}}</div>
<script>
new Vue({
el:'#app',
data:{
message:'hello world!'
}
});
</script>
</body>
</html>
demo2、v-bind绑定dom元素的属性
v-bind:属性=’绑定数据’,这样的格式是动态绑定dom属性的语法。
其中,v-bind是Vue的一个指令。和angular中的指令差不多。(指令在Vue中具有一些特殊的功能)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app" v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息!</div>
<script>
new Vue({
el:'#app',
data:{
message:'页面加载于 ' + new Date().toLocaleString()
}
});
</script>
</body>
</html>
demo3、v-if完成的条件渲染
一个单页面应用,条件渲染是必不可少的一部分。
下面的示例,通过message的值不同,展示不同的界面输出。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue-demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<p v-if="message">message为true</p>
<p v-if="!message">message为false</p>
</div>
<script>
new Vue({
el:'#app',
data:{
message:true
}
});
</script>
</body>
</html>
demo4、v-for完成的列表渲染
单页面应用的另一项重要任务就是渲染数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue-demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in message">姓名:{{item.name}},年龄:{{item.age}}</li>
</ul>
</div>
<script>
new Vue({
el:'#app',
data:{
message:[{name:'张三',age:23},{name:'李四',age:24},{name:'王五',age:25}]
}
});
</script>
</body>
</html>
demo5、用户输入的双向绑定(v-model)
什么是双向绑定?
就是用户输入什么,我就能得到什么,同时我得到的值直接可以反映到dom界面上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue-demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<input v-model="message" type="text"/>
<p>用户输入的值:{{message}}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
message:'hello'
}
});
</script>
</body>
</html>
demo6、Vue的事件v-on。
事件是网页和用户交互的核心,Vue使用v-on这个指令来达到交互的目的。
基本语法是:v-on:事件类型=”事件名称”;
其中,事件定义在methods属性中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue-demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<button v-on:click="clickEvent">点击我</button>
</div>
<script>
new Vue({
el:'#app',
data:{
message:'hello'
},
methods:{
clickEvent: function () {
alert('触发了事件');
}
}
});
</script>
</body>
</html>
demo7、Vue的组件
如果说前面的东西都是小儿科,那么组件的简单使用,是有必要描述一下的。
最简单的组件示例
使用Vue.component(name,obj)来定义一个组件,它一般有两个参数,第一个参数是个字符串,代表组件名称;第二个参数是个对象,代表组件配置。
组件的第二个参数中,template代表要渲染到界面的东西是什么!
组件在使用的时候,把它当做div一样的方式使用就行了。在页面中类似这样的语法:
<组件名></组件名>
完整示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue-demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<ol>
<!--使用组件-->
<todo-item></todo-item>
</ol>
</div>
<script>
//定义一个最简单的组件
Vue.component('todo-item',{
template:'<li>这是一个组件</li>'
});
new Vue({
el:'#app'
});
</script>
</body>
</html>
组件可以接受属性
组件在它的第二个参数对象的属性中,添加一个props就能够接受父组件传递的属性。这个props是一个数组,里面的每一项是父元素的props名字。
组件的定义:
组件的使用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue-demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<ol>
<!--使用组件-->
<todo-item
v-for="item in todoList"
v-bind:todo="item"
></todo-item>
</ol>
</div>
<script>
//定义一个最简单的组件
Vue.component('todo-item',{
props:['todo'],
template:'<li>name:{{todo.name}},age:{{todo.age}}</li>'
});
new Vue({
el:'#app',
data:{
todoList:[{name:'张三',age:23},{name:'李四',age:24},{name:'王五',age:25}]
}
});
</script>
</body>
</html>
假想的组件使用模板
<div id="app">
<app-nav></app-nav>
<app-view>
<app-sidebar></app-sidebar>
<app-content></app-content>
</app-view>
</div>
demo8、Vue动画
在这里,使用一个最简单的方式,描述Vue的动画。
关于动画的详细描述在这里,进入/离开以及列表过度
1、transition组件是用于动画的一种方式,它有个name属性。
-
2、使用不同的class用来描述不同时期的动画展现。
-
进入状态
v-enter:开始(进入状态)
v-enter-active:过程(进入状态)
v-enter-to:结束(进入状态) -
离开状态
v-leave:开始(离开状态)
v-leave-active:过程(离开状态)
v-leave-to:结束(离开状态)
其中,上面的V代表transiton组件的name属性。
3、完整的示例demo如下:
//这是一个通过v-if展示信息的动画示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue-demo</title>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s }
.fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
opacity: 0 }
</style>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<button v-on:click="clickEvent">切换</button>
<transition name="fade">
<p v-if="isShow">
{{message}}
</p>
</transition>
</div>
<script>
new Vue({
el:'#app',
data:{
isShow: true,
message:'hello world!'
},
methods:{
clickEvent: function () {
this.isShow = !this.isShow
}
}
});
</script>
</body>
</html>