前端笔记——vue学习

一、 值传递和引用传递（参考文章）

1. 简单比较

值传递 引用传递
区别 直接复制出一块新内存 只是复制内存地址（类似c中的指针）
作用对象 基本类型（布尔、null、undefined、String和Number） 对象类型（Array、Undefined、Number）
==和=== 比较的是内存中的值 比较的是指向的内存地址
作为参数传入函数 只将值复制进去，不影响参数本身 将内存地址复制进去，影响参数本身

2. 让对象实现值传递

思路:将对象转换成String类型

var person1 = {
      name: "王小明";
      sex: "男"; 
};
var person2 = JSON.parse(JSON.stringify(person1));
// 这样，两个变量指向的内存地址不同，但是值是相同的
console.log(person1 == person2) // false
console.log(JSON.stringify(person1) == JSON.stringify(person2)); // true

二、基础入门（参考文章）

1.声明式渲染

步骤：

  1. 创建一个vue对象
  2. 传入一个页面上的元素
    {
        el: "元素选择器";
        data: {
            元素的文本或者元素的属性值（v-XXX）
        }
    }
<!DOCTYPE html>
<html>
<head>
  <title>My first Vue app</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
  <div id="app">
      {{ message }}
  </div>
  <div id="app-2">
      <span v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
      </span>
  </div>
  <script>
      var app = new Vue({
          el: "#app", 
          data: {
              message: "Hello Vue!" // 这里声明了该元素的文本内容 
          }
      })

      var app2 = new Vue({
          el: "#app-2", 
          data: {
              message: "页面加载于" + new Date().toLocaleString() // 这里声明了该元素属性v-bind的值
          }
      })
  </script>
</body>
</html>
posted @ 2020-12-15 23:49  叶落未落  阅读(84)  评论(0)    收藏  举报