1-Vue基础知识

2019-05-06  本文已影响0人  波克比

兼容性

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就可以了

在控制台上的变化(注意左右)

转自:椰果粒

上一篇下一篇

猜你喜欢

热点阅读