Vue介绍

可以从Vue官方文档中学习，也可以从B站中去学习，我是看了两个

课程大纲

Vue是什么
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 的方式。请注意我们不推荐新手直接使用 vue-cli，尤其是在你还不熟悉基于 Node.js 的构建工具时。
如果你喜欢交互式的东西，你也可以查阅这个 Scrimba 上的系列教程，它揉合了录屏和代码试验田，并允许你随时暂停和播放。
声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
<div id="app">
  {{ message }}
</div>

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


Hello Vue!

我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。
<div id="app">
    {{ message }} {{name}} {{age}}
</div>

var data = {
    message: 'Hello Vue!',
    name: "Vue",
    age: "18"
}
var app = new Vue({
    el: '#app',
    data: data,
});
data.message = "Hello World!"


Hello World!

然而我们发现使用app仍然能够获得到message的值，就像下面这样
console.log(app.message); // => Hello World!

通过 app.$data 可以获取到app中的data对象
console.log(app.$data); // => {__ob__: Observer}

注意我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。
除了文本插值，我们还可以像这样来绑定元素 attribute：
<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})


鼠标悬停几秒钟查看此处动态绑定的提示信息！


这里我们遇到了一点新东西。你看到的 v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致”。
如果你再次打开浏览器的 JavaScript 控制台，输入 app2.message = '新消息'，就会再一次看到这个绑定了 title attribute 的 HTML 已经进行了更新。
条件与循环
控制切换一个元素是否显示也相当简单：
<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})


现在你看到我了

继续在控制台输入 app3.seen = false，你会发现之前显示的消息消失了。
这个例子演示了我们不仅可以把数据绑定到 DOM 文本或 attribute，还可以绑定到 DOM 结构。此外，Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入/更新/移除元素时自动应用过渡效果。
还有其它很多指令，每个都有特殊的功能。例如，v-for 指令可以绑定数组的数据来渲染一个项目列表：
<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})



学习 JavaScript
学习 Vue
整个牛项目


在控制台里，输入 app4.todos.push({ text: '新项目' })，你会发现列表最后添加了一个新项目。
处理用户输入
为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：
<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">反转消息</button>
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('');
      console.log(this.message);
    }
  }
})


注意在 reverseMessage 方法中，我们更新了应用的状态，但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理，你编写的代码只需要关注逻辑层面即可。
Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。
<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

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


组件化应用构建
组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：

在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。在 Vue 中注册组件很简单：
// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
  template: '<li>这是个待办项</li>'
})

var app = new Vue(...)

现在你可以用它构建另一个组件模板：
<ol>
  <!-- 创建一个 todo-item 组件的实例 -->
  <todo-item></todo-item>
</ol>

但是这样会为每个待办项渲染同样的文本，这看起来并不炫酷。我们应该能从父作用域将数据传到子组件才对。让我们来修改一下组件的定义，使之能够接受一个 prop：
Vue.component('todo-item', {
  // todo-item 组件现在接受一个
  // "prop"，类似于一个自定义 attribute。
  // 这个 prop 名为 todo。
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

现在，我们可以使用 v-bind 指令将待办项传到循环输出的每个组件中：
<div id="app-7">
  <ol>
    <!--
      现在我们为每个 todo-item 提供 todo 对象
      todo 对象是变量，即其内容可以是动态的。
      我们也需要为每个组件提供一个“key”，稍后再
      作详细解释。
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></todo-item>
  </ol>
</div>

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其它什么人吃的东西' }
    ]
  }
})



蔬菜
奶酪
随便其它什么人吃的东西


# 与自定义元素的区别
你可能已经注意到 Vue 组件非常类似于自定义元素——它是 Web 组件规范的一部分，这是因为 Vue 的组件语法部分参考了该规范。例如 Vue 组件实现了 Slot API 与 is attribute。但是，还是有几个关键差别：

