数据驱动-2019-12-28

使用vue
在我们分析vue之前,先来看看我们一般是如何使用vue的

• 一
  1 编写页面模板,这个模板可能是一个html文件里的html标签
  2 使用template
  3 使用单文件(<template />)
• 二.
  1 创建vue实例 => 在vue中用mothods data computed water props,......
• 三
  将vue挂载到页面中( mount )

而vue又是如何把帮我们把数据和模板做双向绑定呢?换句话说vue是如何实现数据驱动的呢?

步奏拆解

• 1拿到模板template,(内存)模板中的v-model v-html v-...:以及简写 的坑
• 2拿到数据
• 3数据模板混合,得到的是html元素dom元素 (替换原来有坑的标签)
• 4放到页面中

Just like

让我们先回顾下jqury是如何将数据改变到dom中去吧

图片.png
在JQ中,我们如果需要让数据显示到页面中,无非就是先要得到获取get到,要显示的地方(dom元素标签),然后还要拿到我们的数据,把数据放到我们拿到的标签中才完成工作类似的
图片.png
图片.png
当我们的数据改变时,此时的页面是不会有任何的变化,而data也是静态的死的数据,我们如果想要页面跟着变,还需要做上面的动作,拿到dom标签,然后将数据放到标签内如下: 图片.png
$注意,在JQ中源码解析一章提到这个符号,是一个顶级对象JQ已经把方法挂载到window对象上了,所以在这里我们可以用这个符号

类似的vue为了解决这个问题,而采用了更好的方法,这就是我们说的数据驱动,当数据改变页面随之跟着变化请看:

图片.png
在Vue中,我们需要一个VM这个相当于中间人帮我们联通我们需要操作的dom和数据,这样一来,我们就可以实现数据和dom的双向绑定了
图片.png

课程参考:

https://www.bilibili.com/video/av75366883?from=search&seid=14709361818472170723
https://www.bilibili.com/video/av80452674?p=3