Vue day01

最新推荐文章于 2024-02-01 17:54:39 发布
最新推荐文章于 2024-02-01 17:54:39 发布
阅读量149 收藏
点赞数
分类专栏： VUE系列 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50883365/article/details/117652651
版权

一. 什么是VUE:

  1. 什么是:
    (1). 第三方开发的: 必须要下载才能使用
    (2). 基于MVVM设计模式的: (待续…)
    (3). 渐进式的: 可以逐步在项目中使用vue的技术。比较容易和其他技术(DOM、jQuery)混搭。但是，强烈不建议！
    (4). 纯前端js框架: 与nodejs无关，只需要浏览器就可以运行！

  2. 为什么: 传统DOM和jQuery都存在着大量重复的编码！只有vue以及同类框架技术，才能几乎彻底的避免大量重复编码！提高开发效率

  3. 何时: 今后，只要以数据操作为主的项目，都可用vue开发：
    比如: 淘宝, 京东, 美团, 饿了么, 头条, 微博, …

二. 如何使用:

  1. 下载: 2种:
    (1). 下载vue.js文件到项目本地，然后引入.html页面中使用(前三天)
    a. 官网: cn.vuejs.org
    b. 版本: 2.6
    1). 开发版: 未压缩版本。有完备的注释，代码格式，见名知意的变量名，友好的错误提示。
    i. 优点: 可读性好，便于学习和开发之用
    ii. 缺点: 体积大，不便于快速下载，不适合于生产环境
    2). 生产版: 压缩版。去掉了完备的注释，代码格式。极简化了变量名。去掉了几乎所有的友好的错误提示！
    i. 优点: 体积小，便于快速下载，适合于生产环境
    ii. 缺点: 可读性差，不适合学习和开发之用
    c. 引入: <script src="js/vue.js">
    (2). 下载并安装vue脚手架代码: （企业中都用，后两天使用）
1_jq.html
<!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>
  <button>-</button>
  <span>0</span>
  <button>+</button>
  <script src="js/jquery-1.11.3.js"></script>
  <script>
    //先做+
    //DOM 4步
    //1. 查找触发事件的元素
    //本例中: 查找内容为+的按钮
    $("button:contains(+)")
    //2. 绑定事件处理函数
    .click(function(){
      //3. 查找要修改的元素
      //本例中: 查找当前按钮的前一个兄弟
      var $span=$(this).prev();
      //4. 修改元素
      //4.1 取出span现在的内容，转为整数
      var n=parseInt($span.html())
      //4.2 n+1
      n++;
      //4.3 放回去
      $span.html(n);
    })
    //再做-
    //DOM 4步
    //1. 查找触发事件的元素
    //本例中: 查找内容为+的按钮
    $("button:contains(-)")
    //2. 绑定事件处理函数
    .click(function(){
      //3. 查找要修改的元素
      //本例中: 查找当前按钮的前一个兄弟
      var $span=$(this).next();
      //4. 修改元素
      //4.1 取出span现在的内容，转为整数
      var n=parseInt($span.html())
      //4.2 如果n>0,才n-1
      if(n>0){ n-- }
      //4.3 放回去
      $span.html(n);
    })
  </script>
</body>
</html>

1_vue.html
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
</head>
<body>
  <!--3步-->
  <!--1. 做界面
    要求: 
    1.1 整个界面只能包裹在一个唯一的父元素中
    1.2 找到界面中将来可能发生变化的位置，用专门的语法标记出来: {{变量名}}
    //本例中: span元素的内容将来会发生变化，所以不要写死内容。应该替换为{{n}}
    1.3 找到界面中触发事件的元素，用专门的语法标记出来: @事件名="事件处理函数名"
    //本例中: 两个按钮会触发单击事件
  -->
  <div id="app">
    <button @click="minus">-</button>
    <span>{{n}}</span>
    <button @click="add">+</button>
  </div>
  <script>
    //2. 创建一个new Vue()对象，让它负责监视页面中一块指定的区域
    new Vue({
      // 选择器
      el:"#app", //让这个new Vue()对象负责监控页面中id为app的元素及其子内容。
      //3. 创建模型对象，为界面提供支持
      //3.1 创建一个data对象，保存所有界面所需的变量
      //本例中: 界面中只需要一个变量n
      data:{
        n:0 //开局是0
      },
      //3.2 创建一个methods对象，保存所有界面所需的事件处理函数
      //本例中: 界面中共需要2个事件处理函数
      methods:{
        //复习js高级第七天的对象方法简写
        //minus:function(){
        minus(){
          //注意: 只需要关注如何修改变量即可！无需关注变量值将来显示在什么地方去！单纯
          //强调: methods中的方法内，想使用data中的变量，必须加this.（待续...）
          if(this.n>0){
            this.n--
          }
        },
        add(){
          this.n++
        }
      }
    })
  </script>