Web Components 规范已经完成并通过，但未被所有浏览器原生实现。目前 Safari 10.1+、Chrome 54+ 和 Firefox 63+ 原生支持 Web Components。相比之下，Vue 组件不需要任何 polyfill，并且在所有支持的浏览器 (IE9 及更高版本) 之下表现一致。必要时，Vue 组件也可以包装于原生自定义元素之内。
Vue 组件提供了纯自定义元素所不具备的一些重要功能，最突出的是跨组件数据流、自定义事件通信以及构建工具集成。

mponents/blob/gh-pages/proposals/Slots-Proposal.md) 与 is attribute。但是，还是有几个关键差别：

Web Components 规范已经完成并通过，但未被所有浏览器原生实现。目前 Safari 10.1+、Chrome 54+ 和 Firefox 63+ 原生支持 Web Components。相比之下，Vue 组件不需要任何 polyfill，并且在所有支持的浏览器 (IE9 及更高版本) 之下表现一致。必要时，Vue 组件也可以包装于原生自定义元素之内。
Vue 组件提供了纯自定义元素所不具备的一些重要功能，最突出的是跨组件数据流、自定义事件通信以及构建工具集成。

虽然 Vue 内部没有使用自定义元素，不过在应用使用自定义元素、或以自定义元素形式发布时，依然有很好的互操作性。Vue CLI 也支持将 Vue 组件构建成为原生的自定义元素。

什么是vuevue是一套用于构建用户界面的渐进式框架。
框架和库的区别
库是一种插件，是一种封装好的特定方法的集合。提供给开发者使用，控制器在使用者手里。
框架是一套架构，会基于自身特定向用户提供一套相当完整的解决方案，控制权在框架本身，使用者需要按照框架所规定的某种特定规范进行开发。
目前的流行前端框架
Angular Vue React流行的一些库jquery ，Zepto
vue作为前端框架的特点

构建用户界面，只需要关系view层
易学，轻量快速
渐进式框架



什么是渐进式？1.声明式渲染2.组件系统3.客户端路由4.大规模状态管理5.构建工具
vue优点：响应式的数据绑定：当数据发生改变，视图可以自动更新，可以不用关心dom的操作，专心数据操作。
可组合的视图组件：把视图按照功能切分成若干基本单元。
什么是MVVM
什么是MVC，MVC是后端的分层开发概念，M-modle数据层面，C-controller数据控制层，V-view前端人员的视图层。
什么是MVVM，其中M-保存每个页面中的数据，VM-是一座桥将M和V进行分割，M和V的数据交互都需要它来帮助，V-是每个页面的html。
前端
MVVM是前端视图层的分层开发思想，主要把每个页面，分成了M,V和VM,VM是MVVM的思想的核心，VM是M和V之间的调度者。
前端MVVM的思想是为了让我们开发更加方便，因为MVVM提供了数据的双向绑定，数据的双向绑定时由MV提供的。
MM保存的是每个页面中单独的数据
VM它是一个调度者，分割了M和V。
V是每个页面中HTML结构
app.js项目的入口模块一切的请求，都要先进入这里进行chuliapp.js并没有路由分发的功能，需要调用router.js模块进行路由的分发处理
router.js路由分发处理模块，只负责分发路由
controller这是业务逻辑的处理层在这个模块中，封装了一些具体业务逻辑处理的逻辑代码，但是，为了保证职能单一，此模块只负责处理业务，不负责处理数据的CRUD。
Model层只负责操作数据库，执行对应sql语句
创建VUE实例
安装：1.去官网下载指定顶vue版本包2.使用cdn使用线上版本3.使用npm进行安装4.使用CLI脚手架
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入Vue cdn 的网址-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
    </div>
    <script>
        var vm = new Vue({
            // 也可以绑定docuemnt.getElementById('#app')返回的app对象
            el:"#app",
            data:{
                msg:"第一个案例"
            }
        })
    </script>
</body>
</html>

