Vue(day1)

Vue学习之路

备注：

  1. cloak意思是隐藏，遮盖的意思 ，v-cloak是指vue中的一种暂时把内容遮盖的基础，替换完成后再显示的技术，用于防止抖动。
  2. data-binding:数据绑定是vue的核心

1.hello world 的实现

  1. 普通的js操作hello world 是通过获取元素，然后改变元素的innerHtml来实现的。

  2. 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的模板语法

  1. 如何理解前端渲染？

    就是将数据写入到html标签之中，在浏览器中显示出效果

  2. 前端渲染的方式？

    1. 原生JS：本质上是采用字符串拼接的方法，将需要展示的字符串拼接出来，然后输出到浏览器上
      • 缺点是不规范，不同开发人员的代码风格可能差距很大，难以维护
    2. Vue：

4.解决闪动问题

  1. 什么是指令？

    • 指令的本质就是 自定义属性
    • 指令的格式：以v-开始（例如v-cloak)

  2. v-cloak指令（使用差值表达式的时候，会出现闪动，就是会出现{{}}花括号）

    使用步骤

    • 1.提供样式

      [v-cloak]{
	display:none;
}

    • 2.在插值表达式所在的标签添加v-cloak指令。

      <div v-cloak>{{msg}}</div>

    原理：先通过样式来影藏内容，然后在内存中进行值的替换，替换好了再显示最终的效果。

5.数据绑定指令

  1. v-text 可以绑定data中的属性，没有闪动问题，更加简洁推荐使用

    <div v-text="msg"></div>
<div v-html="mhtml"></div>
<div v-pre="mhtml">{{连带着括号也显示}}</div>

  2. v-html 可以显示html代码

    • 缺点：存在安全隐患
    • 原则：本网站内部的数据可以使用，不能跨网站使用

  3. 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>

两种事件函数调用方法的区别

  1. 如果事件绑定的是函数名称，那么默认会传递事件对象作为事件函数的第一个参数

    <button @click="add">加1</button>

  2. 如果事件绑定函数调用，那么事件对象必须放在最后一个参数且显示调用，并且把事件对象的名称必须是$event

    <button @click="add(num,num2,$event)">加</button>
posted @ 2020-07-23 02:46  li33的博客  阅读(111)  评论(0)  编辑  收藏  举报