共计 2526 个字符，预计需要花费 7 分钟才能阅读完成。
Vue
尤雨溪：Vue.js 的创建者
⚫ 2014 年 2 月，Vue.js 正式公布
⚫ 2015 年 10 月 27 日，正式公布 1.0.0
⚫ 2016 年 4 月 27 日，公布 2.0 的预览版本
Vue 的简介
Vue: 渐进式 javascript 框架
申明式渲染 ---> 组件零碎 ----> 客户端路由 ----> 集中式状态治理 -----> 我的项目构建
易用：曾经会了 HTML、CSS、JavaScript？即刻浏览指南开始构建利用！
灵便：一直凋敝的生态系统，能够在一个库和一套残缺框架之间自若伸缩。
高效：20kB min+gzip 运行大小，超快虚构 DOM，最省心的优化
Vue 的根本应用
传统开发模式比照
Vue 之 Hello word 细节剖析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 的根本应用 </title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
</div>
</body>
<script src="./vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {msg: 'hello Vue'}
})
</script>
</html>
实例参数剖析
- el: 元素的挂载地位（CSS 选择器及 DOM 对象）
- data: 模型数据（值是一个对象）
差值表达式
- 将 Vue 的数据填充到 HTML 标签中
- 反对根本的计算操作
Vue 代码运行原理
Vue 模板语法
前端渲染
把数据填充到 HTML 标签中
前端渲染的语法
- 应用原生 JS 拼接字符串
- 应用前端模板引擎
- 应用 Vue 模板语法
模板语法概览
- 插值表达式
- 指令
- 属性绑定
- 事件绑定
- 款式绑定
- 分支循环构造
指令
指令的实质便是自定义属性，但以 V - 结尾（比方 v -clock）
V-clock
插值表达式存在的问题：’闪动‘, 应用 v -clock 可解决闪动问题
原理：先设置款式进行暗藏，数据中把值替换结束之后，再进行值的显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-clock</title>
<style>
/* 设置款式进行暗藏 */
[v-v-clock] {display: none;}
</style>
</head>
<body>
<div id="app">
<!-- 增加 v -clock 指令 -->
<div v-clock>{{msg}}</div>
</div>
</body>
<script src="./vue.min.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {msg: "hello Vue"}
})
</script>
</html>
Vue 数据绑定的三种形式
v-text: 填充纯文本 相当于插值表达式而言且没有闪动的问题
v-html: 填充 HTML 片段 存在平安问题
v-pre: 显示原始信息 跳过编译过程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<div v-text='text'></div>
<div v-html='html'></div>
<div v-pre>{{pre}}</div>
</div>
</body>
<script src="./vue.min.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: "hello Vue",
text: "v-text",
html: '<h1>v-html</h1>',
pre: "v-pre"
}
})
</script>
</html>
数据响应式
html5 中的响应式：屏幕尺寸的变动会导致款式的变动
数据的响应式：数据的变动会导致款式的变动。
数据绑定：把数据填充到 HTML 标签中
V-once
v-once: 只编译一次 显示内容之后便不再具备响应式的性能
v-once 的长处：应用 v -once 之后，Vue 便不再进行事件监听，从而可能节俭性能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>V-once</title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
</div>
</body>
<script src="vue.min.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{msg:"v-once"}
})
</script>
</html>
双向数据绑定
v-model
双向数据绑定：表单的内容发生变化时，从而会导致数据的变动，而数据的变动会影响页面的变动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model</title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<input type="text" v-model="msg">
</div>
</body>
<script src="vue.min.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{msg:"hello Vue"}
})
</script>
</html>
MVVM
- M(model)
- V(view)
- VM(View-model)：实现逻辑性能
正文完