Vue入门学习笔记（一）

1、什么是Vue

vue就是一个js库，并且无依赖别的js库，跟jquery差不多。它是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。vue的核心库只关注视图层，非常容易与其它库或已有项目整合。Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。

前端框架三巨头：Vue.js、React.js、AngularJS，vue.js以其轻量易用著称，vue.js和React.js发展速度最快，AngularJS还是老大。

1.1 特点；MVVM

• Vue是一个遵循MVVM模式的渐进式框架。
• Vue比较易学，体积更小，灵活，高效。
• Vue的本身只关注UI视图，可以更简单的导入Vue插件和第三方库。
• Vue通过Vue对象把数据和视图完全分离开来，对视图的改变无需在操作DOM元素，只需要操作对应的数据，即可改变对应的视图结构，也就是通过双向数据绑定把View层和Model层连接了起来，通过对数据的操作就可以完成对页面视图的渲染。
  
• MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式。
• M：即Model，模型，包括数据和一些基本操作，指代的就是vue对象的data属性里面的数据。这里的数据要显示到页面中。
• V：即View，视图，页面渲染结果，指代的就是vue中数据要显示的HTML页面，在vue中，也称之为“视图模板”
• VM：即View-Model，模型与视图间的双向操作，指代的是vue.js中我们编写代码时的vm对象了，它是vue.js的核心，负责连接 View 和 Model，保证视图和数据的一致性。

1.2 数据渲染

1.2.1 Vue.js的引入

1. CDN
   对于制作原型或学习，你可以这样使用最新版本：

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

对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：

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

2. NPM
   在用Vue构建大型项目时推荐使用NPM安装，NPM能够很好的和诸如webpack或Browserify模块打包器配合使用，同时 Vue 也提供配套工具来开发单文件组件。

    # 最新稳定版
   $ npm install vue

1.2.2 数据绑定

上面我们说了如何导入Vue的js文件，下面我们来看一下我们如何在Vue中绑定数据，并把数据显示到页面上呢？

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

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

  new Vue({
   
           el: "#app",
           data:{
   
               message: "Hello World"
      		}
 	})

页面显示效果如下

这样的话我们已经创建了一个Vue的应用，看起来像是渲染模版字符串一样，但是Vue在背后做了大量的工作，这样的话DOM和数据就建立绑定关系。

1.2.3 语法

上面的案例中我们把Hello World渲染到页面上，看一下这个语法是如何构成的。
数据渲染

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

数据渲染到页面上，首先我们需要提供一个标签用于填充数据，这个标签我们定义了一个id属性为app,在标签中我们用插值表达式进行数据的填充。

Vue对象定义

• 定义完页面结构，我们需要在js中通过 new Vue()创建一个Vue的实例化对象。
• 在构造函数中以对象的形式做一些配置，这些配置中比较重要的有el、data两个属性。
• el 定义可以渲染数据的DOM结构。
• data定义可以渲染到页面上的数据，跟DOM结构建立关联关系。

通过上述语法结构，我们就简单完成用Vue打印Hello World的应用

1.3 基本指令

Vue的指令是带有特殊前缀v-的HTML特性，他可以绑定一个表达式，并且把一些特性作用到DOM结构上去。

1.3.1 v-text

• v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
• 如果数据中有HTML标签会将html标签一并输出
• 注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值

<div id="app">
    <!--  
		注意:在指令中不要写插值语法,直接写对应的变量名称 
        在 v-text 中赋值的时候不要在写插值语法
		一般属性中不加 {
   {}} 直接写对应的数据名 
	-->
    <p v-text="msg"></p>
    <p>
        <!-- Vue  中只有在标签的 内容中 才用插值语法 -->
        {
  {msg}}
    </p