谷粒商城30- 前端基础 VUE 基本语法&插件安装

古城微笑少年丶 2023-03-03 15:25 33阅读 0赞

### 文章目录 ###

*   *  基本语法
     *   *  双向绑定体验
         *  点击事件
         *  声明方法
     *  Vue插件安装

## 基本语法 ##

### 双向绑定体验 ###

用input , 输入粉丝的人数 , 动态的获取粉丝人数 . num默认值为1  
使用`v-model`进行绑定

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <body>
        <div id="txt">
            <input type="text" v-model="num">
    
            <h1> {
       {name}}, 唱歌很好听. 有{
       {num}}个人是他的粉丝.  </h1>
        </div>
    
        <script> let vm=new Vue({ el: "#txt", data: { name: "周杰伦", num: 1 } }) </script>
    </body>
    </html>

初始进入页面显示如下  
![20200731200659996.png][]  
在输入框输入值后, 动态的显示如下  
![20200731200722754.png][]

### 点击事件 ###

在上面的代码中, 加入一行. button的点击事件,  
`<button v-on:click="num++">粉丝加一</button>`  
使用 `v-on:click="num++"` 进行绑定  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70][]  
页面显示效果如下, 每次点击按钮, 粉丝的人数加一  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1][]

### 声明方法 ###

使用methods 来进行方法的声明, 其中, 定义了cancle方法, 用于把粉丝数减一.

methods:{ 
        cancle(){ 
                  this.num--
              }
          }

在页面中调用的代码如下, 直接使用cancle 进行调用即可  
`<button v-on:click="cancle">粉丝减一</button>`

页面显示的效果如下 ,点击加一的按钮, 粉丝数加一, 点击 减一的按钮, 粉丝数减一.

![20200731201829943.png][]

## Vue插件安装 ##

Vscode安装此插件, 可以有语法提示  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2][]  
谷歌浏览器安装此插件  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 3][]  
浏览器的插件显示如下 , 打开F12 后可以看到有Vue的tab页. 可以看到和vue相关的信息  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 4][]

[20200731200659996.png]: /images/20230208/7dc9799399d44fa78f21002abcf4adda.png
[20200731200722754.png]: /images/20230208/743cbf9719da44de816bf8998d7b43ac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70]: /images/20230208/e1c8446c0cfa402cb02b675de3f2e2ee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1]: /images/20230208/7ae62bee506b47a6be36e4eaf9328949.png
[20200731201829943.png]: /images/20230208/63caee75b7ac43f8829755be87fcbaf0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2]: /images/20230208/4b2fbc71f8054f32be6a61d062abef15.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 3]: /images/20230208/46fd8fe15e754e20980c52810001aaef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 4]: /images/20230208/d6a4574850374771b945d60178ecdb29.png