Vue

最新推荐文章于 2022-08-19 16:24:09 发布

tellmeyesorno

最新推荐文章于 2022-08-19 16:24:09 发布

阅读量120

点赞数

分类专栏： # 网络(JAVA) 文章标签： vue java idea

本文链接：https://blog.csdn.net/u010247166/article/details/87745859

版权

网络(JAVA) 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

一.官网

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

二.简介

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

三.特点

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

四.扩展插件

vue-cli: vue 脚手架
vue-resource(axios): ajax 请求
vue-router: 路由
vuex: 状态管理
vue-lazyload: 图片懒加载
vue-scroller: 页面滑动相关
mint-ui: 基于 vue 的 UI 组件库(移动端)
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

tellmeyesorno

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue

文章目录一.官网二.简介三.特点四.扩展插件五.Helloworld一.官网英文官网: https://vuejs.org/中文官网: https://cn.vuejs.org/二.简介渐进式 JavaScript 框架作者: 尤雨溪(一位华裔前 Google 工程师)作用: 动态构建用户界面三.特点遵循 MVVM 模式编码简洁, 体积小, 运行效率高, 适合移动/P...
复制链接

扫一扫