v-text 能展示对应data中数据内容，也能在数据基础上做运算
v-html -- html标签渲染容易产生xss攻击如何防止xss攻击:1.前端过滤2.后台转义3.给cookie 加上属性 http
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入Vue cdn 的网址-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <p v-html="msg"></p>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                msg:"<span style='color:red'>v-html渲染</span>"
            }
        })
    </script>
</body>
</html>

v-cloak
'v-text' 虽然没有数据加载闪烁问题，但是会将标签中间的数据覆盖，也不能渲染html格式数据。
'v-html' 谨慎使用会出现xss攻击的风险

若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。

请点赞！因为你们的赞同/鼓励是我写作的最大动力！
欢迎关注达达的简书！
这是一个有质量，有态度的博客

一、Vue介绍：

Vue.js是一套构建用户界面的前端框架，只关注视图层，还便于与第三方库(插件)兼容，能够帮我们减少不必要的dom操作；提高渲染效率；双向数据绑定。

 

二、Vue安装：

方式1：下载js到本地，直接用<script>引入，Vue 会被注册为一个全局变量。

在官网（https://cn.vuejs.org/v2/guide/installation.html）下载开发版本vue.js（生产版本是vue.min.js）到本地，用<script>标签引入：

<script src="common/vue.js"></script>

方式2：使用CDN方式，用<script>引入：

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

方式3：使用NPM，构建大型应用时，推荐使用该方式。

建议用cnpm替代npm。淘宝npm镜像：http://npm.taobao.org/

安装命令：【npm install -g cnpm --registry=https://registry.npm.taobao.org】

简单来说，搭建应用就是下面几行命令：

step1、【cnpm install --global vue-cli】 //全局安装 vue-cli，输入命令（安装一次即可）

进入指定文件夹，例如进到D盘根目录【D:】

step2、【vue init webpack firstvue】 //接下来一路回车，静静等待就好，注意firstvue为项目名，要小写，不然到下一步还是要改成小写

step3、进入项目，安装并运行，输入命令：

【cd firstvue】

【npm install】一次

【npm run dev】

然后访问 【http://localhost:8080/】即可，出现的页面如下图所示：



 

 

三、项目目录介绍：

使用第3种方式创建的项目，用VSCode开发工具打开，项目目录如下图所示：



其中index.html是入口文件；src主要是开发项目放的文件；src\main.js也是vue的入口js文件；src\App.vue是一个根组件。

1、入口index.html文件：结构很简单，只有一个id为app的div元素。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vuedemo01</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

2、src\main.js入口js文件：

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})


说明：new Vue中的代码表示将App组件挂载到了id=app的节点上了，"#app"与public\index.html中有个id="root"的根节点相对应。

3、App.vue文件：App就是默认创建的组件

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>


说明：export default { name: 'App' } 表示把组件暴露给外部使用。

4、src\router\index.js文件：src\main.js中的import router from './router'，其实就是指向该文件：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})


说明：其中HelloWorld也是一个组件。

 

 

在用脚手架安装时，需要用到一些命令，在此记录一下：

1、查看npm版本：【npm -v】



2、更新npm版本：【npm install npm -g】

3、查看node版本：【node -v】



