Vue学习笔记总结（1）

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

 

尝试 Vue.js 最简单的方法是使用 Hello World 例子。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件，然后通过如下方式引入 Vue：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者：

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

 

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接写渲染 (render) 函数，使用可选的 JSX 语法。

 

 

一、Vue的介绍。
  Vue是一个渐进式的js框架，只注重视图层，结合了HTML+CSS+JS，非常的易用，并且有很好的生态系统。而且vue体积很小，速度很快，优化很到位。
  SSM的整合，搞定了后端的一套：增删查改。
二、MVVM
Vue技术是MVVM开发模式的实现者。
MVC：
M:Model   V:view   C：controller
MVVM：
M:Model   V:view     VM： viewmodel ：连接试图和数据的中间件。

1.cdn：内容分发网络
这是一种加速策略，能够从离自己最近的服务器上快速的获得外部的资源。
2.vm的实现原理
viewmodel 中内置了一个观察者，这个观察者观察两个维度
1)观察视图的变化：当视图变了，就通知数据进行变化。
2）观察数据的变化：当数据变了，就通知视图进行变化。
--MWWM通过VM实现了双向数据绑定。
三、Vue的快速开始
1.如果获得vue的cdn文件
https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js
2.如何在页面中使用vue
两个部分：
1)html：<div id="app"></div>
2)需要Vue对象（实例
3.Vue对象中有哪些东西，分别是什么作用？
   new Vue（{
    el:该vue对象绑定在哪个div上
    data:{
    }  //提供数据的，里面存放键值对
 }）
4.在html的被vue绑定的元素中，通过插值表达式获取vue对象中的数据。
 

四、差（插）值表达式。
插值表达式是用在html中被绑定的元素中，目的是通过插值表达式获取vue对象中的属性和方法。
vue对象中的属性是哪里提供？
new Vue({
data:{}   <= 这个data就提供了属性
})

vue对象中的方法是哪里提供？
new Vue({
methods:{
  sayhello：funtion（）{
  }
}   <= 这个methods就提供了方法
})

除此之后插值表达式还可以这么用
 
五、Vue中的关键字
这些关键字都是作为html页面的标签中的属性
1.v-model:是将标签的value值与vue实例中的data属性值进行绑定。
 

2.v-on：通过配合具体的事件名，来绑定vue中定义的函数。
请输入您的专业：<input type="text" v-on:input="changemajor"/>