Vue.js期末考复习总结，看这一篇就够了

第一章MVVM 概念Model-View-ViewModel,模型-视图-视图模型，连接view和model的桥梁。两个方向，一个模型转换成视图，一个视图转换成模型，实现方式是DOM事件监听。Vue是渐进式JS框架，渐进式的意义是什么阶段性可以作为嵌入服务端应用的一部分可供使用的api丰富vue可以用自带命令行快速初始化项目单页面应用及其优缺点SPA，即只有一个主页面的应用。所有内容都在一个htm

Yuiyake_杯

4171人浏览 · 2021-06-13 20:15:11

Yuiyake_杯 · 2021-06-13 20:15:11 发布

前言
因为刚好学校期末考就总结了一下。在我的博客里有更多自己总结的东西哦欢迎访问✧*｡٩(ˊᗜˋ*)و✧*｡点我点我

第一章

MVVM 概念

Model-View-ViewModel,模型-视图-视图模型，连接view和model的桥梁。
两个方向，一个模型转换成视图，一个视图转换成模型，实现方式是DOM事件监听。

Vue是渐进式JS框架，渐进式的意义是什么

阶段性
可以作为嵌入服务端应用的一部分
可供使用的api丰富
vue可以用自带命令行快速初始化项目

单页面应用及其优缺点

SPA，即只有一个主页面的应用。所有内容都在一个html里
优点
- 前后端分离
- 用户体验良好
- 减轻服务端压力
- 共用一套后端程序代码
缺点
- 不利于SEO优化
- 首屏加载过慢

第二章

创建Vue实例

var app = new Vue({...})

数据与方法

Object.freeze(),冻结一个对象，使对象不能被修改。

  var obj = {foo: '10'}
  Object.freeze(obj);
  new Vue({
    el: '#app',
    data: obj
  })

生命周期与钩子函数

图
钩子函数参数
- 指令钩子函数会被传入以下参数：
- el：指令所绑定的元素，可以用来直接操作 DOM 。
- binding：一个对象，包含以下属性：
- name：指令名，不包括 v- 前缀。
- value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
- oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
- expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
- arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
- modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
- vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
- oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

计算属性

和methods的不同：在调用methods里的一个方法时，所有方法都会调用（都会遍历一遍）

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

插值
- 文本
```
{{message}}
```
- 原式html，在这样绑定data里的message属性
```
<p v-html="message"></p>
```
- JavaScript表达式
```
{{a+b+c}}
```
缩写
- v-bind缩写：
- v-on缩写@

第三章

侦听属性

其实就是用key-value的形式定义和绑定数据，其中key是被监听对象，value可以是字符串，方法，函数，对象
如果不启用深度遍历，value是对象的时候新旧值是一样的，因为他们指向同一个对象
在下面的例子里，输入1234，则new是1234，old是123（输入过的数）

watch: {
  message: function(newValue, oldValue) {
    console.log("新" + newValue + "旧" + oldValue)
  }
}

过滤器

作用：对数据进行筛选，过滤，格式化
全局和局部过滤器重名，会采用全局过滤器。

//全局过滤器
Vue.filter('captitalize', function(value){
  ...
})
//局部过滤器
falters: {
  capitalize: function(value) {
    ...
  }
}

第四章

基本指令

v-cloak,解决网速较慢页面加载闪烁问题
v-once, 被标记的元素和组件只渲染一次
v-html和v-text的区别是text就是text，html就是html被解析过后渲染的结果

条件渲染

v-if

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

key，表达这两个信息元素是完全独立的，不可复用。常见于表单绑定

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

v-if和v-show的区别
- v-if是达到条件才渲染元素，并且能确保条件块内事件监听器会被销毁和重建
- v-show是无论初始条件是什么，元素都会被渲染

列表渲染

v-for遍历数组

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

v-for遍历对象

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

v-for和v-if一起用

<div id="app">
  <h3>没有报道的学生名单</h3>
  <ul>
    <li v-for="n in items" v-if="!n.value">{{n.name}}</li>
  </ul>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
        items: [
          {name: '小明',},
          {name: '小红', value:'已报道'},
          {name: '小华', value: '已报道'},
          {name: '小思',},
        ]
    }
  })
