• 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>
      
  • 相关阅读:
    正则里的.*?
    无边框缩放
    平台 测试笔记
    eclipse快捷键
    linux笔记
    笔记
    wamp、wordpress
    java-selenium
    html/css笔记
    selenium2——ruby
  • 原文地址:https://www.cnblogs.com/li33/p/13364126.html
Copyright © 2020-2023  润新知