vue基础开始

此笔记是我在拉勾学习课程过程中的总结,文字原创,笔记里很多技巧和知识是老师总结的,如果有侵权,请联系本人!

vue框架基础

vue.js简介

传统网页开发

请求数据->生成结构->监听变化

元素变化->发送请求->更新结构

DOM操作与逻辑代码混合,可维护性差,模块之间依赖关系复杂,

vue.js

渐进式 JavaScript框架

vue.js核心特性

数据驱动视图

  • 数据变化自动更新到对应元素,无需操作dom,称为单向数据绑定

  • 对于输入框等可输入元素,可设置双向数据绑定

    ·双向数据绑定在数据绑定的基础上,可以自动元素输入内容更新给数据,实现数据与元素内容的双向绑定

实现原理

  • vue.js的数据驱动视图基于MVVM模型实现

  • MVVM(Model – View – ViewModel )是一种软件开发思想

    • model层,代表数据

    • view层代表视图模板

    • viewmodel层,代表业务逻辑处理代码

优缺点

  • 基于MVVM模型实现了数据驱动解放DOM操作

  • view与model处理分离,降低代码耦合

  • 双向绑定bug调试难度大

  • 大型项目的view和model过多,维护成本高

组件化开发

  • 允许封装为自定义的HTML标签,复用时书写自定义标签名即可

  • 组件可以封装结构,逻辑代码、样式,提高了开发效率和可维护性。

vue下载

本地引入

• 开发版本:https://cn.vuejs.org/js/vue.js
• 生产版本:https://cn.vuejs.org/js/vue.min.js

cdn 引入

• 最新稳定版: https://cdn.jsdelivr.net/npm/vue
• 指定版本:
https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js

npm 安装

• 最新稳定版:
• npm install vue
• 指定版本
• npm install vue@2.6.12

基础语法

vue实例

通过vue函数创建的对象,是vue功能的基础

var vm = new Vue({
    //选项内容
    })

el选项

  • 用于选取一个DOM 元素作为vue实例挂载目标

  • 只有挂载在元素内部才能被vue处理,外部为普通的html元素

  • 代表mvvm中的view层

设置方式

  • 可以为css选择器格式的字符串或者HTMLElement实例,但是不能为html或者body
    并且不可为选中的类数组,只能是类数组中的某个元素
var vm = new Vue({
    el:'#app'
    })

var app = document.querySelector('#app');
var vm = new Vue({
    el:app
    })

挂载完毕后可以用vm.$el进行访问

var vm = new Vue({
    el:'#app'
    })
console.log(vm.$el)
  • 未设置el的vue实例,可以通过vm.$mount()进行挂载,参数形式与el规则相同
  <!-- 挂载元素 -->
  <div id="app"></div>

  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el:'#app'
    })
    console.log(vm.$el);

    var app = document.querySelector("#app");
    var vm = new Vue({
      el:app
    })
    console.log(vm.$el);
    
    var app = document.getElementById('app');
    var vm = new Vue();
    // vm.$mount('#app');
    vm.$mount(app);
    console.log(vm.$el);
  </script>

插值表达式

  • 挂载元素可以使用Vue.js模板语法,模板中可以通过插值表达式进行动态内容设置,写法是{{}}

注意:
· 插值表达式只能书写在标签内容区域,可以与其他内容混合
· 内部只能书写JavaScript表达式,不能写语句

  <div id="app">
    <ul>
      <li>第一段示例内容:{{10 + 10 + 29}}</li>
      <li>第二段示例内容:{{ 22 > 3 ? '22比2大':'22比3小'}}</li>
      <!-- <li id="{{ 1+2}}"></li> -->
      <!-- <li>{{ var num = 10; }}</li> -->
    </ul>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    new Vue({
      el:'#app'
    })
  </script>

data选项

  • 用于存储vue实例需要使用的数据,值为对象类型。

    data本质就是存储数据
    data中可以存储对象,可以存储一个或多个数据以供视图操作