</body>
</html>

运行结果:

三. MVVM:

  1. 旧的前端代码划分为: 3部分：
    (1). HTML: 专门负责定义网页的内容和结构
    (2). CSS: 专门为网页添加样式
    (3). JS: 专门为网页添加交互行为

  2. 问题: HTML和CSS太弱了！生活不能自理！一切哪怕是细微的改变，都要js来反复操作。结果，DOM和jQuery都存在着大量重复的劳动！

  3. 新的前端代码划分为: 3部分 MVVM设计模式
    (1). 界面(View): HTML+CSS
    a. 增强版的: HTML支持变量、分支、循环等程序的要素。
    b. 好处: 大大减少了js代码中重复的劳动
    c. 比如: <div id="app">...</div>
    (2). 模型对象(Model):
    a. 专门替界面保存所有所需的变量和方法的特殊对象
    b. 界面需要几个变量，模型对象中就要有几个变量
    c. 界面中需要几个函数，模型对象中就要有几个函数
    d. 比如: data:{ … }, methods:{ … }
    (3). 视图模型对象(ViewModel):
    a. 什么是: 专门将界面和模型对象绑定起来的一种特殊的对象
    b. 绑定: 只要模型对象中数据发生变化，视图模型可以自动保证界面上自动同步更新内容。
    c. 比如: new Vue({ el:"#app", data:{ … }, methods:{ … } })

  4. vue是如何实现MVVM设计模式的：vue的绑定原理:
    (1). 通过访问器属性来监控模型对象中每个变量的变化:
    a. 创建new Vue()之后，立刻创建data:{…}对象。
    b. new Vue()会自动为data对象中每个变量请保镖——访问器属性
    c. 结果: 从此我们用的data中的变量，早就不是原版的变量了。其实都是同名的访问器属性。
    d. 然后new Vue()会继续引入methods对象，并打散methods对象。
    e. 结果: 从此methods中的方法都直接隶属于new Vue()。所以，methods中的方法中想访问new Vue()下的其它变量，必须加this.
    f. 当在new Vue()任何位置修改变量值时，其实修改的都是访问器属性，就会自动触发访问器属性的set()。new Vue()在set()函数中悄悄添加了一个"通知函数"。只要修改任何变量，都会自动调用set()中的通知函数。告知外部，哪个变量被修改了！
    (2). 虚拟DOM树:
    a. 什么是虚拟DOM树: 内存中专门保存所有可能发生变化的元素的简化版DOM树——本质是一个巨大的对象，其中包含很多可能发生变化的DOM元素
    b. 何时创建:
    1). 当new Vue()中data:{}和methods:{}对象都创建完之后，new Vue()会根据el属性的指引，去扫描对应的界面内容
    2). 只找出可能发生变化的元素，保存到“虚拟DOM树”中
    c. 今后当某个变量值更新时:
    1). 该变量的访问器属性set()一定会发出通知，给虚拟DOM树。
    2). 虚拟DOM树收到通知，会遍历虚拟DOM树中所有可能发生变化的元素。只找到受本次变量修改影响的个别元素。
    3). 用提前封装好的原生DOM操作，来只修改受影响的个别元素！

  5. 为什么很多框架都选择虚拟DOM树？虚拟DOM树的优点
    (1). 小: 只保存可能变化的元素！
    (2). 遍历快: 因为小，所以遍历快
    (3). 更新效率高: 只修改受影响的个别元素
    (4). 避免重复编码: 已经提前封装了原生的DOM增删改查操作！

