VUE学习--idea

最新推荐文章于 2024-08-25 00:12:43 发布

三月计划

最新推荐文章于 2024-08-25 00:12:43 发布

阅读量548

点赞数 2

分类专栏： java JS vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44518089/article/details/108907642

版权

本文介绍了Vue.js的基础知识，包括MVC和MVVM架构，MVVM的优势，以及Vue.js的重要特性如事件处理、数据双向绑定、组件、Axios异步通信、计算属性和插槽。同时，讲解了如何在IDEA中设置Vue环境，使用Vue CLI创建项目，理解Webpack配置，并涉及vue-router的初步应用。

摘要由CSDN通过智能技术生成

MVC三层架构

MVC==>Model+View+Controller应用于分层开发思想
Model：模型层，模型代表只存一个java pojo，可以带有逻辑，随时更新数据
View：视图层，代表模型包含的数据可视化
Controller:控制器层，控制数据流向模型，在数据发生变化时，更新视图，使的视图和模型分离

MVVM

MVVM：Model-View-View-Model一种设计模式，设计模式源于MVC，核心就是ViewModel负责转化Model中的数据对象，是的数据更容易管理，VM向上和视图层进行对数据进行双向绑定，向下和Model层通过接口进行数据交互

MVVM优点

MVVM和MVC的目的时一样的，主要是为了分离Model和View，
低耦合：VIew可以独立于Model进行修改，一个View绑定到不同的VM上，当View变化时，Model可以不变，当Model变化时，View也可以不变，
独立开发：开发人员专注于View和Model的开发，设计人员专注于页面设计
可复用：可以把多个View放在ViewModel上，让多个View复用视图逻辑
可测试：界面都是按照客户的需求来确定，客户需求不断变化，很难满足客户需求，可以针对ViewModel进行测试。

MVVM组成部分

Rutime及时运行 Compiler及时编译
在这里插入图片描述

学习Vue前的准备

idea下载vue插件，重启idea

第一个Vue程序

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--引入Vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<body>
<!--View层 模板-->
<div id="app">
{
  {message}}
</div>
<script>
var vm = new Vue({
    el:"#app",
    //Model ：数据
    data:{
        message:'vue'
    }
})
</script>
</body>
</html>

说明：
el:"#app" ：绑定元素id
data：数据对象中有一个message 的属性，初始化为vue

Vue的基本语法

v-bind：绑定一个数据，鼠标悬浮，显示提示信息

<!--View层 模板-->
<div id="app">
{
  {message}}
<span v-bind:title="message">鼠标悬浮出现提示信息</span>
</div>

带有v-的称之为指令，表示vue提供的特殊属性，会在渲染DOM上应用特殊的响应式行为。

v-if、v-else

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<span v-if="ok">ok</span>
<span v-else>no</span>

<h1 v-if="type==='a'">a</h1>
<h1 v-else-if="type==='b'">b</h1>
<h1 v-else>c</h1>
</div>
<script>
var vm = new Vue({
    el:'#app',
    data:{
        ok:true,
        type:'a'
    }
})
</script>
</body>
</html>

v-for

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1 v-for="(item,index) in list">
    {
  {index}}--{
  {item.msg}}
</h1>
</div>
<script>
var vm = new Vue({
    el:"#app",
    data:{
        list:[
            {msg:"tt"},
            {msg:'yy'},
            {msg:'oo'}
        ]
    }
})
</script>
</body>
</html>

事件

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1 v-on:click="hello()">点我</h1>
</div>
<script>
var vm = new Vue({
    el:"#app",
    data:{
        msg:"Hello Vue"
    },
    methods:{
        hello:function () {
            alert(this.msg);
        }
    }
})
</script>
</body>
</html>