操作数据:

  • data中的数据可以通过 vm.$data数据 或者 vm.数据 访问

  • data中的数据可以直接在视图中通过插值表达式访问

  • data中的数据是响应式数据,发生改变时,视图自动更新

  • data中存在数据时,索引操作与length操作无法自动更新视图,可以借助Vue.set()方法替代操作。

  <div id="app">
    <!-- <p>{{ title }}</p> -->
    <ul>
      <li>{{ arr[0] }}</li>
      <li>{{ arr[1] }}</li>
      <li>{{ arr[2] }}</li>
    </ul>
  </div>

  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el:'#app',
      data:{
        // title:'标题文本',
        arr : ['内容1','内容2','内容3']
      }
    })
    // vm.arr.pop()数组的操作依旧可以实现,但是length和索引功能无法使用
    Vue.set(vm.arr,1,'这是新的内容')
    // vm.title = '这是新文本'
    // 访问data数据
    console.log(vm.$data.title);
    console.log(vm.title);
  </script>

method 选项

  • 用于存储在vue实例中使用的函数

  • methods中的方法可以通过 vm.方法名 访问

  • 方法中的this为vm实例,可以便捷的访问 vm 数据等功能

  <div id="app">    
    <p>{{ title1.split('-').join('') }}</p>
    <p>{{ title2.split('-').join('') }}</p>
    <p>{{ fn(title1) }}</p>
    <p>{{ fn(title2) }}</p>
  </div>

  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el:'#app',
      data:{
        prefix:'处理结果为:',
        title1:'a-b-c-d-e',
        title2:'x-y-z'
      },
      methods:{
        fn(value){
          this.fn1();
          this.fn2();
          return this.prefix + value.split('-').join('');
        },
         fn1 () {
           console.log('执行了fn1');
         },
         fn2 () {
           console.log('执行了fn2');
         }
      }
    })
    console.log(vm);
  </script>

vue.js指令

本质是HTML自定义属性,是给框架识别的标记

以 v- 开头的自定义属性都是 vue 指令

内容处理功能

v-once指令

  • 使元素内部的插值表达式只生效一次
<body>
  <div id="app">
   <p>此内容会随着数据变化而自动变化:{{content}}</p>
   <p v-once>此内容不会随着数据变化而自动变化:{{content}}</p>
  </div>

  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el:'#app',
      data:{
        content:'元素内容'
      }
    })
  </script>

v-text指令

  • 元素内容整体替换为指定纯文本数据
  <div id="app">
    <p v-text="content">这是 p 标签的原始内容</p>
    <p v-text="100">这是 p 标签的原始内容</p><!-- 一般不直接指定数值 -->
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el:'#app',
      data:{
        content:'文本内容',
        content2:'<span>这是span内容</span>'
      }
    })
  </script>

v-html指令

作用:

  • 元素内容整体替换为指定的 html 文本
  <div id="app">
      <p v-html="content">这是原始内容</p>
  </div>
  <script src="lib/vue.js"></script>
  <script>
       var vm = new Vue({
         el:'#app',
         data: {
          //  content:'这是新内容',
           content:'<span>这是span内容</span>'
         }
       })
  </script>

属性绑定

v-bind指令

  • 动态绑定HTML属性

  • 与插值表达式类似,v-bind中也允许使用表达式

  • 如果一次绑定多个属性,还可以绑定对象

  <div id="app">
    <p v-bind:title="myTitle">这是p标签内容</p>
    <p :title='myTitle'>这是p标签的内功</p>

    <p :class="'num'+ 1 + 2 + 3">111</p> 
    <p :class="prefix + num">222</p>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el:'#app',
      data:{
        myTitle:'这是属性',
        prefix:'demo',
        num:10
      }
    })
  </script>
  <div id="app">
    <p v-bind="attrObj">这是 p 标签的内容</p>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vn = new Vue({
      el:'#app',
      data:{
        attrObj:{
          id : 'box',
          title:"市里内容",
          class : "clearFix",
          'datatitle': "这是data-title的内容"
        }
      }
    })
  </script>