四. 绑定语法: 学名: 插值语法 Interpolation

  1. 什么是: 在界面中标记哪里可能发生变化的特殊的语法
  2. 何时: 今后，只要一个元素的内容希望随程序自动变化时，都要用绑定来标记
  3. 如何: <元素>{{变量名}}</元素>
  4. 结果:
    (1). 开局, new Vue()扫描到这里时，就会将这个元素保存到虚拟DOM树中
    (2). 当{{}}中的变量在new Vue()中被修改时，虚拟DOM树就会找到这个元素，自动更新这个元素的内容与new Vue()同名变量保持一致！
  5. 混搭: 其实在一个元素的内容中, {{变量名}}可以和其他字符串内容混搭。
  6. {{}}之中: 和模板字符串的${}规则一样
    (1). 可以写: 变量, 运算, 三目, 调用函数, 创建对象, 访问数组元素——一切合法的有返回值的js表达式
    (2). 不能写: 程序结构(分支和循环), 以及没有返回值的js表达式。
  7. 示例: 使用绑定语法绑定多种内容:
    2_{{}}.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
</head>
<body>
  <div id="app">
    <h3>用户名:{{uname}}</h3>
    <h3>性别:{{sex==1?"男":"女"}}</h3>
    <h3>单价:¥{{price.toFixed(2)}}</h3>
    <h3>数量:{{count}}</h3>
    <h3>=========================</h3>
    <h3>小计:¥{{(price*count).toFixed(2)}}</h3>
    <h3>下单时间: {{new Date(orderTime).toLocaleString()}}</h3>
    <h3>今天星期{{week[new Date().getDay()]}}</h3>
  </div>
  <script>
    new Vue({
      el:"#app",
      data:{
        uname:"dingding",
        sex:1,
        price:12.5,
        count:5,
        orderTime:1603425148601,
        week:["日","一","二","三","四","五","六"]
      }
    })
  </script>
</body>
</html>
运行结果：
用户名:dingding
性别:男
单价:¥12.50
数量:5
=========================
小计:¥62.50
下单时间: 2020/10/23 上午11:52:28
今天星期五

五. 指令(directive):

  1. 什么是: 专门在HTML中也能实现分支、循环等程序功能的特殊的自定义属性
  2. 包括: 13种
  3. v-bind:
    (1). 问题: 如果希望元素的属性值也随程序自动变化，如果使用{{}}，会报错！——{{}}只支持元素内容变化，不支持属性值变化
    (2). 解决: 今后只要希望元素的属性值随程序自动变化，都要用v-bind或:代替{{}}
    (3). 如何:
    a. 标准写法: <元素 v-bind:属性名=“变量或js表达式”>
    b. 简写: <元素 :属性名=“变量或js表达式”>
    (4). 结果: 当开局, new Vue()只要扫描到:属性名=“变量或js表达式"语法，都会先执行”“中的变量或js表达式，获得一个结果值。然后，再自动将结果值，设置为当前属性的属性值！
    (5). 强调: 绑定属性值时，不要加{{}}了！一旦一个属性前加了:，则=后的”"，其实就起到了{{}}等效的作用！
    (6). 示例: 根据pm25的数值，动态显示不同表情图片
    3_v-bind.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
</head>
<body>
  <!--1. 做界面
    1.1 找可能发生变化的地方
    //本例中: img的src属性可能发生变化,
    //希望pm25<100，就显示img/1.png
    //如果pm25<200，就显示img/2.png
    //如果pm25<300，就显示img/3.png
    //否则其余都显示img/4.png
  -->
  <div id="app">
    <h3>今日空气质量:<img :src="pm25<100?'img/1.png':pm25<200?'img/2.png':pm25<300?'img/3.png':'img/4.png'"></h3>
    <h3>{{pm25<100?'img/1.png':pm25<200?'img/2.png':pm25<300?'img/3.png':'img/4.png'}}</h3>
  </div>
  <script>
    //2. 创建new Vue()对象
    new Vue({
      el:"#app",
      //3. 创建模型对象
      data:{
        pm25:367
      }
    })
  </script>
