在IDEA 中使用 VUE + VUE 常用语法 + 入门案例实现

矫情吗；* 2022-10-12 00:45 380阅读 0赞

### VUE 入门 ###

*  VUE 入门
 *   *  一、vue 概念
     *  二、在 IDEA 中创建 VUE 项目
     *   *  1. 第一种创建方式——创建静态 WEB 项目
         *   *  1.1 新建一个 Static Web 项目
             *  1.2 填写项目名
         *  2. 第二种创建方式——创建空项目
         *   *  2.1 新建一个 Empty Project 项目
             *  2.2 填写项目名
     *  三、VUE常用指令
     *   *  1. VUE 入门案例
         *  2. v-text
         *   *  2.1 语法
             *  2.2 例子
         *  3. v-bind
         *   *  3.1 语法
             *  3.2 例子
         *  4. v-model
         *   *  4.1 语法
             *  4.2 例子
         *  5. v-html
         *   *  5.1 语法
             *  5.2 例子
         *  6. v-if
         *   *  6.1 语法
             *  6.2 例子
         *  7. v-for
         *   *  7.1 语法
             *  7.2 例子
         *  8. v-on
         *   *  8.1 语法
             *  8.2 例子
         *  9. v-show
         *   *  9.1 语法
             *  9.2 例子
         *  10. VUE 传 id 参数语法
     *  四、VUE 事件
     *   *  1. 事件操作注意点
         *  2. 例子
     *  五、VUE 属性
     *   *  1. el 属性
         *  2. data 属性
         *  3. methods 属性
         *  4. filters 属性
         *  5. mounted 属性
         *  6. template 属性
         *  7. render 属性
         *  8. computed 属性
         *  9. watch 属性
     *  六、VUE + SpringBoot 实现前后端分离案例
 *  总结

# VUE 入门 #

## 一、vue 概念 ##

> Vue (读音 /vjuː/，类似于 **view**) 是一套用于构建用户界面的**渐进式框架**。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与[现代化的工具链][Link 1]以及各种[支持类库][Link 2]结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

## 二、在 IDEA 中创建 VUE 项目 ##

### 1. 第一种创建方式——创建静态 WEB 项目 ###

#### 1.1 新建一个 Static Web 项目 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6dmFy_size_16_color_FFFFFF_t_70]

#### 1.2 填写项目名 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6dmFy_size_16_color_FFFFFF_t_70 1]

### 2. 第二种创建方式——创建空项目 ###

#### 2.1 新建一个 Empty Project 项目 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6dmFy_size_16_color_FFFFFF_t_70 2]

#### 2.2 填写项目名 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6dmFy_size_16_color_FFFFFF_t_70 1]

## 三、VUE常用指令 ##

### 1. VUE 入门案例 ###

*  胡子语法：\{ \{\}\} ，\{ \{\}\} 可以是：【1】表达式；【2】字符串；【3】函数；【4】正则表达式；【5】boolean；【6】…；
 *  new Vue()：创建 Vue 实例，然后构造函数接收一个对象，对象中有一些属性；
 *  el：是element的缩写，通过id选中要渲染的页面元素，本例中是一个div；
 *  data：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中；
 *  message：这里我们指定了 data 中的一个 message 属性；
 *  \{ \{\}\}：通过 \{ \{\}\} 的方式取出属性值。