注：没有安装node的同学请到官网(https://nodejs.org/en/download/)下载安装。安装了node的话，npm也会一起安装好了。

安装成功后在命令行查看node版本，如果有版本号则说明安装成功。

4、安装依赖：【npm install】

5、进入D盘：输入【d:】回车即可

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

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
2.什么是渐进式框架
使用vue，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。
Vue的核心的功能，是一个视图模板引擎，但这不是说Vue就不能成为一个框架。如下图所示，这里包含了Vue的所有部件，在声明式渲染（视图模板引擎）的基础上，我们可以通过添加组件系统、客户端路由、大规模状态管理来构建一个完整的框架。更重要的是，这些功能相互独立，你可以在核心功能的基础上任意选用其他的部件，不一定要全部整合在一起。可以看到，所说的“渐进式”，其实就是Vue的使用方式，同时也体现了Vue的设计的理念



在知乎中看到了比较详细的介绍，可以访问网站查看：https://www.zhihu.com/question/51907207
3.优点
（1）双向数据绑定
也就是所谓的响应式数据绑定。这里的响应式不是@media 媒体查询中的响应式布局，而是指vue.js会自动对页面中某些数据的变化做出同步的响应。
也就是说，vue.js会自动响应数据的变化情况，并且根据用户在代码中预先写好的绑定关系，对所有绑定在一起的数据和视图内容都进行修改。而这种绑定关系，就是以input 标签的v-model属性来声明的，因此你在别的地方可能也会看到有人粗略的称vue.js为声明式渲染的模版引擎。
这也就是vue.js最大的优点，通过MVVM思想实现数据的双向绑定，让开发者不用再操作dom对象，有更多的时间去思考业务逻辑。
（2）组件化开发
在前端应用，我们是否也可以像编程一样把模块封装呢？这就引入了组件化开发的思想。之后可以进行重复使用。
Vue.js通过组件，把一个单页应用中的各种模块拆分到一个一个单独的组件（component）中，我们只要先在父级应用中写好各种组件标签（占坑），并且在组件标签中写好要传入组件的参数（就像给函数传入参数一样，这个参数叫做组件的属性），然后再分别写好各种组件的实现（填坑），然后整个应用就算做完了。
（3）Virtual DOM
现在的网速越来越快了，很多人家里都是几十甚至上百M的光纤，手机也是4G起步了，按道理一个网页才几百K，而且浏览器本身还会缓存很多资源文件，那么几十M的光纤为什么打开一个之前已经打开过，已经有缓存的页面还是感觉很慢呢？这就是因为浏览器本身处理DOM也是有性能瓶颈的，尤其是在传统开发中，用JQuery或者原生的JavaScript DOM操作函数对DOM进行频繁操作的时候，浏览器要不停的渲染新的DOM树，导致页面看起来非常卡顿。
而Virtual DOM则是虚拟DOM的英文，简单来说，他就是一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM。最后在计算完毕才真正将DOM操作提交，将DOM操作变化反映到DOM树上。
（4）轻量高效
Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统
（5）动画系统
Vue.js提供了简单却强大的动画系统，当一个元素的可见性变化时，用户不仅可以很简单地定义对应的CSS Transition或Animation效果，还可以利用丰富的JavaScript钩子函数进行更底层的动画处理。
4.缺点

（1） vue不支持ie8.0及以下的版本

（2） 生态不太成熟，比如 编辑器里的语法提示 不太完善， 而这个又对效率很重要

（3） 主要还是社区吧，这点是无法与 react 和 angular 相比的
二.与其他框架的优缺点
献上官网文档：https://cn.vuejs.org/v2/guide/comparison.html
1.与AngularJS的区别
相同点：
都支持指令：内置指令和自定义指令。
都支持过滤器：内置过滤器和自定义过滤器。
都支持双向数据绑定。
都不支持低端浏览器。
不同点：
（1）.AngularJS的学习成本高，比如增加了Dependency Injection特性，
而Vue.js本身提供的API都比较简单、直观。
（2）.在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢。
Vue.js使用基于依赖追踪的观察并且使用异步队列更新。所有的数据都是独立触发的。
对于庞大的应用来说，这个优化差异还是比较明显的。
2.与React的区别
相同点：
React采用特殊的JSX语法，Vue.js在组件开发中也推崇编写.vue特殊文件格式，
对文件内容都有一些约定，两者都需要编译后使用。
中心思想相同：一切都是组件，组件实例之间可以嵌套。
都提供合理的钩子函数，可以让开发者定制化地去处理需求。
都不内置列数AJAX，Route等功能到核心包，而是以插件的方式加载。
在组件开发中都支持mixins的特性。
不同点：
React依赖Virtual DOM,而Vue.js使用的是DOM模板。
React采用的Virtual DOM会对渲染出来的结果做脏检查。
Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷地操作DOM。