</body>
</html>
  1. v-show:
    (1). 什么是: 专门控制一个元素显示隐藏的特殊指令
    (2). 何时: 今后只要想控制一个元素显示隐藏都用v-show
    (3). 如何: <元素 v-show=“bool类型变量或js表达式”>
    (4). 结果: 每当new Vue()扫描到v-show时，都会先计算""中的变量值或js表达式的值:
    a. 如果=右边的变量值或表达式结果为true，则当前元素什么也不做，默认正常显示
    b. 如果=右边的变量值或表达式结果为false，则new Vue()自动给当前元素加上display:none，当前元素隐藏
    (5). 示例: 实现打开关闭对话框
    4_v-show.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
  <style>
    .pop{
      width:300px; height:150px;
      position:fixed;
      top:50%;
      left:50%;
      margin-left:-150px;
      margin-top:-75px;
      background-color:lightGreen;
      color:green;
      text-align:center;
    }
    .pop>.close{
      float:right;
      padding:5px 10px;
      cursor:pointer;
    }
  </style>
</head>
<body>
  <!--1. 做界面
      1.1 找界面中哪里可能发生变化： 
      本例中: 只有div.pop会发生变化。只有两种变化: 显示和隐藏
      所以，非常适合用v-show来控制
      1.2 找触发事件的元素
      本例中: 
        当单击button时，打开对话框
        当单击span时，关闭对话框
  -->
  <div id="app">
    <button @click="open">登录</button>
    <div v-show="show" class="pop">
      <span @click="close" class="close">×</span>
      <h1>登录成功!</h1>
    </div>
  </div>
  <script>
    //2. 创建new Vue对象
    new Vue({
      el:"#app",
      //3. 创建模型对象
      //3.1 创建data对象保存界面中所需的所有变量
      //本例中: 界面里只需要1个变量
      data:{
        show:false //开局，对话框默认应该是关闭的
      },
      //3.2 定义methods对象，保存界面中所需的所有函数
      //本例中: 需要2个函数
      methods:{
        open(){
          //设置当前对话框为打开
          this.show=true;
        },
        close(){
          //设置当前对话框为关闭
          this.show=false;
        }
      }
    })
  </script>
</body>
</html>
  1. v-if和v-else:
    (1). 问题：如果两个元素都要控制显示隐藏，而且根据同一个条件二选一显示隐藏。如果用v-show做，被迫把条件写2遍！
    (2). 解决: 今后，只要控制2个元素二选一显示，都用v-if和v-else
    (3). 如何:
<元素1 v-if="判断条件">
<元素2 v-else>

强调: 
a. v-if和v-else所在的两个元素必须连着写！中间不能插入任何其他元素！
b. v-else后一定不要写条件！
(4). 原理: 每当new Vue()扫描到v-if时，会先执行=右边的判断条件: 
a. 如果判断条件为true，则保留v-if所在的元素，删除v-else所在的元素
b. 如果判断条件为false，则删除v-if所在的元素，保留v-else所在的元素
(5). v-show  vs  v-if 差别:
a.  v-show 用display:none隐藏元素
b. v-if v-else 用删除元素方式隐藏元素
(6). 问题: v-if或v-else被删除的元素，怎么又重新回到页面的.
	答: 虽然DOM树中的元素被删除了，但是虚拟DOM树中的元素，没有被删除。

(7). 示例: 切换用户登录和注销状态
5_v-if_v-else.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
</head>
<body>
  <!--1. 先做界面
    1.1 找界面中哪里可能发生变化: 
    //本例中: 两个div都会显示隐藏变化
    //多考虑一步: 因为两个div的显示隐藏只是靠用户是否登录这一个状态来控制的。无非判断条件是相反的。所以，只需要一个变量即可！
    1.2 找触发事件的元素
    //本例中: 登录按钮和注销按钮会触发事件
      //点击登录，用户改为已登录状态
      //点击注销，用户改为未登录状态
  -->
  <div id="app">
    <!--第一个div是已登录时显示的内容-->
    <div v-if="isLogin==true"><h3>Welcome, dingding | <a href="javascript:;" @click="logout">注销</a></h3></div>
    <!--第二个div是未登录时显示的内容-->
    <div v-else><a href="javascript:;" @click="login">登录</a> | <a href="javascript:;">注册</a></div>  
  </div>
  <script>
    //2. 创建new Vue()对象
    new Vue({
      el:"#app",
      //3. 创建模型对象: 
      //3.1 创建data对象，保存界面中需要的所有变量
      //本例中: 只需要一个变量isLogin，用来表示用户是否登录
      data:{
        isLogin:false //开局，默认用户是未登录
      },
      //3.2 创建methods对象，保存界面中需要的所有函数
      //本例中: 需要两个函数，所以
      methods:{
        login(){
          //让用户变成已登录状态
          this.isLogin=true;
        },
        logout(){
          this.isLogin=false;
        }
      }
    })
  </script>
