共计 879 个字符，预计需要花费 3 分钟才能阅读完成。
Vue 简介
尤雨溪：Vue.js 的创建者
- 2014 年 2 月，Vue.js 正式公布
- 2015 年 10 月 27 日，正式公布 1.0.0
- 2016 年 4 月 27 日，公布 2.0 的预览版本
Vue：渐进式 JavaScript 框架
申明式渲染→组件零碎→客户端路由→集中式状态治理→我的项目构建
Vue 的长处
- 易用：相熟 HTML、CSS、JavaScript 常识后，可疾速上手 Vue
- 灵便：在一个库和一套残缺框架之间自若伸缩
- 高效：20kB 运行大小，超快虚构 DOM
Vue 的根本应用
传统模式
Vue 的根本应用
Vue 的根本应用
1. 提供标签用于填充数据
2. 引入 Vue 的库文件
3. 能够应用 Vue 相干的语法性能
4. 把 Vue 提供的数据填充到 html 标签中
Vue 实例的参数
- el：元素的挂载地位
- data：模型数据（值是一个对象或函数）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 的根本应用 </title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<div>{{5>3?'正确':'不正确'}}</div>
<div>{{20+40}}</div>
</div>
</body>
<script src="./vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data() {
return {msg: 'hello word'}
},
})
</script>
</html>
插值表达式的作用
- 把数据填充到 html 标签中
- 插值表达式反对根本的计算操作
Vue 代码运行的原理
前端渲染
把数据填充到 HTML 标签中
前端渲染的形式
- 原生 JS 拼接字符串
- 应用前端模板引擎
- 应用 Vue 的模板语法
Vue 的模板语法
- 插值表达式
- 指令
- 事件绑定
- 属性绑定
- 款式绑定
- 分支循环构造
插值表达式
插值表达式：{{}}
- 把数据填充到 html 标签中
- 插值表达式反对根本的计算操作
指令
自定义指令的实质
自定义属性。指令的格局：以 v - 开始
v-clock
v-clock 是为了解决插值表达式的闪动问题，先暗藏，替换好值之后显示最终的后果
正文完