**注意**：\{ \{属性\}\} 该只能在 html 标签的内容（开始标签与结束标签之间）上使用。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../../js/vue.js"></script>
    </head>
    <body>
        
        <div id="app">
            
            {
       { message }}
        </div>
    
        <script> var app = new Vue({ // vue 实例对象 el: '#app', // 指定模板 data: { message: 'Hello Vue!' // 填充模板所需要的数据 } }); </script>
    </body>
    </html>

### 2. v-text ###

用于更新标签包含的文本，它的作用跟双大括号效果是一样的。

#### 2.1 语法 ####

#### 2.2 例子 ####

### 3. v-bind ###

**属性绑定指令**，给 html 标签的属性绑定数据，注意冒号后面跟标签的属性，属性后面的等号指向数据，它可以简写为 :class, :href。

#### 3.1 语法 ####

#### 3.2 例子 ####

<div id="app">
        
        
        <span v-bind:title="title"> {
       {msg}} </span>
        <br/>
        
        <span :title="title"> {
       {msg}} </span>
        <a v-bind:href="href">百度</a>
        <img :src="src" width="690" height="370">
    </div>
    <script> let vue = new Vue({ el: "#app", data: { title: "瞅你咋地", msg: "你瞅啥~", href: "http://www.baidu.com", src: "http://img.mp.sohu.com/upload/20170510/62d64c61ccc74f1d840467d483d87566_th.png" }, }); </script>

### 4. v-model ###

用于表单输入，**实现表单控件和数据的双向绑定**。只要给 input 控件添加 v-model 指令，并指定关联的数据 msg，就可以轻松把用户输入的内容绑定在 msg 上。

#### 4.1 语法 ####

#### 4.2 例子 ####

<div id="app">
    	
        v-bind:<input name="username" :value="msg"><br/>
        
        v-model:<input name="username" v-model="msg">
        
        v-model:<input name="username" v-model:value="msg">
    </div>
    <script> let vue = new Vue({ el: "#app", data: { msg: "yy" } }) </script>

### 5. v-html ###

\{ \{\}\}语法无法渲染 HTML 标签，我们需要使用 v-html，将数据以 html 格式输出。

#### 5.1 语法 ####

#### 5.2 例子 ####

<div id="app">
        <div v-html="msg">{
       {msg}}</div>
    </div>
    
    <script> let vue = new Vue({ el: "#app", data: { msg: "<span style='color: red'>这是 html 格式的内容数据</span>" } }) </script>

### 6. v-if ###

根据表达式的值的真假条件渲染元素。在切换时元素及它的 数据绑定 / 组件 被销毁并重建。

#### 6.1 语法 ####

<span v-if="age > 18">欢迎光临</span>
    <span v-else-if="age < 18">18禁</span>
    <span v-else>请家长陪同观看</span>

#### 6.2 例子 ####

<div id="app">
        <span v-if="age > 18">欢迎光临</span>
        <span v-else-if="age < 18">18禁</span>
        <span v-else>请家长陪同观看</span>
    </div>
    
    <script> let vue = new Vue({ el: "#app", data: { age: 19 } }) </script>

### 7. v-for ###

遍历data中存放的数组数据，实现列表的渲染。（v-for指令除了可以迭代数组，还可以迭代对象和整数）。

#### 7.1 语法 ####

#### 7.2 例子 ####

### 8. v-on ###

使用 v-on 我们可以在标签上面绑定事件。通过 v-on 指令修饰 click 点击事件，指定事件响应后的处理函数为 **methods** 中的 clickMeVue() 方法。

#### 8.1 语法 ####

#### 8.2 例子 ####

<div id="app">
        
        <ul>
            
            <li v-for="e in emps" v-on:click="clickMeVue">{
       {e.id}} - {
       {e.name}} - {
       {e.age}}</li>
        </ul>
    
        
        <ul>
            <li v-for="e in emps" @click="clickMeVue">{
       {e.id}} - {
       {e.name}} - {
       {e.age}}</li>
        </ul>
    </div>
    
    <script> let vue = new Vue({ el: "#app", data: { emps:[ { id:1, name:"a", age:"10"}, { id:2, name:"b", age:"11"}, { id:3, name:"c", age:"12"}, { id:4, name:"d", age:"13"}, ] }, methods: { clickMeVue: function () { alert("被点了~~vue"); } } }) </script>

### 9. v-show ###

指令的取值为true/false，分别对应着显示/隐藏，例如下面这段代码，show1会被显示出来，show2会被隐藏。

#### 9.1 语法 ####

#### 9.2 例子 ####

<div id="app">
        <p v-show="show1"> show </p>
        <p v-show="show2"> none </p>
    </div>
    <script> let app = new Vue({ el:"#app", data:{ show1:true, show2:false } }) </script>

### 10. VUE 传 id 参数语法 ###

## 四、VUE 事件 ##

### 1. 事件操作注意点 ###

*  **事件源**：被触发事件的那个 html 标签；
 *  **事件响应函数**：当事件被触发了，执行逻辑；
 *  **事件对象**：从事件源触发事件到最后响应函数执行整个过程中产生的数据封装对象；
 *  **事件参数传值**：从事件源中获取信息传递，响应函数中；

### 2. 例子 ###

<div id="app">
        <ul>
            
            <li v-for="e in emps" @click="clickMeVue($event,e)">
                {
       {e.id}} - {
       {e.name}} - {
       {e.age}}
            </li>
        </ul>
    </div>
    
    <script> let vue = new Vue({ el: "#app", data: { emps:[ { id:1, name:"a", age:"10"}, { id:2, name:"b", age:"11"}, { id:3, name:"c", age:"12"} ] }, methods: { clickMeVue: function (event, emp) { console.log(event); // 事件对象 console.log(event.target); // 事件源 console.log(emp); } } }) </script>

## 五、VUE 属性 ##

### 1. el 属性 ###

用来指示vue编译器从什么地方开始解析 vue的语法，通常绑定盒子；

### 2. data 属性 ###

用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中；

### 3. methods 属性 ###

放置页面中的业务逻辑，js方法一般都放置在methods中；

### 4. filters 属性 ###

vue过滤器集合；

<div id="app">
        <ul>
            <li v-for="e in emps">
                {
       {e.id}}-{
       {e.name}}-{
       {e.age}}-{
       {e.sex==1?'男':'女'}}
            </li>
        </ul>
    
        <ul>
            <li v-for="e in emps" v-on:click="clickMeVue($event,e)">
                
                {
       {e.id}}-{
       {e.name}}-{
       {e.age}}-{
       {e.sex | sexFilter}}
            </li>
        </ul>
    </div>
    
    <script> // 全局 filters：由于 js 代码执行顺序从上到下，所以全局过滤器需要在该过滤方法之前执行； // 在创建 Vue 实例之前全局定义过滤器： /*Vue.filter('sexFilter', function (sex) { if (sex == 1) { return "男"; } else if (sex == 0) { return "女"; } else { return "保密"; } });*/ var vue = new Vue({ el: "#app", data: { emps:[ { id:1, name:"a", age:"10", sex:0}, { id:2, name:"b", age:"11", sex:1}, { id:3, name:"c", age:"12", sex:-1}, ] }, methods:{ clickMeVue:function (event, emp) { console.log(event); // 事件对象 console.log(event.target); // 事件源 console.log(emp); } }, // 局部过滤器 filters:{ sexFilter:function (sex) { if (sex == 1) { return "男"; } else if (sex == 0) { return "女"; } else { return "保密"; } } }, mounted:function () { console.log("执行数据初始化") } }); </script>

### 5. mounted 属性 ###

是一个函数， 在vue实例创建完成后被立即调用（html加载完成后，模板解析完成，数据还没填充的时候执行），一般用于初始化data中的数据；

<div id="app">
        <ul>
            <li v-for="e in emps" v-on:click="clickMeVue($event,e)">
                
                {
       {e.id}}-{
       {e.name}}-{
       {e.age}}-{
       {e.sex | sexFilter}}
            </li>
        </ul>
    </div>
    
    <script> var vue = new Vue({ el: "#app", data: { emps:[ /* {id:1, name:"a", age:"10", sex:0}, {id:2, name:"b", age:"11", sex:1}, {id:3, name:"c", age:"12", sex:-1} */ ] }, methods:{ clickMeVue:function (event, emp) { console.log(event); // 事件对象 console.log(event.target); // 事件源 console.log(emp); } }, // 局部过滤器 filters:{ sexFilter:function (sex) { if (sex == 1) { return "男"; } else if (sex == 0) { return "女"; } else { return "保密"; } } }, mounted:function () { // 在 vue 实例创建之后，模板解析完成，data 数据还没初始化 // 此时执行 mounted 方法 // 接着执行 data 数据初始化，然后 vue 实例初始化成功，并返回 var _this = this; // vue 实例 // mounted vue 实例暴露出来，专门用于 data 数据初始化函数 // 后续可以通过这个方法，发起异步请求调用接口根据需求获取对应页面展示数据 $.get("/data/emps.json", function (data) { _this.emps = data; }) }, }); </script>

### 6. template 属性 ###

用来设置模板，会替换页面元素，包括占位符；

### 7. render 属性 ###

创建真正的Virtual Dom；

### 8. computed 属性 ###

用来计算，Vue.js 计算属性，计算属性在处理一些复杂逻辑时是很有用的；

### 9. watch 属性 ###

Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化；  
watch:function(new,old)\{\} 监听data中数据的变化 两个参数，一个返回新值，一个返回旧值。

## 六、VUE + SpringBoot 实现前后端分离案例 ##

博文地址：[https://blog.csdn.net/zzvar/article/details/118399092][https_blog.csdn.net_zzvar_article_details_118399092]

# 总结 #

以上就是 VUE 的入门案例了，代码仅供参考，欢迎讨论交流。

[Link 1]: https://cn.vuejs.org/v2/guide/single-file-components.html
[Link 2]: https://github.com/vuejs/awesome-vue#libraries--plugins
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6dmFy_size_16_color_FFFFFF_t_70]: /images/20221005/08a5cb54e6b64d50b3f0567276c99e41.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6dmFy_size_16_color_FFFFFF_t_70 1]: /images/20221005/bc26676edf644b219c58c98d6629c03e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6dmFy_size_16_color_FFFFFF_t_70 2]: /images/20221005/6dddc49490bc483eaef13f643c1b4c2f.png
[https_blog.csdn.net_zzvar_article_details_118399092]: https://blog.csdn.net/zzvar/article/details/118399092