【Javaweb开发必备】十分钟速通Vue！_java开发工程师写vue的思想-优快云博客

M	Model	数据模型	特指前端中通过请求从后台获取的数据，泛指后端进行的各种业务逻辑处理和数据操控。
V	View	视图	用于展示数据的页面，也就是平时浏览的网页，运行html后浏览器展示的页面。
VM	ViewModel	视图模型	将数据绑定到视图，负责将数据（Model）通过JavaScript的DOM技术，将数据展示到视图上。

我们已知JavaScript的DOM技术，代码比较繁琐，冗长，而Vue框架就是用来替代JavaScript的DOM操作，简化代码的。

2️⃣如何理解框架？

框架提供了一个基础结构，是一种为了实现特定类型软件系统的开发而设计的通用模板。通俗易懂的来讲，框架就像是房屋的骨架，这个骨架包括房梁、柱子的基本摆放位置等，而我们只需要在这个框架的基础上进行填充，堆砌，装饰就行了。

三、Vue入门

1️⃣我们该如何使用Vue呢？

1.第一步：自定义一个html文件。

2.第二步：在官网https://vuejs.org/上下载vue.js文件。

3.第三步：将该vue.js文件拷贝到这个自定义html文件的同级目录下。

4.第四步：通过<script>标签引入vue.js文件。

5.第五步：在js代码区域定义vue对象，代码如下：

<script>
/／定义Vue对象
new Vue({
el: "#app",
data:{
message: "Hello Vue"
     }
})
</script>

6.第六步：在body标签内写会在网页展示的视图。

<body>
    <div id="app">
        <input type="text" v-model="message">
        {{message}}
    </div>
</body>

7.第七步：运行。

接下来我们会对以上内容进行分析，解释。

2️⃣要想使用vue框架，我们要先创建一个vue对象，那么这个对象具有哪些常用属性呢？

el:用来指定受Vue管理的标签。比如本例中的id属性值为app的标签，就是受管理的。
data:放置视图中需要绑定的数据，是一个对象或返回对象的函数。
methods:用来定义函数，比如按钮点击事件处理函数。

3️⃣{{message}}是什么意思，有什么作用？

{{}}是一个插值表达式，可以将包裹的内容展示到网页上。

🔴插值表达式

✔️形式：{{表达式}}

✔️内容：💚变量

💚三元运算符

💚函数调用

💚算术运算

✔️作用：数据展示，条件判断，循环渲染

四、Vue指令

1️⃣什么是Vue指令？

指令：HTML标签上带有v-前缀的特殊属性，用于在Vue.js中对DOM进行操作、响应数据变化以及实现各种功能。在vue中，通过大量的指令将数据绑定到视图。

通俗的讲：指令就像是特殊的“命令”一样，开发者通过这些“命令”控制页面上的元素。

2️⃣Vue有哪些常用指令？

我们来看一幅思维导图

以下是相关解释：

🌈什么是动态绑定属性？

v - bind 是Vue.js中用于实现动态绑定属性值的指令，它能让HTML元素的属性和Vue实例中的数据建立关联，使属性值随数据变化而动态更新。

🌈什么是双向数据绑定？

当vue对象的data属性中的数据变化时，视图展示会随之变化。

当视图数据发生变化时，vue对象的data属性中的数据也会随之变化。

也就是说：一方发生改变，另一方也随之变化。

⚠️注：双向绑定一定是使用在表单项标签上的。

🌈什么是事件监听？

在软件系统中，各种交互操作（如用户点击按钮、鼠标移动、键盘输入，或系统中发生特定状态变化等）都被视为事件。事件监听就是在程序中设置特定的代码块，当指定的事件发生时，这些代码块会被自动执行，从而实现相应的功能或逻辑。

🌈v-if, v-if-else, v-else, v-show都可以进行渲染展示，那么什么是渲染展示呢？

渲染展示：指的是将服务器端的数据和相关逻辑处理后，以特定的格式呈现给客户端用户的过程。

🌈最后，请看这几个指令的示例代码：

以下是Vue中这些常用指令的用法示例代码：

📚v-bind

用于动态绑定属性，缩写为 :

html

<template>

  < img :src="imageUrl" alt="示例图片">

</template>

<script>

export default {

  data() {

    return {

      imageUrl: 'https://example.com/image.jpg'

    };

  }

};

</script>

📚v-model

实现双向数据绑定，常用于表单元素。

html

<template>

  <input v-model="message" type="text">

  <p>输入的内容是：{{ message }}</p >

</template>

<script>

export default {

  data() {

    return {

      message: ''

    };

  }

};

</script>

📚v-on

用于事件监听，缩写为 @ 。

html

 <template>

  <button @click="handleClick">点击我</button>

</template>

<script>

export default {

  methods: {

    handleClick() {

      console.log('按钮被点击了');

    }

  }

};

</script>

📚v-if

根据表达式真假决定是否渲染元素。

html  

<template>

  <div v-if="showElement">这是一个根据条件显示的元素</div>

</template>

<script>

export default {

  data() {

    return {

      showElement: true

    };

  }

};

</script>

📚v-else

与 v-if 配合使用，当 v-if 表达式为假时渲染。

html

<template>

  <div v-if="loggedIn">欢迎登录</div>

  <div v-else>请先登录</div>

</template>

<script>

export default {

  data() {

    return {

      loggedIn: false

    };

  }

};

</script>

📚v-else-if

与 v-if 配合使用，提供多条件判断。

html

  <template>

  <div v-if="score >= 90">优秀</div>

  <div v-else-if="score >= 70">良好</div>

  <div v-else>不及格</div>

</template>

<script>

export default {

  data() {

    return {

      score: 80

    };

  }

};

</script>

📚v-show

通过CSS的 display 属性控制元素显示隐藏。

html

<template>

  <div v-show="isVisible">这是一个可以切换显示隐藏的元素</div>

</template>

<script>

export default {

  data() {

    return {

      isVisible: true

    };

  }

};

</script>

📚v-for

用于列表渲染，遍历数组或对象。

html

<template>

  <ul>

    <li v-for="(item, index) in items" :key="index">{{ item }}</li>

  </ul>

</template>

<script>

export default {

  data() {

    return {

      items: ['苹果', '香蕉', '橙子']

    };

  }

};

</script>

📚v-once

一次性插值，数据改变时，视图不再更新。

html

<template>

  <div v-once>{{ message }}</div>

  <button @click="changeMessage">改变信息</button>

</template>

<script>

export default {

  data() {

    return {

      message: '初始信息'

    };

  },

  methods: {

    changeMessage() {

      this.message = '改变后的信息';

    }

  }

};

</script>

📚v-text

更新元素的文本内容。

html

<template>

  <div v-text="textContent"></div>

</template>

<script>

export default {

  data() {

    return {

      textContent: '这是通过v-text设置的文本'

    };

  }

};

</script>

五、Vue生命周期

Vue的生命周期类似于变量的生命周期，函数的执行过程。指的是Vue对象从创建到销毁的过程。其中有8个阶段。

BeforeCreate	创建前
created	创建后
beforeMount	挂载前
mounted	挂载后
BeforeUpdate	更新前
updated	更新后
beforeDestroy	销毁前
destroyed	销毁后