Vue语法和常用特性

1.Vue基础语法

Vue 是什么?

  • Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架
  • vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合

1.1 插值表达式语法:{{}}


{{msg}}

插值表达式存在闪烁的问题,原理就是页面先显示插值表达式,再迅速的替换成对应的数据

1.2 指令

  • 本质就是自定义属性
  • Vue中指定都是以 v- 开头

v-cloak

  • 防止页面加载时出现闪烁问题

  • 原理:先通过样式隐藏内容,在内存进行值的替换,替换好之后再显示替换后的结果

     
    
      
    {{msg}}

v-text

  • v-text指令用于将数据填充到标签中,显示效果和插值表达式类似,但是v-text没有闪动问题
  • 如果数据中有HTML标签会将html标签一并输出
  • 注意:此处为单向绑定,数据对象上的值改变,插值会发生变化;但是当插值发生变化并不会影响数据对象的值

{{msg}}

v-html

  • 用于将HTML片段填充到标签中

  • 存在安全问题, 一般只在可信任内容上使用 v-html永不用在用户提交的内容上

  • 它与v-text区别在于v-text输出的是纯文本,浏览器不会对其再进行html解析,但v-html会将其当html标签解析后输出

      

    {{message}}

      

v-pre

  • 显示原始信息,跳过编译过程
  • 跳过这个元素和它的子元素的编译过程
  • 一些静态的内容不需要编译加这个指令可以加快渲染
    {{ this will not be compiled }}    
    
    {{msg}}  
     

v-once

  • 执行一次性的插值【当数据改变时,插值处的内容不会继续更新】
  
     {{ msg}}    

双向数据绑定

  • 当数据发生变化的时候,视图也就发生变化
  • 当视图发生变化的时候,数据也会跟着同步变化

v-model

  • v-model是一个指令,限制在

2.2 表单修饰符

  • .number 转换为数值

    • 注意点:
    • 当开始输入非数字的字符串时,因为Vue无法将字符串转换成数值
    • 所以属性值将实时更新成相同的字符串。即使后面输入数字,也将被视作字符串。
  • .trim 自动过滤用户输入的首尾空白字符

    • 只能去掉首尾的 不能去除中间的空格
  • .lazy 将input事件切换成change事件

    • .lazy 修饰符延迟了同步更新属性值的时机。即将原本绑定在 input 事件的同步逻辑转变为绑定在 change 事件上
  • 在失去焦点 或者 按下回车键时才更新

    
    
    
    
    
    
    
    
    

2.3 自定义指令

  • 内置指令不能满足我们特殊的需求
  • Vue允许我们自定义指令

Vue.directive 注册全局指令




全局指令 带参数



自定义局部指令

  • 局部指令,需要定义在 directives 的选项 用法和全局用法一样
  • 局部指令只能在当前组件里面(组件先理解成vue实例)使用,全局指令没有范围限制
  • 当全局指令和局部指令同名时以局部指令为准

 
 

2.4 计算属性 computed

  • 模板中放入太多的逻辑会让模板过重且难以维护 使用计算属性可以让模板更加的简洁
  • 计算属性是基于它们的响应式依赖进行缓存的
  • computed比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化
 
{{reverseString}}
{{reverseString}}
{{reverseMessage()}}
{{reverseMessage()}}

2.5侦听器 watch

  • 使用watch来响应数据的变化
  • 一般用于异步或者开销较大的操作
  • watch 中的属性 一定是data 中 已经存在的数据
  • 当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,只有data中的数据才能够监听到变化,此时就需要deep属性对对象进行深度监听
名:
姓:
{{fullName}}

2.6 过滤器

  • Vue.js允许自定义过滤器,可被用于一些常见的文本格式化
  • 过滤器可以用在两个地方:双花括号插值和v-bind表达式
  • 过滤器应该被添加在JavaScript表达式的尾部,由“管道”符号指示
  • 支持级联操作
  • 过滤器不改变真正的data,而只是改变渲染的结果,并返回过滤后的版本
  • 全局注册时是filter,没有s的。而局部过滤器是filters,是有s的
{{msg | upper}}
{{msg | upper | lower}}
测试数据

过滤器中传递参数

    
{{ message | filterA('arg1', 'arg2') }}

2.7 生命周期

  • 事物从出生到死亡的过程
  • Vue实例从创建 到销毁的过程 ,这些过程中会伴随着一些函数的自调用。我们称这些函数为钩子函数

常用的 钩子函数

beforeCreate 在实例初始化之后,数据观测和事件配置之前被调用 此时data 和 methods 以及页面的DOM结构都没有初始化 什么都做不了
created 在实例创建完成后被立即调用此时data 和 methods已经可以使用 但是页面还没有渲染出来
beforeMount 在挂载开始之前被调用 此时页面上还看不到真实数据 只是一个模板页面而已
mounted⭐初始化完成 el被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子。 数据已经真实渲染到页面上 在这个钩子函数里面我们可以使用一些第三方的插件
beforeUpdate 数据更新时调用,发生在虚拟DOM打补丁之前。 页面上数据还是旧的
updated 由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子。 页面上数据已经替换成最新的
beforeDestroy 实例销毁之前调用
destroyed 实例销毁后调用

