前端学习记录 Day7（Vue）

朴灿烈づ我的快乐病毒、 2021-11-11 18:26 465阅读 0赞

文章目录

  • Day 7
  • 前导知识
  • 前端的三大框架
    • React
    • AugularJS
    • Vue.js
  • Vue入门
  • 使用Vue
  • 基础指令
    • 插值表达式 + v-cloak + v-text + v-html
    • v-bind + v-on
    • 综合案例：使用Vue实现跑马灯效果
    • v-model
    • 综合案例：双向数据绑定实现简单计算器
    • v-for
    • v-if、v-show
    • 过滤器
    • 自定义指令

Day 7

2019年8月6日。
这是我学习前端的第七天。
这一天，我学到了以下的知识。

前导知识

学习之前思考两个问题：什么是框架，什么是库

  • 框架是一个软件的半成品，在全局范围内给了大的约束。jQuery是库。
  • 库是工具，在单点上给我们提供功能。框架是依赖库的。Vue是框架，

什么是MVC

MVC的核心理念是：你应该把管理数据的代码（Model）、业务逻辑的代码（Controller）、以及向用户展示数据的代码（View）清晰的分离开
在这里插入图片描述
通过MVC框架又衍生出了许多其它的架构，统称MV/*，最常见的是MVVM

Vue与Angular就是一个MVVM框架，MVVM与MVC最大的区别是模型与视图实现了双向绑定（即数据更新，页面也会同步更新，反之亦然）

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上

Vue.js 可以说是MVVM 架构的最佳实践，专注于 MVVM 中的 ViewModel，不仅做到了数据双向绑定，而且也是一款相对来比较轻量级的JS 库，API 简洁，很容易上手。

在这里插入图片描述

前端的三大框架

React

在这里插入图片描述
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用。

AugularJS

在这里插入图片描述
AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是:MVC(Model–view–controller)、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

AngularJS通过为开发者呈现一个更高层次的抽象来简化应用的开发。如同其他的抽象技术一样，这也会损失一部分灵活性。换句话说，并不是所有的应用都适合用AngularJS来做。AngularJS主要考虑的是构建CRUD应用。幸运的是，至少90%的WEB应用都是CRUD应用。

Vue.js

在这里插入图片描述
Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API，作者是尤雨溪，是中国人。

  • 易用：已经会了HTML,CSS,JavaScript？即刻阅读指南开始构建应用！
  • 灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
  • 性能：超快虚拟 DOM 、最省心的优化

在这里插入图片描述

Vue入门

官网的文档，就是最好的学习资源了，没有比他更好的了，地址：https://cn.vuejs.org/v2/guide/

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与 现代化的工具链以及各种 支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

不适合SEO、交互频繁的，如游戏之类交互体验网站。

使用Vue

  1. 下载Vue
    可以去vue2的官网或者git（https://github.com/vuejs/vue） 下载，在案例中将vue.js放在了项目中的lib目录下，如图所示（建议将bootstrap.css和vue-resources一起放入）：
    在这里插入图片描述
  2. 安装Vue的插件
    在这里插入图片描述
    消除未知指令的错误 ： 在标签上使用alt+enter键，并添加命名空间即可

基础指令

插值表达式 + v-cloak + v-text + v-html

  1. 插值表达式：
    语法：{ {要插入的值}}，此时相当于占位符，到时候{ {关键字}}会被替换成
    Model中的数据
    bug点：
    当网速较慢时，Vue初始化未完成时，插值表达式不能被解析，会直接显示
    出来，加载完毕之后又会被替换成真实结果，造成闪烁（Vue的加载代码写在
    HTML元素之后时会出现该bug）

  2. v-cloak指令：
    语法：把它当作HTML元素的一个属性使用
    示例：

    1. <p v-cloak>{
    2.      {msg1}}</p>

    特点：
    当Vue加载完毕后，v-cloak属性会自动消失
    使用：
    添加如下CSS样式：让所有带v-cloak属性的元素隐藏，Vue加载完成后显示
    实现，解决插值表达式闪烁的问题

    [v-cloak]{ 

    1.           display: none;
    2.       }

  3. v-text：
    语法：<p v-text="msg1"></p>
    作用：和插值表达式一样，用于给HTML元素添加文本
    区别：

    1. v-text不会存在闪烁问题
    2. v-text会将Model中的数据完全替换到HTML元素中（覆盖）
    3. 插值表达式只会将Model中的数据替换到插值表达式中（占位符内容的替换）
      相同点：
    4. 插值表达式和v-text都可以给HTML元素显示文本
    5. 插值表达式和v-text都不会解析要添加文本中的HTML标签（原样显示）
  4. v-html：
    和v-text的唯一区别：给HTML添加内容时会解析内容中的HTML

综合运用案例如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>v-cloak、v-text、v-html指令以及插值表达式的学习</title>
  6.     <style> [v-cloak]{ display: none; } </style>
  7. </head>
  8. <body>
  10.     <h1>v-cloak、v-text、v-html指令以及插值表达式的学习</h1>
  11.     <div id="app">
  12.         <p v-cloak>{
  13.    {msg1}}</p>
  14.         <p>{
  15.    {msg1}}</p>
  16.         <p v-text="msg1"></p>
  17.         <p v-text="msg2"></p>
  18.         <p>{
  19.    {msg2}}</p>
  20.         <p v-html="msg2"></p>
  21.     </div>
  23.     <script src="../lib/vue.js" type="text/javascript"></script>
  24.     <script type="text/javascript"> //vue应用对象 var vm = new Vue({ 绑定属性 el:"#app", data:{ msg1:"Hello", msg2:"<p style='color:red'>我是一个p标签</p>" } }); </script>
  25. </body>
  26. </html>

v-bind + v-on

  1. v-bind：
    语法：在HTML元素的属性目前加上绑定标识，此时HTML的该属性的值就会根据属性值的名字从Model中获取数据
    示例：

    1. <label>用户名：<input type="text" name="username" v-bind:value="msg" /></label>
    2.         var vm = new Vue({
    3.             el:"#app",
    4.             data:{
    5.                 msg:"我是来自Model中的内容！",
    6.                 name:"李师师"
    7.             }
    8.         });

    注意：

    1. 【v-bind:】用于绑定HTML元素属性的值
    2. 【v-bind:】可以简写为:

    3. Vue框架会把使用了v-bind:标识的HTML的属性的值当作一个Javascript表达式来使用
      只要表达式合法，就能执行（当然，数据必须时字面量或来自于Model中）
      如：

      :value=”msg+’你好’”
      :value=”msg+name”

  2. v-on：
    语法：在HTML的事件属性（不带on）前加上绑定标识，此时HTML触发此事件时，会执行事件中绑定的代码
    示例：

    1. <button v-on:click="sayHello(name)">点击下显示你好</button>
    2.     <button @click="sayHello(name)">点击下显示你好</button>
    3.     var vm = new Vue({
    4.         el:"#app",
    5.         data:{
    6.             msg:"我是来自Model中的内容！",
    7.             name:"李师师"
    8.         },
    9.         methods:{
    10.             sayHello:function (name) {
    11.                 alert("你好！"+name);
    12.             }
    13.         }
    14.     });

    注意：

    1. 常见的web网页的事件都支持绑定
    2. 事件名字不带on
    3. 事件触发的方法必须在methods中定义
    4. v-on标识的属性会被Vue解析为特定JavaScript，只要内容符合JavaScript规范
      都能正确执行（比如传入参数）
    5. 【v-on:】等价于【@】

综合运用案例如下：

  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>v-bind、v-on指令的学习</title>
  6.     <script src="../lib/vue.js" type="text/javascript"></script>
  7. </head>
  8. <body>
  9.     <h1>v-bind、v-on指令的学习</h1>
  10.     <div id="app">
  11.         <label>用户名：<input type="text" name="username" v-bind:value="msg" /></label>
  12.         <hr/>
  13.         <label>用户名：<input type="text" name="username" :value="msg" /></label>
  14.         <hr/>
  15.         <label>用户名：<input type="text" name="username" :value="msg+'你好'"></label>
  16.         <hr/>
  17.         <label>用户名：<input type="text" name="username" :value="msg+name"></label>
  18.         <button v-on:click="sayHello(name)">点击下显示你好</button>
  19.         <button @click="sayHello(name)">点击下显示你好</button>
  20.     </div>
  22.     <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ msg:"我是来自Model中的内容！", name:"李师师" }, methods:{ sayHello:function (name) { alert("你好！"+name); } } }); </script>
  23. </body>
  24. </html>

综合案例：使用Vue实现跑马灯效果

知识点：

  1. v-on:指令或@
  2. v-html指令
  3. 定时器（正确启动和停止）
  4. 字符串截取
  5. ECMAScript6新特性

  6. this对象指代

    【入坑】

    1. 在Vue对象vm的作用域外去使用Model中的数据或methods中定义的方法
    2. JavaScript对象属性、方法赋值时使用了=号，应该使用:号，如age:56
      【ECMAScript6的新特性】
    3. 给JavaScript对象方法定义值时
      标准：sayHello:function(){}
      ES6：此时，方法名sayHello会作为对象的属性方法值sayHello(){ }
    4. 箭头函数的使用
      标准：setInterval(function(){ //此时this对象时Window对象 },500);
      ES6：可以把外部环境传入箭头函数所指向的函数内部setInterval(() => { //此时this对依然是外部的this },500);
      【知识点】
    5. 定时器的使用
      步骤1：定义全局的定时器编号，初始值为null
      步骤2：判断定时器编号是否为null
      如果不为null，直接返回（表示此时定时器已经启动，不可重复启动）
      如果为null，则使用setInterval()启动定时器，并保存定时器编号到全局定时器变量中
      步骤3：停止定时器
      使用clearInterval()停止定时器，并把全局的定时器编号变量赋值为null
      便于下次继续启动
    6. Vue对象
      vue对象中data、methods里面声明的内容全部都会成为vm的直接属性、方法
      所有这些内容应该直接使用this访问，而不是【this.data.xxx、this.methods.xxx()】
      代码如下：

    <!DOCTYPE html>




    使用Vue实现跑马灯效果



    使用Vue实现跑马灯效果




    |





v-model

唯一的一个实现双向数据绑定的指令
语法：

  1. <input type="text" v-model="num1" />
  2.             data:{
  3.                 num1:'0',
  4.                 num2:'0'
  5.             }

适用元素：

  • 表单元素，其它元素不能使用v-model指令
  • input系列（可以输入内容的）、select、textarea

双向绑定：

  • model层数据的改变会影响view层HTML结果
  • HTML中表单元素值的改变会写入对应的model层的数据中

【知识点】
JavaScript的eval()方法可以把一个字符串当作JavaScript代码执行，并返回执行结果，如下所示：

  1. this.result = eval("parseInt(this.num1)"+this.opr+"parseInt(this.num2)");

注意：
当代码很复杂或难以控制时可以使用此方法，大多数还是使用标准方法执行JavaScript代码

综合案例：双向数据绑定实现简单计算器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Vue中的双向数据绑定指令v-mode</title>
  6.     <script src="../lib/vue.js" type="text/javascript"></script>
  7. </head>
  8. <body>
  9.     <div id="box">
  10.         <h1>Vue中的双向数据绑定指令v-mode</h1>
  11.         <label>单价：<input type="text" v-model="price"></label><br/>
  12.         <label>数量：<input type="text" v-model="num"></label><br/>
  13.         <button @click="calc()">点击计算总价</button><br/>
  14.         <label>总价：<span style="color:deeppink" v-text="sum"></span></label>
  16.         <hr/>
  18.         <h1>使用v-model双向数据绑定实现建议计算器</h1>
  19.         <label>操作数1：<input type="text" v-model="num1" /></label>
  20.         <select v-model="opr">
  21.             <option value="+">+</option>
  22.             <option value="-">-</option>
  23.             <option value="*">x</option>
  24.             <option value="/">/</option>
  25.         </select>
  26.         <label>操作数1：<input type="text" v-model="num2" /></label>
  27.         <button @click="doCalc()">=</button>
  28.         <span style="font-size: 20px;color:deeppink" v-text="result"></span>
  29.     </div>
  30.     <script type="text/javascript"> var vm2 = new Vue({ el:"#box", data:{ price:12, num:1, sum:12, num1:'0', num2:'0', opr:'+', result:0 }, <!--不加上function会报错：SCRIPT1003: 缺少 ':'--> methods:{ calc:function () { this.sum = this.price * this.num; }, doCalc:function() { switch(this.opr){ case "+": this.result = parseInt(this.num1)+parseInt(this.num2); break; case "-": this.result = parseInt(this.num1)-parseInt(this.num2); break; case "*": this.result = parseInt(this.num1)*parseInt(this.num2); break; case "/": this.result = parseInt(this.num1)/parseInt(this.num2); break; } this.result = eval("parseInt(this.num1)"+this.opr+"parseInt(this.num2)"); } } }); </script>
  31. </body>
  32. </html>

v-for

语法：

  1. <p v-for="user in users" :key="user.id">
  2.                 <label><input type="checkbox"/>{
  3.    {user.id}}---{
  4.    {user.name}}</label>
  5.             </p>

用法：

1.使用v-for指令遍历简单数组

  1. <p v-for="name in names">{
  2.    {name}}</p>
  3.     <p v-for="name,index in names" v-text="name+'---'+index"></p>

2.使用v-for指令遍历对象数组

  1. <p v-for="user in users">id：{
  2.    {user.id}}---name：{
  3.    {user.name}}</p>

3.使用v-for指令遍历对象属性值

  1. <p v-for="value,key in cqCity">{
  2.    {key+'--'+value}}</p>

4.使用v-for指令遍历数字（作用就是标准的for循环次数遍历）

  1. <p v-for="num,index in 12" v-text="num+'---'+index"></p>

【注意】

  1. 遍历得到的值可以使用【插值表达式、v-text、v-html】显示
  2. 不管遍历何种数据类型，都可以得到值和索引
  3. 遍历对象属性和值时可以得到【值、属性名字、索引】
  4. 值的赋值顺序是：值、【键名】、索引
  5. 一次遍历中，多个结果之间使用,分割即可对应赋值（value,key,index）
  6. 遍历过程中接受值的变量名字可以任意
  7. 遍历数字时数字是从1开始，不能是负数（因为该功能是固定次数遍历）

  8. 在组件中使用数据时，一定要用key唯一绑定数据（保证对UI组件的操作不会因为其它组件的变化而发生变化）
    注意：

    1. key必须是基本数据类型（string/number）
      报错：Avoid using non-primitive value as key, use string/number value instead.

    2. key的数据值一定不要重复
      报错：Duplicate keys detected: ‘3’. This may cause an update error.
      技巧：一般使用对象中的值唯一属性（主键）作为key，比如id
      【知识点】

    3. 如果组件的属性的值是一个变量，则必须使用v-bind:或者:进行属性值的绑定

    4. 数组的push()方法用于向数组末尾加入元素，数组的unshift()方法用于向数组最前面加入元素
      this.users.push({id:this.id,name:this.name,age:this.age});
      this.users.unshift({id:this.id,name:this.name,age:this.age});
    5. 在遍历对象数组并结合组件（表单元素）一起使用时，一定要指定唯一的key属性，进行组件和数据
      的唯一关联，避免被其它操作（指非本元素）影响

测试代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Vue中的for指令</title>
  6.     <script src="../lib/vue.js" type="text/javascript"></script>
  7. </head>
  8. <body>
  9. <!-- 1.使用v-for指令遍历简单数组 <p v-for="name in names">{ {name}}</p> <p v-for="name,index in names" v-text="name+'---'+index"></p> 2.使用v-for指令遍历对象数组 <p v-for="user in users">id：{ {user.id}}---name：{ {user.name}}</p> 3.使用v-for指令遍历对象属性值 <p v-for="value,key in cqCity">{ {key+'--'+value}}</p> 4.使用v-for指令遍历数字（作用就是标准的for循环次数遍历） <p v-for="num,index in 12" v-text="num+'---'+index"></p> 【注意】 1.遍历得到的值可以使用【插值表达式、v-text、v-html】显示 2.不管遍历何种数据类型，都可以得到值和索引 3.遍历对象属性和值时可以得到【值、属性名字、索引】 4.值的赋值顺序是：值、【键名】、索引 5.一次遍历中，多个结果之间使用,分割即可对应赋值（value,key,index） 6.遍历过程中接受值的变量名字可以任意 7.遍历数字时数字是从1开始，不能是负数（因为该功能是固定次数遍历） 8.在组件中使用数据时，一定要用key唯一绑定数据（保证对UI组件的操作不会因为其它组件的变化而发生变化） 注意： 1.key必须是基本数据类型（string/number） 报错：Avoid using non-primitive value as key, use string/number value instead. 2.key的数据值一定不要重复 报错：Duplicate keys detected: '3'. This may cause an update error. 技巧：一般使用对象中的值唯一属性（主键）作为key，比如id 语法： <p v-for="user in users" :key="user.id"> <label><input type="checkbox"/>{ {user.id}}---{ {user.name}}</label> </p> 【知识点】 1.如果组件的属性的值是一个变量，则必须使用v-bind:或者:进行属性值的绑定 2.数组的push()方法用于向数组末尾加入元素，数组的unshift()方法用于向数组最前面加入元素 this.users.push({id:this.id,name:this.name,age:this.age}); this.users.unshift({id:this.id,name:this.name,age:this.age}); 3.在遍历对象数组并结合组件（表单元素）一起使用时，一定要指定唯一的key属性，进行组件和数据 的唯一关联，避免被其它操作（指非本元素）影响 -->
  10. <div id="app">
  11.     <h1>Vue中的for指令</h1>
  12.     <p v-for="name in names">{
  13.    {name}}</p>
  14.     <hr/>
  15.     <p v-for="name,index in names" v-text="name+'---'+index"></p>
  16.     <hr/>
  17.     <p v-for="user in users" v-text="user"></p>
  18.     <hr/>
  19.     <p v-for="user in users">id：{
  20.    {user.id}}---name：{
  21.    {user.name}}---age：{
  22.    {user.age}}</p>
  23.     <hr/>
  24.     <p v-for="value,key in cqCity">{
  25.    {key+'--'+value}}</p>
  26.     <hr/>
  27.     <p v-for="num in 12" v-text="num"></p>
  28.     <hr/>
  29.     <p v-for="num,index in 12" v-text="num+'---'+index"></p>
  31.     <h1>Vue中的for指令实现数据绑定</h1>
  32.     <label>id：<input type="text" v-model="id"/></label>
  33.     <label>name：<input type="text" v-model="name"/></label>
  34.     <label>age：<input type="text" v-model="age"/></label>
  35.     <label><button @click="add()">添加人员信息</button></label>
  36.     <p v-for="user in users" :key="user.id">
  37.         <label><input type="checkbox"/>{
  38.    {user.id}}---{
  39.    {user.name}}---{
  40.    {user.age}}</label>
  41.     </p>
  42. </div>
  43. <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ names:["陈斯","杨晓露","徐子雁","冉春嫦","冷芹","冉维","彭丽敏","王超群","彭前"], users:[ { id:1,name:"胡歌",age:32}, { id:2,name:"袁弘",age:33}, { id:3,name:"霍建华",age:35} ], cqCity:{ no:"渝",level:"市",area:["渝北区","渝中区","江北区","沙坪坝区","江北区"]}, id:'', name:'', age:'' }, methods:{ add(){ //this.users.push({id:this.id,name:this.name,age:this.age}); this.users.unshift({ id:this.id,name:this.name,age:this.age}); } } }); </script>
  44. </body>
  45. </html>

v-if、v-show

v-if和v-show的区别？

  1. v-if切换元素状态的具体操作是（创建元素–删除元素）
    比较消耗创建性能
  2. v-show切换元素状态的具体操作是（修改css的display样式）
    比较消耗渲染性能

使用技巧：

  • 如果该元素会经常显示/隐藏，则使用v-show
  • 如果该元素默认情况下不会显示（大多数时候不会显示），则使用v-if

代码技巧：

如果使用vue绑定的方法只有一句代码，则可以直接写在绑定结果中

  1. <button @click="flag=!flag">控制元素的显示隐藏</button>

代码演示

  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Vue中的if和show指令</title>
  6.     <script src="../lib/vue.js" type="text/javascript"></script>
  7. </head>
  8. <body>
  9.     <h1>使用vue中的v-if和v-show指令实现元素的显示和隐藏</h1>
  10.     <div id="app">
  11.         <!--
  12.             v-if和v-show的区别？
  13.                 1.v-if切换元素状态的具体操作是（创建元素--删除元素）
  14.                     比较消耗创建性能
  15.                 2.v-show切换元素状态的具体操作是（修改css的display样式）
  16.                     比较消耗渲染性能
  17.             使用技巧：
  18.                 如果该元素会经常显示/隐藏，则使用v-show
  19.                 如果该元素默认情况下不会显示（大多数时候不会显示），则使用v-if
  20.             代码技巧：
  21.                 如果使用vue绑定的方法只有一句代码，则可以直接写在绑定结果中
  22.                 <button @click="flag=!flag">控制元素的显示隐藏</button>
  23.         -->
  24.         <button v-on:click="toggle()">控制元素的显示隐藏</button>
  25.         <button @click="flag=!flag">控制元素的显示隐藏</button>
  26.         <p v-if="flag">我是使用v-if控制的p标签</p>
  27.         <p v-show="flag">我是使用v-show控制的p标签</p>
  28.     </div>
  29.     <script type="text/javascript">
  30.         var vm = new Vue({
  31.             el:"#app",
  32.             data:{
  33.                 flag:true
  34.             },
  35.             methods:{
  36.                 toggle(){
  37.                     this.flag = !this.flag;
  38.                 }
  39.             }
  40.         });
  41.     </script>
  42. </body>
  43. </html>

过滤器

自定义过滤器：
Vue全局过滤器：

  1. 必须定义在创建Vue对象之前（Javascript的边解析边执行原理）
  2. 定义之后在整张页面中可以使用（一个页面一个Window，一个Window下只有一个Vue）

  3. 定义方式
    参数1：固定（需要被过滤处理的数据）
    参数2…参数n：过滤器被调用时传递的参数

    Vue.filter(“过滤器名字”,function(data,param1,param2…){

    1.         });

  4. 调用方式

    {
    {msg|v-过滤器名字(参数值1,参数值2…)|过滤器2…|过滤器n…}}

Vue具体对象（特定作用域）过滤器：

  1. 定义在一个Vue对象中

  2. 定义方式

    var vm = new Vue({

    1.             el:"#app1",
    2.             data:{},
    3.             methods:{},
    4.             filters:{
    5.                 过滤器名字:function(data,param1,param2...){
    6.                 }或
    7.                 过滤器名字(data,param1,param2...){
    8.                 }
    9.             }
    10.         });

【注意】

  1. 全局过滤器一定要定义在使用Vue之前
  2. Vue的过滤器执行原理
    渲染内容 – 交给第一个处理器 – 得到结果 – 交给第二个处理器 – 得到结果 … 得到结果–渲染

代码实现

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>在Vue中自定义过滤器</title>
  6.     <script src="../lib/vue.js" type="text/javascript"></script>
  7. </head>
  8. <body>
  9.     <h1>在Vue中自定义过滤器</h1>
  10.     <div id="app1">
  11.         <h4>{
  12.    {msg|replaceWords('我','他')|addStartInfo('----')}}</h4>
  13.     </div>
  14.     <hr/>
  15.     <div id="app2">
  16.         <h4>{
  17.    {msg|replaceWords('你','我')|addStartInfo('----')|addEndInfo('~~~~~')}}</h4>
  18.     </div>
  19.     <script type="text/javascript"> //定义全局过滤器 Vue.filter("replaceWords",function (data,oldWorld,newWorld) { var reg = new RegExp(oldWorld,"g"); return data.replace(reg,newWorld); }); Vue.filter("addEndInfo",function (data,endInfo) { return data.concat(endInfo); }); var vm1 = new Vue({ el:"#app1", data:{ msg:"我是你的爱人，我是对你最好的人，我好伤心，你从未关心我！" }, methods:{ }, filters:{ addStartInfo(data,startInfo){ return startInfo.concat(data); } } }); var vm2 = new Vue({ el:"#app2", data:{ msg:"我是你的爱人，我是对你最好的人，我好伤心，你从未关心我！" }, methods:{ } }); </script>
  20. </body>
  21. </html>

自定义指令

自定义指令：https://cn.vuejs.org/v2/guide/custom-directive.html#ad
系统内置：
v-cloak、v-text、v-html、v-bind、v-on、v-for、v-if、v-show、v-model
自定义：
全局：

  1. 必须定义在使用Vue之前（边解析边执行原理）

  2. 定义方式
    参数1：指令名字
    参数2：各声明周期函数组成的对象（周期函数可选重写，并不一定需要全部重写）

    • bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
    • inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
    • update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
    • componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用
    • unbind：只调用一次，指令与元素解绑时调用

生命周期函数的参数说明：

  • el：指令所绑定的元素，可以用来直接操作 DOM 。
  • binding：一个对象，包含以下属性（def、name、rawName、value、expression、modifiers）
  • vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
  • oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。语法

语法：

  1. Vue.directive("指令名字",{
  2.                     bind:function (el, f, vnode) {},
  3.                     inserted:function (el, binding, vnode, oldVnode) {},
  4.                     update:function (el, ref, vnode) {},
  5.                     componentUpdated:function (el, binding, vnode) {},
  6.                     unbind:function (el, binding, vnode, oldVnode, isDestroy) {}
  7.                 });

局部：
语法：

  1. var vm = new Vue({
  2.                 el:"#app",
  3.                 data:{},
  4.                 methods:{},
  5.                 filters:{},
  6.                 directives:{
  7.                     指令名字1:{
  8.                         bind:function(){},
  9.                         inserted:function(){},
  10.                         update:function(){},
  11.                         componentUpdated:function(){},
  12.                         unbind:function(){}
  13.                     },
  14.                     指令名字2:{}
  15.                     ....
  16.                 }
  17.             });

简易定义方式：

  1. Vue.directive("指令名字",function(el,binding,vnode,oldVnode){
  2.         此时function中的代码会作用到bind和inserted钩子函数上
  3.     });

【注意】

  1. 自定义的指令，Vue系统会自动给名字加上v-
  2. 调用指令时，一定要加上v-，如果你的指令名字是以v-开始，则最终调用是v-v-指令名字
  3. 自定义的指令，需要指定其对应的钩子函数（如不指定，则使用默认实现）
  4. 自定义指令时，常关注的钩子函数（bind、inserted）（因此自定义指令的简写方式默认就是实现该钩子函数）

  5. bind和inserted执行时机详讲

    Vue.directive(“color”,{

    1.         bind:function (el,binding) {
    2.             //css样式可以在bind中设置
    3.             el.style.color=binding.value; //获取指令传递过来的数据（可以是任意数据类型）
    4.         },
    5.         inserted:function (el,binding) {
    6.             //JavaScript效果等需要在inserted中设置
    7.             el.focus();
    8.         }
    9.     });

代码实现

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>在Vue中自定义过滤器</title>
  6.     <script src="../lib/vue.js" type="text/javascript"></script>
  7. </head>
  8. <body>
  9.     <h1>在Vue中自定义过滤器</h1>
  10.     <div id="app1">
  11.         <h4>{
  12.    {msg|replaceWords('我','他')|addStartInfo('----')}}</h4>
  13.     </div>
  14.     <hr/>
  15.     <div id="app2">
  16.         <h4>{
  17.    {msg|replaceWords('你','我')|addStartInfo('----')|addEndInfo('~~~~~')}}</h4>
  18.     </div>
  19.     <script type="text/javascript"> //定义全局过滤器 Vue.filter("replaceWords",function (data,oldWorld,newWorld) { var reg = new RegExp(oldWorld,"g"); return data.replace(reg,newWorld); }); Vue.filter("addEndInfo",function (data,endInfo) { return data.concat(endInfo); }); var vm1 = new Vue({ el:"#app1", data:{ msg:"我是你的爱人，我是对你最好的人，我好伤心，你从未关心我！" }, methods:{ }, filters:{ addStartInfo(data,startInfo){ return startInfo.concat(data); } } }); var vm2 = new Vue({ el:"#app2", data:{ msg:"我是你的爱人，我是对你最好的人，我好伤心，你从未关心我！" }, methods:{ } }); </script>
  20. </body>
  21. </html>

发表评论

表情：
评论列表 （有 0 条评论，465人围观）

还没有评论，来说两句吧...

相关阅读