Class绑定

  • class可以通过v-bind绑定,也可以与class属性共存

  • 对于class绑定,vue.js中还提供了特殊处理方式

  <div id="app">
    <p v-bind:class="cls1">标签内容</p>
    <p class="a" :class="cls2">标签内容</p>

    <!-- 下面是错误写法 -->
    <!-- <p class="a b c" :class="cls1 cls2 cls3"></p> -->

    <!-- <p :class='cls'></p> -->

    <!-- <p :class="bool ? cls1 : cls2"></p> -->

    <p :class='{x: isX, y: false, z: true}'></p>
    <p :calss='["a", classB,{c: isC}]'></p>
  </div>

  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        classB: 'B',
        isC: true
        // bool:'ture',
        // cls:'q e w',
        // cls1: 'x',
        // cls2: 'y',
        // cls3: 'z'
      }
    })
  </script>

Style绑定

  • style 是 HTML属性,可以通过v-bind进行绑定,并且可以与style属性共存。

  • 当我们希望给元素绑定多个样式对象时,可以设置为数组

<div id="app">
  <p :style="[baseStyle, styleObj1]">第一个 p 标签</p>
  <p :style="[baseStyle, styleObj2]">第二个 p 标签</p>
</div>
<script src="lib/vue.js"></script>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      // 公共样式
      baseStyle: {
        width: '100px',
        height: '100px'
      },
      styleObj1: {
        backgroundColor: 'red'
      },
      styleObj2: {
        backgroundColor: 'blue'
      }
    }
  });
</script>

渲染指令

v-for 指令

  • 用于遍历数据渲染结构,常用数组与对象均可遍历

  • 使用v-for 的同时,应该始终指定唯一的 key 属性,可以提高渲染性能,避免出现绑定的错误

  <div id="app">
    <ul>
      <li v-for="(item , index) in itemList" :key="item.id">
        输入框{{ item.value }}: <input type="text">
      </li>
    </ul>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        itemList: [
          {
            id:1,
            value: 2
          },
          {
            id: 2,
            value:3
          },
          {
            id: 3,
            value: 3
          }
        ]
      }
    })
  </script>
  • 通过<template>标签设置模板占位符,可以将部分元素或内容作为整体进行操作
  <div id="app">
    <!-- template无法设置key绑定,因其只是占位,并不存在 -->
    <template v-for="utem in obj">
      {{utem}}
      <br>
    </template>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        obj: {
          content1: '内容1',
          content2: '内容2',
          content3: '内容3'
        }
      }
    })
  </script>

v-show 指令

  • 控制元素显示与因此,用于显示隐藏的频繁切换,布尔类型:true控制显示,false控制隐藏
    注意:
    <template></template>无法使用 v-show 指令
  <div id="app">
    <p v-show="false">标签内容</p>
    <p v-show="22 > 11">标签内容</p>

    <p v-show="bool">标签内容</p>

    <template v-show='false'>这是内容</template>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        bool: true
      }
    });
  </script>

v-if 指令

  • 用于根据条件控制元素的创建与移除
  <div id="app">
    <!-- 不适合用于元素的隐藏与显示,只适合元素的移除和创建,因为频繁操作DOM较消耗内存 -->
    <p v-if='bool'>这是标签内容</p>
    <p v-else-if="false">这是第二个p标签</p>
    <p v-else-if="false">这是第三个p标签</p>
    <p v-else>这是最后一个p标签</p>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        bool: false
      }
    });
  </script>
  • 给使用 v-if 的同类型元素绑定各不同的 key
 <div id="app">
   <div v-if = "type==='username'" :key="'username'">
     用户名:<input type="text">
   </div>
   <div v-else :key='email'>
     邮箱:<input type="text">
   </div>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        bool: true,
        type: 'username'
      }
    });
  </script>
  • 出于性能考虑 ,避免v-if和 v-for用于同一标签,v-for的优先级高于if,如果放在同一标签,for会先执行,如果执行后发现if是false,就会浪费性能
  <div id="app">
    <ul v-if="false">
      <li v-for="item in items">{{item}}</li>
    </ul>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
       items: {
         content1: '内容1',
         content2: '内容2',
         content3: '内容3'
       }
      }
    });
  </script>