</script>

数组更新检测

变异方法
- push(),接收任意参数并添加到数组末尾，返回修改后数组长度
- pop()从数组末尾移除最后一项，返回删除后的数组长度
替换数组
- filter()，对数组中每一项运行给定函数，该函数会返回true的项组成的数组
- 注意，这里的filter()和前面的过滤器区别就是这里是不改变原有数组，在这里自己生成一个新的反应出来，而
  之前的过滤器是直接覆盖原有数组修改的

自定义指令

两种写法

<div id="app">
  <input v-focus></input>
</div>
<script>
//全局指令
Vue.directive('focus', {
    inserted: function(el) {
        el.focus
    }
})
//局部指令
var app = new Vue({
    el: '#app',
    directives: {
        focus: {//指令。。。}
    }
})
</script>

疑难困惑

vue2.0中，v-for的:key作用是什么？
- 给vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有的元素，需要为每项提供一个唯一的key。

第五章

绑定html样式

Class数组语法

<style>
  .style1 {
    color: white;
  }
  .style2 {
    color: black;
  }
</style>
<div id="app">
    <div v-bind:class="{ 'style1', 'style2' }">{{message}}</div>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
        message: '数组语法'
    }
  })
</script>

Class对象语法

<style>
  .static {
    color: #3a8ee6;
  }
  .style1 {
    color: white;
  }
  .style2 {
    color: black;
  }
</style>
<div id="app">
  <div class="static" v-bind:class="{style1: boole1, 'style': boole2}"></div>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
        boole1: true,
        boole2: true
    }
  })
</script>

绑定内联样式

对象语法

<div id="app">
  <div v-bind:style="{color:'red', fontSize:'30'}">对象语法</div>
</div>
<script>
  new Vue({
    el: '#app',
  })
</script>

数组语法

<div id="app">
  <div v-bind:style="[styleObj1, styleObj2]">对象语法</div>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      styleObj1:{
          color: 'blue'
      }
    },
    computed: {
        styleObj2:function (){
            return {
                padding: '30px'
            }
        }
    }
  })
</script>

第六章

事件处理

多个事件调用方法

<div id="app">
  <div>单击：
    <button v-on:click="reduce(1)">-1岁</button>
    <button v-on:click="add(1)">+1岁</button>
  </div>
  <p>老王的年龄{{age}}岁</p>
  <div>双击：
    <button v-on:click="reduce(10)">-10岁</button>
    <button v-on:click="add(10)">+10岁</button>
  </div>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      age: 50
    },
    methods: {
        add:function (change){
            this.age-=change
        },
        reduce:function (change){
          this.age-=change
        },
    }
  })
</script>

事件修饰符

.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡
.prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）
.capture：与事件冒泡的方向相反，事件捕获由外到内
.self：只会触发自己范围内的事件，不包含子元素
.once：只会触发一次
用法大概是这样

<div @click.stop="inside">阻止事件</div>

按键修饰符

键盘事件
- keydown, 键盘按下时触发
- keyup, 键盘按键抬起时触发
- keypress, 键盘按下和抬起之间触发
按键修饰符
- .enter => // enter键
- .tab => // tab键
- .delete (捕获“删除”和“退格”按键) => // 删除键
- .esc => // 取消键
- .space => // 空格键
- .up => // 上
- .down => // 下
- .left => // 左
- .right => // 右
使用

<input @keyup.enter="submit">

系统修饰键

常用的系统修饰键
- .ctrl
- .alt
- .shift
- .meta
用法

<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">做一些操作</div>

疑难解惑

exact修饰符怎么用
exact修饰符允许控制精准的系统修饰符组合触发的事件

<button @click.ctrl.exact="onClick">A</button>

第七章

表单双向绑定

v-model能绑定的元素：
- text里的value和input
- checkbox和radio里的checked和change
- select字段将value作为prop并将change作为事件
文本

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

多行文本

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>//pre-line的含义是合并行序列保留换行符
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

复选框

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

单选按钮

