Vue的概述
尤雨溪：Vue.js的创建者
- 2014.2：Vue.js正式公布
- 2015.10.27:正式公布1.0版本
- 2016.4.27 公布2.0版本
Vue:渐进式javascript框架
申明式渲染->组件零碎->客户端路由->集中式状态治理->我的项目构建
Vue的官网：https://cn.vuejs.org/
为什么Vue这么受欢迎？
- 易用：只须要html css javascript根底即可上手Vue
- 灵便：在框架与库之间来回切换
- 高效：20kb文件大小，超快虚构DOM
Vue的根本应用
实例参数剖析
- el:元素的挂载地位（值能够为css选择器或者DOM元素）
- data:模型数据（值为一个对象）
插值表达式的用法
- 将数据填充到HTML标签中
- 插值表达式反对根本的计算操作
Vue的应用步骤
- 须要提供标签用于填充数据
- 引入Vue.js文件
- 能够应用Vue的相干语法
- 把Vue的数据渲染到HTML标签中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello vue</title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<div>{{1+2 }}</div>
</div>
</body>
<script src="./vue.min.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: "hello vue"
}
})
</script>
</html>
Vue代码运行原理剖析
Vue语法—>原生语法
模板语法概述
如何了解前端渲染
把数据填充到HTML标签中
### 前端渲染形式
- 原生JS拼接字符串
- 应用前端模板引擎
- 应用Vue特有的模板语法
Vue模板语法概述
- 插值表达式
- 指令
- 事件邦定
- 属性绑定
- 款式绑定
- 分级循环构造
指令
什么是指令?
- 指令的实质便是自定义属性
- 指令的格局:以v-结尾 (如V-cloak)
v-clock的指令用法
- 为了解决插值表达式中的 “闪动”问题
- 如何解决该问题,应用V-cloak指令
原理:先设置款式暗藏,在内存中把值替换结束后再进行显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-cloak指令的用法</title>
<style>
/* 第一步:先在款式中暗藏 */
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<!-- 第二步:应用v-cloak指令 -->
<div v-cloak>{{msg}}</div>
</div>
</body>
<script src="./vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "hello Vue"
}
})
</script>
</html>
数据绑定指令
- 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>数据绑定的三种形式</title>
</head>
<body>
<div id="app">
<div v-text='msg'></div>
<div v-html='msg2'></div>
<div v-pre>{{msg}}</div>
</div>
</body>
<script src="./vue.min.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: "hello vue",
msg2: "<h1>hello vue</h1>"
}
})
</script>
</html>
发表回复