</body>
</html>
  1. v-else-if:
    (1). 何时: 今后只要多个元素, 多选一显示隐藏，就可用v-else-if和v-if、v-else配合实现
    (2). 如何:
<元素1 v-if="条件1">
<元素2 v-else-if="条件2">
... ...

<元素n v-else>
a. v-if、v-else-if和 v-else所在的多个元素必须连着写！中间不能插入任何其他元素！
b. v-else后一定不要写条件！
(3). 原理: 
a. 每当new Vue()扫描到v-if时，会先执行=右边的判断条件。如果判断条件为true，则保留v-if所在的元素，删除除v-if之外的其余元素
b. 如果判断条件为false，则继续向后判断后续v-else-if后的条件。如果任意一个v-else-if的条件为true，则保留这个v-else-if所在的元素，删除其余元素
c. 如果所有v-if和v-else-if的条件都不满足，则只保留v-else所在的元素，删除其余元素。
(4). 示例: 根据pm25数值，显示不同表情
6_v-else-if.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
</head>
<body>
  <!--1. 做界面
    1.1 找可能发生变化的地方
    //本例中: 四个img元素的显示隐藏会发生变化。但是，因为四个img元素的显示隐藏都参照一个指标——pm25数值。所以，只需要1个变量即可！
  -->
  <div id="app">
    <h3>今日空气质量:
      <img v-if="pm25<100" src="img/1.png">
      <img v-else-if="pm25<200" src="img/2.png">
      <img v-else-if="pm25<300" src="img/3.png">
      <img v-else src="img/4.png">
    </h3>
  </div>
  <script>
    //2. 创建new Vue()对象
    new Vue({
      el:"#app",
      //3. 创建模型对象
      data:{
        pm25:367
      }
    })
  </script>
</body>
</html>
  1. v-for:
    (1). 什么是: 专门反复生成多个相同结构的元素的特殊指令。
    (2). 何时: 今后只要在网页上，反复生成多个相同结构，但是内容不同的一组元素时，都用v-for
    (3). 如何:
<要反复生成的元素 v-for="(当前元素值, 当前位置) of 数组" :key="i">

(4). 原理: 
a. 当new Vue()扫描到v-for时，先遍历of后的数组中每个元素
b. 每遍历一个数组元素，就会自动创建当前元素的一个副本。
c. 每次遍历时，都会取出当前数组元素值和当前下标位置，保存到of前的两个变量中: 
	1). of前的第一个变量，自动接住当前元素值
	2). of前的第二个变量，自动接住当前下标位置
d. of前的两个变量，在当前元素范围内，可用于绑定语法或指令中，动态生成内容！

e. 坑: Vue中禁止使用下标，修改数组中的元素值。
	原因: 数组的下标是数字，Vue只能监控自定义名称的属性，无法监控数字下标！
	解决: 今后只要修改数组的内容，都必须用数组API修改。因为数组的所有API都是受到vue监控的。
	比如: vm.数组[i]=新值  错误！页面不会改变
		vm.数组.splice(i,1,新值) 正确
		//       先删除i位置的一个旧元素，再在i位置添加一个新元素——替换
		//复习第一阶段的数组函数
f. 问题: v-for反复创建的多个元素，除了内容不同之外，默认没有任何差别！如果我们用程序修改了数组中某一个元素时，v-for不知道该对应修改哪个元素副本。于是，就会采用最笨的方法——删除所有旧元素，重新遍历整个数组，并重建整个列表。——效率极低
g. 解决: 今后只要使用v-for，都必须同时绑定:key="i"属性。
h. 结果: 
	1). 从此，v-for生成的每个元素副本身上，都多了一个唯一的标识key。值是不重复的。
	2). 修改数组中任何一个元素值时，都只需要通过下标，找到这个元素值对应位置的DOM元素副本，只修改一个元素即可。不用重建整个列表。——效率高