<div id="example-4">
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>Picked: {{ picked }}</span>
</div>
<script>
  new Vue({
    el: '#example-4',
    data: {
      picked: ''
    }
  })
</script>

选择框

<div id="example-5">
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>
<script>
  new Vue({
    el: '...',
    data: {
      selected: ''
    }
  })
</script>

多选时

多选时 (绑定到一个数组)：

<div id="example-6">
  <select v-model="selected" multiple style="width: 50px;">
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <br>
  <span>Selected: {{ selected }}</span>
</div>
<script>
  new Vue({
    el: '#example-6',
    data: {
      selected: []
    }
  })
</script>

绑定选择框

<div id="app">
  <select v-model="selected" multiple>
    <option :value="{num:1}">A</option>
    <option :value="{num:2}">B</option>
    <option :value="{num:3}">C</option>
    <option :value="{num:4}">D</option>
  </select>
  <br>
  <span>Selected: {{ selected }}</span>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      selected: []
    }
  })
</script>

修饰符

lazy，转变为在change事件中同步，即失焦or按enter才更新
number，将输入的值转成number类型
trim，自动过滤用户输入的首尾空格
用法看着里

<input v-model.lazy="msg"></input>

第八章

组件的注册

全局注册

<div id="app">
  <component-a></component-a>
</div>
<script>
  //方法1
  Vue.component('component-a', { /* ... */ })
  //方法2
  var component = Vue.extend({
    template: '<div><h3>全局组件</h3></div>>'
  })
  Vue.component('component-a', component)

  new Vue({ el: '#app' })
</script>

局部注册

<script>
  var ComponentA = { /* ... */ }
  var ComponentB = { /* ... */ }
  var ComponentC = { /* ... */ }
  new Vue({
    el: '#app',
    components: {
      'component-a': ComponentA,
      'component-b': ComponentB
    }
  })
</script>

以匿名对象的方式注册组件

<div id="app">
  <my-com2></my-com2>
</div>
<script>
  Vue.component('myCom2',Vue.extend({
    template: '<div>直接用component创建的组件</div>'
  }))
  new Vue({
    el: '#app'
  })
</script>

注意，在上面的代码中extend创建的模板只能有且仅有一个根元素，当出现多个根元素的时候默认只渲染第一个。
说人话就是要有div包着，不能没有div但是有h3和p两种标签，不然会只渲染前面的

组件中data的选项

看代码，其实就是加了个data而已

<div id="app">
  <my-com></my-com>
</div>
<template id="tmp">
  <h3>{{name}}</h3>
</template>
<script>
  Vue.component('my-com', {
      template: '#tmp',
      data: function (){
          return {
              name: 'john'
          }
      }
  })
  var app = new Vue({
    el: '#app'
  })
</script>

组件间数据通信

父子组件传值，父传子(用props)

<div id="app">
  <h3>请输入要传的值<input type="text" v-model="title"></input></h3>
  <child-node v-bind:parentTitle="title"></child-node>
</div>
<template id="tmp">
    <div>
      <h4>属性值 {{content}} </h4>
    </div>
</template>
<script>
var app = new Vue( {
  el: '#app',
    data(){
        return {
          title:'首页',
        }
    },
    components:{
        'childNode': {
            template: '#tmp',
            props: ['parentTitle'],
            data() {
                return{
                    content: this.parentTitle
                }
            },
          watch: {
                parentTitle: {
                    this.content = this.parentTitle
                }
          },
        }
    }
})
</script>

父子组件传值，子传父(用$emit)

<div id="app">
  <h3>属性值 {{msg}} </h3>
  <child-node @show="showMsg"></child-node>
</div>
<template id="tmp">
    <div>
        <h4>请输入要传的值<input type="text" v-model="childMsg"></input>
        <button @click="func">传递</button>
        </h4>
    </div>
</template>
<script>
var app = new Vue( {
  el: '#app',
    data(){
        return {
          title:'',
          msg: ''
        }
    },
    components:{
        'childNode': {
            template: '#tmp',
            data() {
                return{
                    childMsg: ''
                }
            },
          methods: {
                func() {
                    this.$emit('show', this.childMsg)
                }
          },
        }
    }
})
</script>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^