事件与表单处理

事件处理v-on指令

  • 用于元素事件绑定

  • 简化书写方式@click,或者@加其他的触发形式

  • 事件代码复杂,可以在methods中设置函数,并设置为事件处理程序

  • 设置事件后,可以接受事件对象

  • 视图中可以通过 $event 访问事件对象

  <div id="app">
    <p >{{ content }}</p>
    <button v-on:click="content='0这是新内容'">按钮1</button>
    <button @click="content='这是这是新内容'">按钮2</button>
    <button @click="fn">按钮3</button>

    <!-- 传入fn2函数和实参,$event是vue规定的事件对象,不可更改 -->
    <button @click='fn(200, $event)'>按钮4</button>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        content:'这是默认内容'
      },
      method: {
        //fn函数
        fn () {
          this.content = '这是按钮3设置的内容';
        },
        fn2(value, event) {
          console.log(value, event);
        }
      }
    })
  </script>

表单输入绑定 v-model

  • 用于给<input>、<textarea>以及<select> 元素设置双向数据绑定

输入框绑定

  • 单行绑定input和多行输入框textarea
  <div id="app">
    <p>input 输入框内容:{{ value1 }}</p>
    <input type="text" v-model="value1">

    <p>input 输入框内容:{{ value2 }}</p>
    <input type="text" v-model="value2">
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        value1: '',
        value2: ''
      }
    });
  </script>

单选按钮绑定

单选按钮双向数据绑定

  • input 标签中type为radio的元素,把多个同一组的单选按钮绑定为同一值
  <div id="app">
    <!-- p中展示的值就是单选框中value的值 -->
    <p>radio的值为{{ value3 }}</p>
    <input type="radio" id="one" value="1" v-model="value3">
    <label for="one">按钮1</label>

    <input type="radio" id="two" value="2" v-model="value3">
    <label for="tow">按钮2</label>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        value3: ''
      }
    });
  </script>

复选框绑定

  <div id="app">
    <!-- 单个复选框进行双向数据绑定的演示 -->
    <!-- 单个复选框选中时,绑定展示的数据是true和false -->
    <p>单个复选框的值:{{ value4 }}</p>
    <input type="checkbox" id="one" v-model="value4">
    <label for="one">选项1</label>

    <!-- 多个复选框进行双向数据绑定的演示 -->
    <!-- 多个复选框选择,选中时,value5展示的是数组的值 -->
    <p>多个复选框的值:{{ value5 }}</p>
    <input type="checkbox" id="cb1" value="选项1" v-model="value5">
    <label for="cb1">选项2</label>
    <input type="checkbox" id="cb2" value="选项2" v-model="value5">
    <label for="cb1">选项3</label>
    <input type="checkbox" id="cb3" value="选项3" v-model="value5">
    <label for="cb1">选项4</label>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        value4: '',
        value5: []
      }
    });
  </script>

选择框绑定

  • 单选绑定和多选绑定
  <div id="app">
    <!-- 单选选择框 -->
    <p>单选选择框的内容: {{value6}}</p>
    <select name="" id="" v-model="value6">
      <option value="">请选择</option>
      <option value="1">选项1</option>
      <option value="2">选项2</option>
      <option value="3">选项3</option>
    </select>

    <!-- 多选选择框 -->
    <p>多选选择框的内容:{{ value7 }}</p>
    <!-- 多选框要加一个mutiple属性 -->
    <select name="" id="" v-model="value7" multiple>
      <option value="1">选项1</option>
      <option value="2">选项2</option>
      <option value="3">选项3</option>
    </select>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        // 单选选择框数据
        value6: '',
        // 多选选择框数据
        value7: []
      }
    });
  </script>

v-model指令小结

设置数据时,可以设置为空字符串或者空数组

  • input:绑定字符串值

  • textarea:绑定字符串值

  • radio:绑定字符串值

  • checkbox:单个绑定布尔值,多个绑定数组

  • select:单选绑定字符串,多选绑定数组

修饰符

以点开头的指令后缀,用于给当前指令设置特殊操作

