Vue.js基本介绍

Vue介绍

  1. 尤雨溪 google实习 阿里任职 weex研究团队(访问原生设备的库) vue.js是属于他的个人项目
  2. vue.js目前适用于中小型项目
  3. vue.js借鉴了 react 和 angular
  4. 和vue.js很类似一个库 avonlon.js也是一个个人项目 作者:司徒正美
  5. 尤雨溪微博:尤小右
  6. vue.js是一个前端的js的渐进式框架
    渐进式: 越学越难( 上手门槛低 )
  7. vue.js什么时候正式发布?
    2016年10月份
    github关注度: 136K (不代表大陆地区)
  8. vue.js是一个MVVM框架
  9. vue.js 数据也是单向的, 我们称之为, 单向数据流
  10. vue.js是不兼容ie8及其以下浏览器
前端框架的发展历程
js
jquery
MVC架构思维从后端引入到前端
backbone.js
angular.js (15年)
react.js(15年)
vue.js(16年10月份)
angular.js研发在12年前后, 但是发布在15年

混合开发 MV* 模式 前端MVC由后端MVC架构思维引入 前端MVC 和 后端MVC 完全不同

MVC 衍生架构

backbone.js
MVP
MVVM

名称解释:

M Model 数据
V View 视图
C Controller 控制器( 业务逻辑 )
P Presenter 提出者;推荐者;赠送者;任命者 ( 中介 媒婆 )
VM ViewModel 视图模型

库 vs 框架
库: 工具
框架: 工具+生态圈
vue.js使用:

  1. 下载
 cdn  [https://cdn.bootcss.com/vue/2.6.10/vue.js]

本地保存vue.js文件
模块化安装

npm i vue -D/-S
cnpm
yarn
  1. 引入
<script src="basic-source/vue.js"></script>
  1. 初始化
new Vue({
el: '#app'
})

i. 必须有一个html容器, 决定vue.js的作用范围

<div id="app"></div>     //举个例子

ii. 初始化

new Vue(options)
  • el 表示装载, 将上面id为app的模板装载在 new Vue的实例中,也确定了一个作用范围
  • data 数据

注意:学习vue.js即要学习配置项 && api

  1. 数据绑定(声明式渲染)
    名词:
    mustauch语法糖: 双大括号语法 {{}} 支持js语法

注意事项:模板中的 this 指的是 new Vue得到的实例 , 在模板中 this可以省略不写

<p> {{ this.$data.msg }} </p>
<p> {{ this.msg }} </p>
<p> {{ msg }} </p>  推荐使用
  1. data选项在根实例中是对象, 除了跟实例以外是函数

  2. 如何激活浏览器中 vue detools工具
    必须有服务器

    7.vue.js是MVVM框架
    M --> options 中 data
    V --> options 中 el(模板)
    VM --> new Vue() 得到的实例, 这个实例身上有很多的属性和方法

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值