i. 其实: v-for不但可以遍历数组，还可以遍历对象，类数组对象等等——看小程序视频
j. 其实: v-for还会数数: 
<元素 v-for="i of 整数">
k. 原理: v-for会从1开始，数数，每次递增1，直到给定的整数位置。每数一个数，就会自动创建一个元素的副本。

常见错误:
Error compiling template: HTML界面中语法错误
跳过前边大块HTML代码
直接找到 “-” 位置，才是真正出错的位置

总结:

  1. MVVM: 界面View+模型Model+视图模型ViewModel
  2. Vue绑定原理: 访问器属性+虚拟DOM树
    变量被修改时: 访问器属性发出通知，虚拟DOM树扫描并仅更新受影响的元素
  3. 虚拟DOM树优点:
    (1). 小: 只包含可能变化的元素。
    (2). 遍历查找快
    (3). 修改效率高: 只修改受影响的元素。
    (4). 避免重复编码: 已封装DOM增删改查代码
  4. Vue功能3步:
    (1). 先创建增强版的界面:
    a. 整个界面必须包含在一个唯一的父元素下:
    通常是<div id="app">
    b. 可能变化的元素内容用{{自定义变量名}}标记
    c. 触发事件的元素用@click="自定义处理函数名"标记
    (2). 再创建new Vue()对象,其中el:指向new Vue()要监控的页面区域
    (3). 在new Vue()对象内定义模型对象data和methods
    a.界面所需的所有变量都放在data中
    b.界面所需的所有事件处理函数都放在methods中

总结: 绑定语法+13种指令

  1. 如果元素的内容需要随变量自动变化: {{}}
  2. 如果元素的属性值需要随变量自动变化: :
  3. 控制一个元素显示隐藏: v-show
  4. 控制两个元素二选一显示: v-if v-else
  5. 多个元素多选一显示: v-if v-else-if v-else
  6. 只要反复生成多个相同结构的元素组成列表时: v-for :key=“唯一标识”
    强调: 为什么必须加:key=“i”？给每个元素副本添加唯一标识。修改数组中某个元素值时，避免重建整个列表，只需要修改一个DOM元素副本即可！提高修改效率。

总结: this 8种: 判断this，一定不要看定义在哪儿！只看调用时！

  1. obj.fun() this->obj
  2. fun() 或 (function(){ … })() 或 多数回调函数 或 定时器函数 this->window
  3. new Fun() this->new正在创建的新对象
  4. 类型名.prototype.共有方法=function(){ … } this->将来谁调用指谁，同第一种情况
  5. DOM或jq中事件处理函数中的this->当前正在触发事件的DOM元素对象
    如果需要使用简化版函数，必须$(this)
  6. 箭头函数中的this->箭头函数外部作用域中的this
  7. jQuery.fn.自定义函数=function(){ … } this->将来调用这个自定义函数的.前的jQuery子对象，不用再$(this)
  8. new Vue()中methods中的函数中的this->当前new Vue()对象
