Vue基础二（上）

最新推荐文章于 2025-09-13 12:59:37 发布

原创最新推荐文章于 2025-09-13 12:59:37 发布 · 120 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #面试题 #模板语法

Vue 同时被 2 个专栏收录

9 篇文章

订阅专栏

前端框架

9 篇文章

订阅专栏

Vue基础二（上）

1. 面试题

vue数据驱动原理是什么？
vue双向数据绑定原理是什么？
vue深入响应式原理是什么？
- 深入响应式指的就是数据驱动
- 底层实现 - es5特性 -> Object.definePropty

<body>
  <div id="box"></div>
  <button> 修改数据 </button>
  <input type="text" name="" id="">
</body>
<script>
  var box = document.querySelector('#box')
  var btn = document.querySelector('button')
  var input = document.querySelector('input')

  var model = { //这里定义了一个数据，这个数据是一个对象
    info: 'Vue'
  }

  input.onkeyup = function ( e ) {

    // Object.defineProperty( 对象，对象的属性，对对象属性的配置 )
    Object.defineProperty( model, 'info', {
      /* 存储器 getter & setter */
      get: function () {//get可以给对象做一次初始化赋值
        return e.target.value
      },
      set: function ( val ) {
        console.log( val )
        box.innerHTML = val 
      }
    })
    box.innerHTML = model.info
  }
  btn.onclick = function () {
    model.info = "node.js"// 数据修改了
  }
</script>

Vue是通过数据劫持和事件的订阅发布来实现的，数据劫持指的是Vue通过observer观察者对象对data选项中的数据进行getter和setter设置【 Object.defineProperty 】，事件的订阅发布指的是Vue通过事件来监听，通知Vue进行视图更新
监听：选项/watch

2. 模板语法

mustache语法中支持js

1. 用法：

	<body>
	  <div id="app">
	    <!-- 内容用法 -->
	    <p> {{ info }} </p>
	    <!-- 属性用法 -->
	    <input type="text" v-model = "info">
	    <img src=" info " alt="">
	  </div>
	</body>
	<script src="../../lib/vue.js"></script>
	<script>
	  /* 
	    mustache  双大括号语法
	    用法有两种
	      1. 内容里面用  加 {{}}
	      2. dom属性上用  不加 {{}}
	  */
	  new Vue({
	    el: '#app',
	    data: {
	      info: '今日周五'
	    }
	  })
	</script>

属性：
- 属性中属性值可以直接写js语法，并且属性值中的数据相当于全局变量
- 给一个标签加一个自定义属性/已有属性
- 属性前加 v，Vue中叫做：指令【借鉴angular 】

2. js的支持性

	<body>
	  <div id="app">
	    <p> {{ num }} </p> <!-- 100 -->
	    <p> {{ str }} </p> <!-- string -->
	    <p> {{ bol }} </p> <!-- true -->
	    <p> {{ nul }} </p> <!-- 空 -->
	    <p> {{ und }} </p> <!-- 空 -->
	    <p> {{ obj.name }} </p> <!-- Vue -->
	    <p> {{ arr[ 0 ] }} </p> <!-- 1 -->
	    <p> {{ fn() }} </p> <!-- 10 -->
	    <!-- <p> {{ console.log( 1 ) }} </p>
	    <p> {{ alert( 1 ) }} </p> -->
	    <p> {{ 1 + 1 }} </p> <!-- 2 -->
	    <p> {{ 5 > 3 ? '真':'假' }} </p> <!-- 真 -->
	    <p> {{ 5 > 3 && '真'||'假' }} </p> <!-- 真 -->
	    <div>
	      <p v-if = "bol"> 猫 </p>
	      <p v-else> 狗 </p> <!-- 猫 -->
	    </div>
	  </div>
	</body>
	<script src="../../lib/vue.js"></script>
	<script>
	  new Vue({
	    el: '#app',
	    data: {
	      num: 100,
	      str: 'string',
	      bol: true,
	      nul: null,
	      und: undefined,
	      obj: {
	        name: 'Vue'
	      },
	      arr: [ 1,2,3 ],
	      fn: function () {
	        return 10
	      }
	    }
	  })
	</script>