事件修饰符

**.prevent修饰符,用于阻止默认事件行为。**
  <div id="app">
    <a @click.prevent="fn" href="https://kaiwu.lagou.com">链接</a>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {

      },
      methods: {
        fn () {
          console.log('这是 a 链接的点击事件');
        }
      }
    });
  </script>
**.stop修饰符 用于阻止事件传播 防止冒泡,相当于event.stopPropagation()**
  <div id="app">
    <div @click="fn1">
        <!-- 阻止事件冒泡 -->
        <!-- <button @click.stop = "fn2">按钮</button> -->

        <a @click.prevent.stop = "fn2"  href="https://kaiwu.lagou.com">链接</a>
    </div>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {

      },
      methods: {
       fn1 () {
         console.log('div事件');
       },
       fn2 () {
        //  console.log('button事件');
         console.log('a事件');
       }
       
      }
    })
  </script>

** once修饰符 用于设置事件只会触发一次**

按键修饰符

  • 按键码是将按键的按键码作为修饰符使用以表示按键的操作方式

  • 除了内容按键还有特殊按键如esc,enter、delete等功能按键,应首选内置别名,方便兼容。
    如: .esc .enter .tab .delete. .space .up .down .left .right

  <div id="app">
    
    <!-- <input type="text" @keyup="fn"> -->
    <!-- 97是数字1的keycode -->
    <!-- <input type="text" @keyup.97="fn"> -->
    <!-- 也可以直接用按键代替 -->
    <input type="text" @keyup.a="fn">
    <input type="text" @keyup.esc="fn">
    <!-- 表示几个按键有一个按下即可,或的关系 -->
    <input type="text" @keyup.esc.a.b.c="fn">


  </div>
  <script src="lib/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {

      },
      methods: {
        // e和event等价
       fn(e) {
          console.log(e);
          console.log("输入了相应代码");
       }
      }
    });

系统修饰符

  • ctrl、 alt、 shift系统按键,系统按键与其他按键组合使用

  • 系统修饰符ctrl修饰符、 alt修饰符 、 shift修饰符

  • .exact修饰符允许控制有精确系统修饰符组合触发事件


<button v-on:click.ctrl.exact='onclick'>按钮</button>

  <div id="app">
    <!-- <input type="text" @keyup.17.q="fn"> -->

    <input type="text" @keyup.ctrl.q="fn" v-model='inputValue'>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        inputValue: ''
      },
      methods: {
        fn (event) {
          // console.log(event);
          this.inputValue = '';
        }
      }
    });
  </script>

鼠标修饰符

  • 可以决定由鼠标哪个鼠标按键完成
    分为.left左键 .right右键 .middle中键
  <div id="app">
    <button @click.left="fn">按钮1</button>
    <button @click.right="fn">按钮2</button>
    <button @click.middle="fn">按钮3</button>


  </div>
  <script src="lib/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {

      },
      methods: {
        fn() {
          console.log('点击了元素');
        }
      }
    });
  </script>

v-model修饰符

  • .trim修饰符
    用于自动过滤用户输入的首尾两端的空格
  • .lazy修饰符
    用于将v-model触发方式由 input 事件触发更改为 change 事件触发(指定操作触发)
  • .number 修饰符
    用于自动将输入内容转换为数值,如 无法被parseFloat()转换,返回原始内容

自定义指令

  • 简化dom操作,相当于对dom操作的一种封装,通过自定义指令,封装一些dom功能

自定义全局指令

  • 可以被任意 vue 实例或组件使用的指令
    <div id="app">
      <!-- v-focus是调用指令,.a.b是给binding绑定信息 -->
      <input type="text" v-focus.a.b="100+100">
    </div>
  <script src="lib/vue.js"></script>
  <script>
    // 自定义全局指令,focus是指令的类型,directive是单数形式
    Vue.directive("focus",{
      // inserted是指插入元素时,执行回调函数
       inserted(el, binding) {
        //  打印绑定信息,绑定信息有很多属性
         console.log(binding);
        //  执行焦点函数
         el.focus();
       }
    });
    new Vue({
      el: '#app',
      data: {

      }
    });   
  </script>

