1.Vue.js
是一套构建用户界面的渐进式框架、 采用自底向上增量开发的设计、 核心库只关注视图层。
2.声明式渲染
Vue.js的核心:一个采用简洁的模板语法来声明式的将数据渲染进DOM的系统
(1)文本插值
所有的元素都是响应式的:可以在浏览器开发者模式下面Console中修改app.message,页面会相应改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello YJ'
}
})
</script>
</body>
</html>
(2)绑定DOM元素
v-bind属性为指令:将这个元素节点的title属性和Vue实例的message属性保持一致
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
<div id="app2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息
</span>
</div>
<script>
var app2 = new Vue({
el: '#app2',
data: {
message: '页面加载于' + new Date().toLocaleString()
}
})
</script>
</body>
</html>
3.条件循环
(1)v-if:可以绑定DOM结构到数据
Vue提供了一个强大的过渡效果系统,可以在Vue插入、更新、删除元素时自动应用过渡效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
<div id="app3">
<p v-if="seen">你看到我了</p>
</div>
<script>
var app3 = new Vue({
el: '#app3',
data: {
seen: true
}
})
</script>
</body>
</html>
(2)v-for:可以绑定数组的数据来渲染一个项目列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
<div id="app4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
<script>
var app4 = new Vue({
el: '#app4',
data: {
todos: [
{text: 'Hello'},
{text: 'World'},
{text: 'Go'}
]
}
})
</script>
</body>
</html>
4.处理用户输入
(1)v-on:绑定一个事件监听器,通过它调用在Vue实例中定义的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
<div id="app5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆转消息</button>
</div>
<script>
var app5 = new Vue({
el: '#app5',
data: {
message: 'Hello'
},
methods: {
reverseMessage: function () {
// 更新了应用的状态,单没有触碰DOM,所有的DOM操作都由Vue来处理,不再需要关注底层逻辑
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
(2)v-model:能轻松实现表单输入和应用状态之间的双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
<div id="app6">
<p>{{ message }}</p>
<input type="text" v-model="message">
</div>
<script>
var app6 = new Vue({
el: '#app6',
data: {
message: 'Hello'
}
})
</script>
</body>
</html>
5.组件化应用构建
组件系统:是一种抽象,允许使用小型、独立和通常可复用的组件构建大型应用
(1)在Vue中,一个组件本质上是一个拥有预定义选项的一个Vue实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
<div id="app7">
<ol>
<!--创建一个todo-item组件的实例-->
<todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id">
<!--item现在就是{ id: 0, text: 'hello'}-->
<!--todo是todo-item组件的一个属性,将这个属性和item关联起来-->
<!--key目前不清楚-->
</todo-item>
</ol>
</div>
<script>
// 定义名为todo-item的新组件
Vue.component('todo-item', {
props: ['todo'], // 类似于一个自定义属性,名字叫todo
template: '<li>{{ todo.text }}</li>'
});
var app7 = new Vue({
el: '#app7',
data: {
groceryList: [
{ id: 0, text: 'hello'},
{ id: 1, text: 'world'},
{ id: 2, text: 'yj'}
]
}
})
</script>
</body>
</html>
(2)与自定义元素的关系
a.Vue组件不需要任何补丁,并且在所有支持的浏览器(IE9及更高版本)之下表现一致; b.Vue组件提供:跨组件数据流、自定义事件通信、构建工具集成。