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>