2.8 数组变异方法(修改原有数组)

  • 在 Vue 中,直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值,你会发现,只有数据改了,但是页面内容并没有改变 vm.list[1] = 'lemon'
  • 变异数组方法即保持数组方法原有功能不变的前提下,对其进行功能拓展
push() 往数组最后面添加一个元素,成功返回当前数组的长度
pop() 删除数组的最后一个元素,成功返回删除元素的值
shift() 删除数组的第一个元素,成功返回删除元素的值
unshift() 往数组最前面添加一个元素,成功返回当前数组的长度
splice() 有三个参数,第一个是想要删除的元素的下标(必选),第二个是想要删除的个数(必选),第三个是删除 后想要在原位置替换的值
sort() sort() 使数组按照字符编码默认从小到大排序,成功返回排序后的数组
reverse() reverse() 将数组倒序,成功返回倒序后的数组

2.9 替换数组(生成数组)

  • 不会改变原始数组,但总是返回一个新数组
filter filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
concat concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组
slice slice() 方法可从已有的数组中返回选定的元素。该方法并不会修改数组,而是返回一个子数组

2.10 动态数组响应式数据

  • Vue.set(a,b,c) 或者vm.$set(a,b,c) 让触发视图重新更新一遍,数据动态起来

  • a是要更改的数据 、 b是数据的第几项、 c是更改后的数据

    Vue.set(vm.list, 2, 'lemon');
    vm.$set(vm.list, 1, 'lemon');//等价上面
    

    也可以对对象的属性进行响应式

    vm.$set(vm.info, 'gender', 'female');
    //下面在console窗口中修改vm.info.gender = 'female';不会响应
    vm.info.gender = 'male';
    

2.11 图书列表案例

  • 静态列表效果
  • 基于数据实现模板效果
  • 处理每行的操作按钮

1、 提供的静态数据

  • 数据存放在vue 中 data 属性中
 var vm = new Vue({
      el: '#app',
      data: {
        books: [{
          id: 1,
          name: '三国演义',
          date: ''
        },{
          id: 2,
          name: '水浒传',
          date: ''
        },{
          id: 3,
          name: '红楼梦',
          date: ''
        },{
          id: 4,
          name: '西游记',
          date: ''
        }]
      }
    }); var vm = new Vue({
      el: '#app',
      data: {
        books: [{
          id: 1,
          name: '三国演义',
          date: ''
        },{
          id: 2,
          name: '水浒传',
          date: ''
        },{
          id: 3,
          name: '红楼梦',
          date: ''
        },{
          id: 4,
          name: '西游记',
          date: ''
        }]
      }
    });

2、 把提供好的数据渲染到页面上

  • 利用 v-for循环 遍历 books 将每一项数据渲染到对应的数据中
 
    
       
       {{item.id}}
        
       {{item.name}}
       {{item.date}}
       
         
         修改
         |
          删除
       
     

3、 添加图书

  • 通过双向绑定获取到输入框中的输入内容
  • 给按钮添加点击事件
  • 把输入框中的数据存储到 data 中的 books 里面

图书管理

4 修改图书-上

  • 点击修改按钮的时候 获取到要修改的书籍名单
    • 4.1 给修改按钮添加点击事件, 需要把当前的图书的id 传递过去 这样才知道需要修改的是哪一本书籍
  • 把需要修改的书籍名单填充到表单里面
    • 4.2 根据传递过来的id 查出books 中 对应书籍的详细信息
    • 4.3 把获取到的信息填充到表单
 

图书管理

编号 名称 时间 操作
{{item.id}} {{item.name}} {{item.date}} 修改 | 删除

5 修改图书-下

  • 5.1 定义一个标识符, 主要是控制 编辑状态下当前编辑书籍的id 不能被修改 即 处于编辑状态下 当前控制书籍编号的输入框禁用
  • 5.2 通过属性绑定给书籍编号的 绑定 disabled 的属性 flag 为 true 即为禁用
  • 5.3 flag 默认值为false 处于编辑状态 要把 flag 改为true 即当前表单为禁用
  • 5.4 复用添加方法 用户点击提交的时候依然执行 handle 中的逻辑如果 flag为true 即 表单处于不可输入状态 此时执行的用户编辑数据数据

图书管理

编号 名称 时间 操作
{{item.id}} {{item.name}} {{item.date}} 修改 | 删除

6 删除图书

  • 6.1 给删除按钮添加事件 把当前需要删除的书籍id 传递过来
  • 6.2 根据id从数组中查找元素的索引
  • 6.3 根据索引删除数组元素
  
          
            {{item.id}}
            {{item.name}}
            {{item.date}}
            
              修改
              |
                
              删除
            
          

  

常用特性应用场景

1 过滤器

  • Vue.filter 定义一个全局过滤器
 
            {{item.id}}
            {{item.name}}
            
            {{item.date | format('yyyy-MM-dd hh:mm:ss')}}
            
              修改
              |
              删除
            



2 自定义指令

  • 让表单自动获取焦点
  • 通过Vue.directive 自定义指定




3 计算属性

  • 通过计算属性计算图书的总数
    • 图书的总数就是计算数组的长度
 
图书总数: {{total}}

你可能感兴趣的:(Vue语法和常用特性)