自定义局部指令

  • 在当前 vue实例或者组件内使用的指令

钩子函数:

  • bind:只调用一次,指令第一次绑定到元素使用

  • inserted:被绑定元素插入父节点时调用(仅保证父节点存在,但不一定被插入文档中)

  • update:所在组件的VNode更新时调用,但是可能发生在其子 VNode 更新之前,指令的值可能发生了改变,也可能没有
    但是可以通过比较更新前后的值来忽略不必要的模板更新

  <div id="app">
    <input type="text" v-focus>
  </div>

  <div id="app2">
    <input type="text" v-focus>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    // 自定义局部指令
    new Vue({
      el: '#app',
      data: {},
      //这里是复数
      directives:{
        //注意此处指令名称没有双引号了
        focus: {
          inserted(el) {
            el.focus();
          }
        }
      }
    });
    //新定义的就不会挂载自动获取焦点功能
    new Vue({
      el:'#app2'
    })
    
  </script>

过滤器

全局过滤器

  • 用于进行文本内容格式化,可以在插值表达式和 v-bind 中使用

  • 全局过滤器可以在任意 vue 实例中使用

  • 过滤器通过管道符 | 连接数据

  • 可以将一个数据传入到多个过滤器中处理

  <div id="app">
    <!-- 执行顺序是从前往后一次执行过滤器,前面过滤器执行完毕之后将值传给后面的过滤器 -->
    <!-- <p>{{ aaa | filterA | UpperCase }}</p> -->
    
    <!-- 这里filter中的第一个参数始终是管道符前的变量,后面会依次作为第二个第三个参数传入 -->
    <!-- <p>{{ aaa | filterC("abc","lagou-",200) }}</p> -->

  </div>
  <script src="lib/vue.js"></script>
  <script>
    
    // Vue.filter('filterA', function (aaa) {
    //   console.log(aaa);//a-b-c
    //   return aaa.split('-').join("");
    // });

    // // 过滤器是可以改名字的
    // Vue.filter('UpperCase',function (aaa) {
    //   console.log(aaa);//abc
    //   return aaa[0].toUpperCase() + aaa.slice(1)
    // });
    Vue.filter("filterC",function (par1,par2,par3,par4) {
      return par1 + par2.split('-').join("") + par3 + par4;
      // console.log();
    })
    new Vue({
      el: '#app',
      data: {
        aaa:'a-b-c'
      }
    });
  </script>

局部过滤器

  • 只用在当前 vue 实例中

注释中写了很多有用的东西

  <div id="app">
    <!-- <p>{{ content | filterA}}</p>
    <p>{{ content2 | filterA}}</p> -->
    <p>{{ content | filterA | filterB}}</p>
    <p>{{ content | filterA | fliterC('lagou-')}}</p>
  </div>

  <!-- <div id="app2">
    <p>{{ content | filterA }}</p>
  </div> -->
  <script src="lib/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        content: 'a-b-c',
        content2: 'x-y-z'
      },
      //  局部过滤器需要filters,复数
      filters: {
        filterA : function (value) {
          return value.split('-').join("");
        },
        filterB : function (value) {
          return value.split('').reverse().join('');
        },
        // 接收多个参数
        fliterC (value,prefix) {
          //记住第一个参数一定是管道符前的内容
          // return value + prefix;
          return prefix + value;
        }
      }
    });

    new Vue({
      el: '#app2',
      data: {
        content: 'q-w-e'
      }
    }) 
  </script>

全局过滤器与局部过滤器共同存在且 重名 的情况,局部过滤器 生效,可以利用此方法层叠掉不用的过滤器

计算属性

  • vue.js 视图不建议书写复杂逻辑,这样不利于维护

  • 计算属性使用时为属性形式,访问是自动执行对应函数

