Vue

一.官网

  1. 英文官网: https://vuejs.org/
  2. 中文官网: https://cn.vuejs.org/

二.简介

  1. 渐进式 JavaScript 框架
  2. 作者: 尤雨溪(一位华裔前 Google 工程师)
  3. 作用: 动态构建用户界面

三.特点

  1. 遵循 MVVM 模式
  2. 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
  3. 它本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目
  4. 借鉴 angular 的模板和数据绑定技术
  5. 借鉴 react 的组件化和虚拟 DOM 技术

四.扩展插件

  1. vue-cli: vue 脚手架
  2. vue-resource(axios): ajax 请求
  3. vue-router: 路由
  4. vuex: 状态管理
  5. vue-lazyload: 图片懒加载
  6. vue-scroller: 页面滑动相关
  7. mint-ui: 基于 vue 的 UI 组件库(移动端)
  8. element-ui: 基于 vue 的 UI 组件库(PC 端)

五.Helloworld

1.Idea配置vue插件
在这里插入图片描述
2.Idea创建web项目
在这里插入图片描述
3.Tomcat配置
先配置defalt的tomcat,后面才有“+”里的tomcat,项目要先maven编译生成target,后面才有tomcat的artifct选项

MVVM模型
<script type="text/javascript" src="js/vue.js"></script>
<body>
<h2>Hello World!</h2>

<!--div是一个view-->
<div id="app">
    <input type="text" v-model="username">
    <p>hello {{username}}</p>
</div>

<script type="text/javascript">
    //创建Vue实例
    const vm = new Vue({ //Vue是一个vm
        el:'#app', //元素
        data:{ //data是一个model
            username:'firstDemo'
        }
    })
</script>

在这里插入图片描述

六.浏览器插件

下载地址
官网地址
谷歌访问助手
历史版本
温情提示:
1.vue必须引入开发版, 使用min压缩版是不能使用devtools进行调试的
2.安装后, 需要关闭浏览器, 再重新打开, 才能使用
按F12,选择Vue选项,即可调试
在这里插入图片描述

七.原理

1.理解MVVM

在这里插入图片描述

d_d

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值