1-Vue基础知识

兼容性

Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

Vue Devtools

在使用 Vue 时，我们推荐在你的浏览器上安装 Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用。

一 ： vue简介

1. 什么是vue

vue一词是法语，同英语中的view。

vue.js是一套构建用户界面的MVVM框架。vue的核心库只关注视图层，经常与其他库或者已有的项目整合

如果你喜欢交互式的东西，你也可以查阅这个 Scrimba 上的系列教程，它揉合了录屏和代码试验田，并允许你随时暂停和播放。

二 ： vue 入门

1. vue.js和vue.min.js

vue.js是完整的vue文件，包括换行，空格，注释等，一般用于开发使用

vue.min.js是压缩之后的vue文件，在功能上与vue.js无差别，但它是压缩过的，文件比较小，没有注释，也将错误调试信息关闭了，它的下载速度更快，一般用于线上项目

2. vue.js是一个js库，直接在外部引入即可

注意：script标签里已经引入一个外部文件，就不可以再在里边写JS代码了。只能再另写一个文件书写代码

3. vue.js提供了Vue类，它是一个对象

用Vue类创建一个对象，并保存在变量里。vue在使用时要传入一个对象作为参数。

var app = new Vue({});

4. 对象参数里常用的两个属性：el和data

JavaScript代码

varapp =newVue({el:'#app',// 管理id为app的元素data : {}// data的核心作用是存放显示在页面中的数据，data必须是一个对象})varapp =newVue({el:'.app'// 管理class为app的元素})varapp =newVue({el:'h1'// 管理h1元素})

HTML代码

范围之内范围之外

el表示这个对象管理的边界，属性值和CSS选择器是一样的，表示管理的那个元素。其中上边三种写法都是可以的，但是推荐使用id表示，来保证唯一性

上述表示vue对象管理的范围是第一个h1，和第二个h1毫无关联

5. 对象参数的其他属性：methods等

6. 创建一个实例

    {{ message }}      varapp =newVue({    el :'#app',    data : {        message :'hello world'}})

运行结果

hello world

实例解析：

在用户界面view中，通过{{}}的形式将data中的数据显示在页面中

而在用户界面中，{{}}绑定的是data的key值（这里是message），而页面中显示的是该key的value值（这里是hello world）

app这个变量会代理vue中data的数据，所以我们访问data中的数据时，直接用app.message就可以了

在控制台上的变化（注意左右）

转自：椰果粒