方法名就是计算属性的属性名称,功能就是函数执行的操作

  <div id="app">
    <p>{{ getSum() }}</p>
    <p>{{ getSum() }}</p>
    <p>{{ getSum() }}</p>

    <p>{{getResult}}</p>
    <p>{{getResult}}</p>
    <p>{{getResult}}</p>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        arr: [1, 2, 3, 4, 5]
      },
      methods: {
        getSum () {
          console.log('执行了函数功能');
          var arr = this.arr;
          var sum = 0;
          for (var i = 0; i < arr.length; i++) {
            sum += arr[i];
          }
          return sum;
        }
      },
      computed: {
        getResult () {
          console.log('执行了计算属性');
          var arr = this.arr;
          var sum = 0;
          for (var i = 0; i < arr.length; i++) {
            sum += arr[i];
          }
          return sum;
        }
      }
    })
  </script>
  • method与computed区别

    · computed 具有缓存性,每次计算之后缓存结果,methods没有
    · computed 通过属性名访问,methods需要调用
    · computed 仅适用于计算操作

计算属性的setter

计算属性默认只有getter,vue.js也允许给计算属性设置setter

用于给comtped进行赋值和获取

  <div id="app">
    <p>{{ fullName }}</p>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        firstName: '张',
        lastName: '三'
      },
      computed: {
        // 默认书写方式
        // fullName () {
        //   return this.firstName + this.lastName;
        // }
        // 分开书写getter和setter
          fullname () {
            get() {
              return this.firstName + this.lastName;
            },
            set(newName) {
              var nameArr = newName.split(" ");
              this.firstName = nameArr[0];
              this.lastName = nameArr[1];
            }
          }
      }
    });
      </script>

侦听器

  • 用于监视数据变化并执行操作

  • 为了监听对象内部值的变化,需要将watch书写为对象,设置deep:true,这是通过handler设置处理函数

注意:
- 当更改(非替换)数组或对象时,回调函数中新值与旧值相同,因为他们的引用都指向同一数组、对象。

- 数组操作不要使用length和索引,无法触发侦听器函数
  <div id="app">

  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        title:'这是普通内容',
        obj:{
          content1:'内容1',
          content2:'内容2'
        }
      },
      watch: {
        //修改title内容
        title(val,oldval) {
          console.log('title被修改了',val,oldval);
        },
        //无法监听对象内部值的变化
        // obj (){
        //   console.log('obj 被修改了');
        // }
        // 可以将函数改写为对象形式
        obj: {
          //必须设置监听器为deep:true才能监听对象内部
          deep:true,
          handler (val,oldVal) {
            console.log('obj被监听了',val,oldval);
            console.log(val === oldval);//true
          }
        },
        // arr在监听中,length和索引是不生效的,且可以不用deep:true,
        arr: {
          deep:true,
          handler (val,oldVal) {
            console.log('arr修改了',val,oldVal);
          }
        },
        // 与上面等价
        // arr(val,oldVal) {
        //     console.log('arr修改了',val,oldVal);
        // }
      }      
    });
  </script>

Vue DevTools

  • 是vue.js官方提供的用来调试vue应用的工具
    注意:
    • 网页必须应用了vue.js功能才能看到

    • 网页必须使用了vue.js而不是vue.min.js

    • 网页必须在http协议下打开,而不是使用 file 协议本地打开

vue.js生命周期

  • 实例从创建到运行,再到销毁的过程

生命周期函数(钩子)

  • 创建阶段:
    · beforeCreate:实例初始化之前调用(很少用)

    · created: 实例创建后调用,data和methods创建完毕后 -- 数据请求和操作

    · beforeMount:实例挂载钱调用,页面模板未渲染

    · mounted: 实例挂载完毕,可执行dom操作。
    特点:每个实例只能执行一次

  • 运行阶段:
    · beforeUpdate:数据更新后,视图更新前调用。

    · updated:视图更新后调用

特点:按需调用

  • 销毁阶段:
    · beforeDestroy:实例销毁之前调用

    · destroy:实例销毁之后调用

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,080评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,422评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,630评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,554评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,662评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,856评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,014评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,752评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,212评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,541评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,687评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,347评论 4 331
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,973评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,777评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,006评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,406评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,576评论 2 349

推荐阅读更多精彩内容