前言
vue笔记
1.概念
VUE是一种用于构建用户界面的渐进式框架。可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
渐进式:构建项目可以由简单到复杂。
VUE优点:
1.体积小,压缩后文件只有33k。
2.运行效率高。采用虚拟机DOM(可以预先通过javaScripe对数据进行计算,把最终的DOM操作计算出来并且优化),由于这个DOM操作属于预处理技术,并没有真实地操作DOM,∴叫虚拟DOM。
3.双向数据绑定。开发者将更多的精力投入到业务中。
4.生态丰富。大量开源项目基于vue进行开发,成熟稳定。
2.案例
2.1 ES6新规范
定义变量方式1:
var 弊端:没有作用域的概念 ,如果变量的名称重复可能发生问题。
定义变量方式2:
let 有作用域的概念。
定义常量方式:
const 全局唯一,不可改变。
2.2案例1
2.3 v-cloak属性
说明:该指令可以保持有效直至程序编译结束。
例:和以下规则一起使用时可以隐藏未编译的Mustache标签,直到实例准备完毕。
<head>
<meta charset="utf-8">
<title></title>
<!-- html样式 -->
<style>
/* 为属性定义样式 */
[v-cloak]{
/* 定义样式不显示 */
display: none;
}
</style>
</head>
<body>
<!-- v-cloak说明:当程序编译结束时该属性不起作用 【编译没有结束时隐藏有效】-->
<div id="app" v-cloak>
{{hello}}
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el:"#app",
data: {
hello:"hello VUE"
}
})
</script>
</body>
2.4 数据绑定指令
2.4.1 v-text
说明:v-text数据展现,当数据没有解析成功时,页面没有任何数据【没有闪动】,是v-cloak的升级版。
作用:直接展现解析数据
<body>
<div id="app" >
<!-- 插值表达式 -->
<h3>{{hello}}</h3>
<!-- v-text 数据展现 -->
<h3 v-text="hello"></h3>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el:"#app",
data: {
hello:"hh",
}
})
</script>
</body>
2.4.2 v-html
说明:解析html的数据,显示html效果。
效果如下:
2.4.3 v-pre指令
作用:跳过这个元素和他的子元素的编译过程,可以用来显示原始 Mustache 标签,跳过大量没有指令的节点会加快编译。
适用需求:需要展现原始的Mustache标签,不需要程序编译。
<div v-pre>{{需要展现元素的数据}}</div>
2.4.4 v-once指令
<!-- v-once 数据只渲染一次 -->
<div v-text="one" v-once></div>
控制台测试 app.once 页面渲染内容不变。
2.4.5 v-model指令
用法: 在表单控件或者组件上创建双向绑定,当js数据修改时,页面内容变化, 当页面内容修改时,则数据变化.
说明: v-model双向数据绑定 适用于有输入框的类型
data中的数据发生变化时,页面数据同步更新
页面内容修改时数据变化
<div style="border: aliceblue;">
<h3>双向数据绑定</h3>
用户名:<input type="text" name = "name" v-model="name" /></div>
总结:
v-on事件处理,v-bind事件绑定