Vue学习之路
备注：
- cloak意思是隐藏，遮盖的意思 ，v-cloak是指vue中的一种暂时把内容遮盖的基础，替换完成后再显示的技术，用于防止抖动。
- data-binding:数据绑定是vue的核心
1.hello world 的实现
-
普通的js操作hello world 是通过获取元素，然后改变元素的innerHtml来实现的。
-
Vue实现
-
1.使用script 标签引入vue
<script type="text/javascript" src="../src/vue.js "></script> -
2.在另一个script标签中写入Vue对象
new Vue({ el: "#app",//el 是元素的挂载位置 data: { //data用来提供数据，是模型数据 msg: "HelloWorld", }, }); -
3.改变**插值表达式 ** {{}} 里面的值
- 差值表达式可以进行简单的表达式计算
- 例如{{1+2}}显示屏出现3
-
2.Vue的模板（用与复制敲代码）
<!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>
<script type="text/javascript" src="../src/vue.js "></script>
<script type="text/javascript">
var vm = new Vue({
el: "",
data: {},
});
</script>
</body>
</html>
3.Vue的模板语法
-
如何理解前端渲染？
就是将数据写入到html标签之中，在浏览器中显示出效果
-
前端渲染的方式？
- 原生JS：本质上是采用字符串拼接的方法，将需要展示的字符串拼接出来，然后输出到浏览器上
- 缺点是不规范，不同开发人员的代码风格可能差距很大，难以维护
- Vue：
- 原生JS：本质上是采用字符串拼接的方法，将需要展示的字符串拼接出来，然后输出到浏览器上
4.解决闪动问题
-
什么是指令？
- 指令的本质就是 自定义属性
- 指令的格式：以v-开始（例如v-cloak)
-
v-cloak指令（使用差值表达式的时候，会出现闪动，就是会出现{{}}花括号）
使用步骤
-
1.提供样式
[v-cloak]{ display:none; } -
2.在插值表达式所在的标签添加v-cloak指令。
<div v-cloak>{{msg}}</div>
原理：先通过样式来影藏内容，然后在内存中进行值的替换，替换好了再显示最终的效果。
-
5.数据绑定指令
-
v-text 可以绑定data中的属性，没有闪动问题，更加简洁推荐使用
<div v-text="msg"></div> <div v-html="mhtml"></div> <div v-pre="mhtml">{{连带着括号也显示}}</div> -
v-html 可以显示html代码
- 缺点：存在安全隐患
- 原则：本网站内部的数据可以使用，不能跨网站使用
-
v-pre 填充原始的信息,可以直接跳过编译，直接显示msg
{{msg}}
6.数据响应式
- 如何理解响应式
- html5的响应式(因为屏幕大小尺寸发生变化而导致样式发生了变化)
- 数据的响应式：数据的变化导致页面内容发生变化
- 什么是数据绑定？
- 可以理解为数据绑定标签，数据改变则标签内容改变，将数据填充到标签中。
- v-once 只编译一次
- 显示过内容之后不再具有响应式功能，后续就算修改属性也不会发生变化（不然的话网页一直监听数据的变化，会影响性能）
- 应用场景：如果显示的数据不需要修改，可以使用v-once，这样可以减少性能消耗
7.双向数据绑定
- 用户在表单中改输入数值的时候。
- v-model 属性绑定一个data值
<div id="test">
<div>{{msg}}</div>
<input type="text" v-model="msg" />
</div>
1.mvvm设计思想
- M(model):data中的数据
- V(view):视图，是我们写的模板，本质是dom
- VM(view-model):实现控制逻辑,是链接vie和model的结合体
数据绑定总结：数据绑定，他就是将数据与页面内容所绑定，用户所看到的内容是由数据所决定。包括双向数据绑定，本质上是决定页面显示内容。
事件绑定
1.vue如何处理事件？
- v-on:click="方法"
- @click="方法" 这是一种缩写
2.事件函数的调用方法(了解他们的区别，提示：传参的时候)
-
直接绑定函数名称
<button @click="add">加1</button> -
调用函数
<button @click="add()">加1</button>
两种事件函数调用方法的区别
-
如果事件绑定的是函数名称，那么默认会传递事件对象作为事件函数的第一个参数
<button @click="add">加1</button> -
如果事件绑定函数调用，那么事件对象必须放在最后一个参数且显示调用，并且把事件对象的名称必须是$event
<button @click="add(num,num2,$event)">加</button>