Vue学习----hello Vue_通过操作数据来改变页面的显示内容、显示效果等,数据的变化影响页面展现；同时页面(1)

总结

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

2 实现第一个vue程序

在一个html页面``标签中写如下代码

 <div id="app">
        <h2>你好啊，{{message}}</h2>
    </div>
    <!--从CDN引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <script>
 const app = new Vue({ //初始化一个VUE实例
 el: '#app', // 用于页面渲染VUE实例的元素
 data: { // 定义数据
 message: 'Vue'
 }
 })
 </script>

• el:

  • 类型：string | HTMLElement
  • 作用：决定之后Vue实例会挂载渲染到哪一个DOM节点。

• data:

  • 类型：Object | Function （在组件当中data必须是一个函数，后续章节介绍）
  • 作用：Vue实例对应的数据对象，即MVVM中的Model。

• vue实现了数据绑定与响应式编程，在vue编程中非常重要的的一个思想就是，通过操作数据来改变页面的显示内容、显示效果等，数据的变化影响页面展现；同时页面的输入值改变数据模型，而不是去操作DOM节点元素，理解了这句话VUE学起来就简单了。

• 上文代码中const app是ES6的语法，表示定义一个常量，不允许对该常量进行二次赋值。常量对象的属性还是可以改的，如:app.message = 'world'

3.MVVM模型。

总结

=============================================================

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。