vue||初体验&简陋版计数器

灰太狼 2023-03-13 12:16 28阅读 0赞

## 概念 ##

Vue是一套用于构建用户界面的渐进式框架。  
Vue.js 是用于构建交互式的 Web 界面的库。  
Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。  
开发文档链接：https://cn.vuejs.org/v2/guide/

## 我的第一个vue程序 ##

步骤：  
1）导入vue插件  
2）页面布局（挖坑）  
3）建立Vue对象（填坑）

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>hello world</title>
        </head>
        <body>
            <div id="test">
                { {  message }}
            </div>
        </body>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script type="text/javascript">
             var dated = new Vue({ 
                 //挂载点
                 el: "#test",
                 //数据
                 data:{ 
                     message:"hello vue!"
                 }
             });
        </script>
    </html>

页面效果如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70]

## 实例：简陋版计数器 ##

**功能需求：**  
1）点击“ - ”按钮时，判断数据是否为最小值0，如果是，则弹框弹出相关提示信息；如果不是，则数据减1。  
2）点击“ + ”按钮时，判断数据是否为最大值10，如果是，则弹框弹出相关提示信息；如果不是，则数据加1。

**相关知识点**  
1）v-on:事件名 = 方法名  
用来给标签添加事件（点击事件、失去光标事件等）。  
可以用简洁版写法：@事件名 = 方法名。  
2）v-text :name / v-html:name / \{ \{ name \}\}  
v-text：name  
相当于innerText，将标签元素的内容替换成name变量的具体内容（不识别HTML）；  
v-html：name  
相当于innerHtml,将标签元素的内容替换成name变量的具体内容（识别HTML）；  
\{ \{ name \}\}  
根据实际情况对标签相关内容进行替换 or 添加。  
3）this.名字 可以获取data中的数据。

**源代码**

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>计数器</title>
        </head>
        <body>
            <div id="test" >
                <button id="cut" v-on:click = "cutIt" style="position: relative;left: 4px;bottom: 8px; height: 40px;width: 80px; color: white;font-size: 32px;background-color: violet;"> - </button>
                <textarea id="count" style="resize: none; height: 32px;width: 100px;font-size: 16px;font-weight: 800; text-align: center;"> { { num}} </textarea>
                <button id="add" @click = "addIt" style="position: relative;right:4px;bottom: 8px;height: 40px;width: 60px; color: white;font-size: 32px;background-color: violet;"> + </button>
            </div>
        </body>
        
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script type="text/javascript">
             
             var dated = new Vue({ 
                 //挂载点
                 el: "#test",
                 //数据
                 data: { 
                    num : 1
                 },
                 //方法
                 methods: { 
                    cutIt: function () { 
                        if(this.num == 0){ 
                            alert("已经到达最小值啦！！");
                        }else{ 
                            this.num--;
                        }
                    },
                    addIt: function () { 
                        if(this.num == 10){ 
                            alert("已经到达最大值啦！！");
                        }else{ 
                            this.num++;
                        }
                    } 
                }
             });
        </script>
    </html>

**效果**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70]: /images/20230312/07e36e77107b4a579b816124b887a8c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70 1]: /images/20230312/8d8b128b3e7a421bb83033b7fae13ba0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200513164658416.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200513164708331.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw,size_16,color_FFFFFF,t_70