一、Vue简介
Vue.js是什么
- Vue (读音 /vju?/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
- Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
官网
- 英文官网: https://vuejs.org/
- 中文官网: https://cn.vuejs.org/
特点
- 遵循 MVVM 模式
- 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
- 它本身只关注 UI, 也可以引入其它第三方库开发项目
与其它 JS 框架的关联
- 借鉴 Angular 的模板和数据绑定技术
- 借鉴 React 的组件化和虚拟 DOM 技术
Vue周边库
- 网络通信 ： axios
- 页面跳转 ： vue-router
- 状态管理：vuex
- Vue-UI : ICE , Element UI
二、Hello Vue.js
创建一个html文件，在文件中导入如下vue.js的CDN
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
入门案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>初识Vue</title>
</head>
<body>
//准备好一个容器
<div id="app">
{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
Vue.config.productionTip = false
var vm = new Vue({
el:"#app",
data:{
message:"hello vue!"
}
});
</script>
</body>
</html>
Vue实例说明
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
说明：
- el：用于指定当前vue实例为那个容器服务，值通常为css选择器字符串。
- data：用于存储数据，数据供el所指定的容器去使用。
总结
- 想让Vue工作，必须创建一个Vue实例，且要传一个配置对象。
- vue实例指定的容器里的代码依旧符合html规范，只不过混入了一些特殊的Vue语法。
- Vue实例指定的容器里的代码被称为 Vue模板。
三、Vue模板语法
-
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。 -
在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。 -
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。 -
Vue模板语法分为：插值语法和指令语法
插值语法
功能：用于解析标签体的内容。
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：
<span>Message: {{ msg }}</span>
直接上案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>插值语法</title>
</head>
<body>
//准备好一个容器
<div id="app">
{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
Vue.config.productionTip = false
var vm = new Vue({
el:"#app",
data:{
message:"hello vue!"
}
});
</script>
</body>
</html>
指令语法
指令 (Directives) 是带有 v- 前缀的特殊 attribute。
指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
功能：用于解析标签（包括：标签属性、标签内容、绑定事件…）。
举例：v-bind:href=“xxx”，xxx是js表达式，且可以直接读取到data中的所有属性。
v-bind
v-bind 指令可以用于响应式地更新 HTML attribute
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-bind</title>
</head>
<body>
<p>v-bind使用</p>
<div id="app">
<span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "hello,vue"
}
})
</script>
</html>
v-if v-else v-else-if
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>狂神说Java</p>
<div id="app">
<h1 v-if="type==='A'">A</h1>
<h1 v-else-if="type==='B'">B</h1>
<h1 v-else>C</h1>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
type: "A"
}
})
</script>
</html>
v-for
v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<li v-for="item in items">
姓名：{{item.name}}，年龄：{{item.age}}
</li>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
items: [
{name: "zhangsan", age: 12},
{name: "lisi", age: 10},
{name: "wangwu", age: 16}
]
}
})
</script>
</html>
可以用 v-for 来遍历一个对象的 property。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>狂神说Java</p>
<div id="app">
<ul id="v-for-object" class="demo">
<li v-for="value in object">
{{ value }}
</li>
</ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
new Vue({
el: '#v-for-object',
data: {
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}
})
</script>
</html>
|