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

相关阅读:
C/C++公交路线自动化选择系统
C++基础——const成员函数
VivadoAndTcl: namespace
mbedtls 自带SSL demo调试
解决Oracle死锁问题
HEC-RAS 1D/2D水动力与水环境模拟技术案例实践及拓展应用
【智能算法】斑鬣狗优化算法（SHO)原理及实现
千兆光模块和万兆光模块的成本分析及控制
蒙特卡洛原理及实例（附Matlab代码）
Winform中加密时提示此实现不是Windows平台FIPS验证的加密算法的一部分

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