什么是Vue.js?
- vue.js是一个前端的js的渐进式()框架(个人项目)
- 作者:尤雨溪(google实习 阿里任职 weex研究团队(访问原生设备的库) vue.js是属于他的个人项目 )
- 发布时间:2016年10月github关注度: 136K (不代表大陆地区)
- Vue.js适用:适用于中小型项目
vue.js:借鉴了 react 和 angular
Vue.js的特性
- vue.js是一个MVVM框架(由MVC架构衍生)
- vue.js 数据也是单向的, 我们称之为, 单向数据流
vue.js是不兼容ie8及其以下浏览器(所以考虑低版本兼容是不存在的)
Vue.js的基本使用
1.引入Vue.js
(1).cdn
(2).下载本地
(3).模块化安装
npm i vue -D/-Scnpm i Vueyarn add Vue
2.初始化Vue
(1).必须有一个html容器, 决定vue.js的作用范围
(2).初始化
new Vue(options) * el 表示装载, 将上面id为app的模板装载在 new Vue的实例中,也确定了一个作用范围 * data 数据
(3).数据绑定(声明式渲染)
{
{ this.$data.msg }}{
{ this.msg }}{
{ msg }} 推荐的
mustauch语法糖: 双大括号语法 {
{}} 支持js语法注意事项
- 模板中的 this 指的是 new Vue得到的实例 , 在模板中 this可以省略不写
data选项在根实例中是对象, 除了跟实例以外是函数
如何激活浏览器中 vue detools工具(这是Vue.js特有的调试工具,在谷歌商店中安装):在服务器环境下运行文件即可激活
Vue.js源代码简单学习
Vue.js源文件中,可以看见它使用了匿名函数,这很有用处
1.匿名函数 (function(){}) ()特点:
- 安全性高
- 减少了函数命名冲突第二个括号才是函数的真正运行, 里面可以传入实际参数
- 第一个括号确定了匿名函数的作用范围, 语法不会报错, 里面放一个没有名字的函数, 函数可以接收形式参数
严格模式
严格模式使用,让这个匿名函数的语法更加的标准和严格
三行代码的学习
第一行: 不导出object 也不导出 undefined
第二行, 如果我们想模块化引用Vue,那么我们要通过amd将Vue函数定义为模块
第三行, 如果我们想将Vue作为全局变量使用,那么我们将Vue挂在在window对象身上