20道前端高频面试题（附答案）

vue实现双向数据绑定原理是什么？

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
  head>
  <body>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js">script>
    
    <div id="box">
      <new-input v-bind:name.sync="name">new-input>
      {
  {name}}
      
      <input type="text" v-model="name" />
    div>
    <script>
      Vue.component("new-input", {
             props: ["name"],        data: function () {
               return {
                 newName: this.name,          };        },        template: ` 你的名字：`,        // 模板字符串
        methods: {
               changgeName: function () {
                 this.$emit("update:name", this.newName);          },        },        watch: {
               name: function (v) {
                 this.newName = v;          },        },        //    监听
      });      new Vue({
             el: "#box",        //挂载实例
        data: {
               name: "nick",        },        //赋初始值
      });    script>
  body>
html>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
  head>
  <body>
    <input type="text" v-mode="msg" />
    <p v-mode="msg">p>
    <script>
      const data = {
             msg: "你好",      };      const input = document.querySelector("input");      const p = document.querySelector("p");      input.value = data.msg;      p.innerHTML = data.msg;      //视图变数据跟着变
      input.addEventListener("input", function () {
             data.msg = input1
2
3
4
5
6
7
8
9
10
11
12
13
14

相关阅读:
容器下进程退出产生僵尸进程的过程与原因
vue3发送验证码倒计时（防止连点、封装复用）
扫盲低代码——构建的基本原理
Dijsktra算法解析
静态程序分析（一）—— 大纲思维导图与内容介绍
解决error: invalid conversion from ‘unsigned char‘ to ‘unsigned char*‘
触摸屏实验
56 单词拆分
硕士课程可穿戴设备之作业一
数据结构-链表的简单操作实现

原文地址：https://blog.csdn.net/loveX001/article/details/127840824