轩轩990218
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue插值语法
qq_40792800的博客
09-30 1698
Vue的插值语法：{{}} chacao中需要写 js 表达式，且能够自动读取到data中定义的属性 <!-- 创建容器 --> <div id="root"> <h1>hello,{{name}}</h1> <h1>我的年龄是,{{age}}</h1> <h1>1+1的和,{{1+1}}</h1> <h1>当前时间：{{ new Date().getTime()}}&lt..
Vue学习笔记（一）插值语法和指令
weixin_46015333的博客
12-31 2591
文章目录一、Vue是什么？二、知识点2.1.基础结构2.2.模板语法2.2.1.插值语法{{}}2.2.指令v-htmlv-oncev-bindv-if 、v-else-if、v-elsev-showv-on:clickv-for总结 一、Vue是什么？ Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各
Vue基本语法——插值语法
renaissance79的博客
09-24 3273
一、模板语法 1.1插值语法 1.1.1mustache语法 如果我们希望把数据展示到模板（template）中，使用最多的是Mustache语法（双大括号）的文本插值： 1.1.2 v-once 用于指定元素或者组件只渲染一次： 当数据变化时，元素或组件将视为静态内容并跳过； 该指令可以用于性能优化； 1.1.3 v-text 用于更新元素的textContent： 1.1.4 v-html 默认情况下，如果我们展示的内容本身是html...
插值语法与指令语法
qq_50768380的博客
09-29 519
2.v-model.value可以简写成v-model，因为v-model默认收集的就是value的值。//el用于指定当前vue实例为哪个容器服务,值通常为css选择器字符串。//el用于指定当前vue实例为哪个容器服务,值通常为css选择器字符串。//el用于指定当前vue实例为哪个容器服务,值通常为css选择器字符串。//data用于存储数据,数据供el所指定的容器使用。//data用于存储数据,数据供el所指定的容器使用。//data用于存储数据,数据供el所指定的容器使用。
Vue插值表达式及常用指令
最新发布
qq_44741577的博客
02-01 1353
插值表达式是vue框架提供的一种在html模板中绑定数据的方式，使用。
Vue入门day01笔记
10-27
我是新手，今天的笔记，看视屏自己做的笔记，记录一下第一次用这个
day01-VUE进阶
10-29
day01-VUE进阶
Vue Day7 综合案例
08-11
Vue Day7 综合案例
vue-day01思维导图
10-15
vue入门思维导图，自己学习的一个大概方向。上传的是xmind文件，可以看备注详情
Vue Day7 代码 vuex
08-11
Vue Day7 代码 vuex
【Vue】模板语法——文本插值
早睡早起长头发的博客
02-01 1540
在底层机制中，Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统，当应用状态变更时，Vue 能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的 DOM 操作。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。这种 {{ }} 语法的专业名称是插值表达式（英文名为：Mustache），在实际开发中用的最多。在 vue 提供的模板渲染语法中，除了支持绑定简单的数据值之外，还。只是内容的占位符，不会覆盖原有的内容。
Vue中的6种插值操作总结，还有你不知道的吗？
零碎@流年絮语 的博客
01-22 434
第一种：Mustache Mustache语法(也就是双大括号)。 Mustache: 胡子/胡须。（胡子语法） 数据是响应式的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g
Vue基础语法-插值操作
好记性不如烂键盘
08-28 638
插值操作 插值运算符 语法： {{数据}} 插值运算符可以显示也可以对数据进行计算 代码： <div id="app"> <h2>{{firstName}} {{lastName}}</h2> <h2>年龄：{{count*2}}</h2> </div> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ fi
vue中的插值表达式和指令
weixiwo的博客
04-07 1032
3.对于循环渲染列表，直接改变数组的数据不会更新到页面上，可以直接使用push,pop,shift,unshift,splice,sort,reverse方法修改数组的内容实现页面的更新，或者修改数组对象的引用。v-for和v-if不能连用的情况，v-for的优先级会高于v-if，所以嵌套使用的话，每个v-for的渲染的列表都会执行v-if造成不必要的计算，影响整体性能，此时可以在v-for外层套一个template标签来处理v-if，或者使用computed计算属性来规避v-if。此时age会变成数组。
VUE_学习笔记
滨海之君的博客
04-12 567
模板语法
vue 项目中 向数组 添加元素 的方式
热门推荐
YHLSunshine的博客
04-21 1万+
vue 项目中 向数组 添加元素 的方式 及合并数组的方法
vue第一天笔记13——computed
lqh的博客
08-18 107
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
Vue插值表达式和事件
qac的博客
01-25 557
文章目录01.Vue声明式渲染02.MVVM03.Vue使用相关问题04.插值表达式05.事件06.操作标签内容 01.Vue声明式渲染 <body> <div id="#app"> {{msg}} </div> <script src="js/vue.js"></script> <script> new Vue({ el:"#app", data:{ msg:"Hello!Vue" }
vue dayjs引入
09-06
要在Vue项目中使用Day.js，你需要先安装Day.js和相应的插件。请按照以下步骤进行操作： 1. 在命令行中进入你的Vue项目文件夹，然后运行以下命令来安装Day.js和相关插件： ``` npm install dayjs npm install vue-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值