1-Vue基础知识
兼容性
Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。
在使用 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就可以了
在控制台上的变化(注意左右)
转自:椰果粒