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

基本语法 双向绑定体验

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

    
    
    Document



    
        

         {{name}}, 唱歌很好听. 有{{num}}个人是他的粉丝.  
    

    
        let vm=new Vue({
            el: "#txt",
            data: {
                name: "周杰伦",
                num: 1
            }
        })
    

初始进入页面显示如下 在输入框输入值后, 动态的显示如下

点击事件

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

声明方法

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

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

在页面中调用的代码如下, 直接使用cancle 进行调用即可 粉丝减一

    
        

        粉丝加一

        粉丝减一

         {{name}}, 唱歌很好听. 有{{num}}个人是他的粉丝.  
    

    
        let vm=new Vue({
            el: "#txt",
            data: {
                name: "周杰伦",
                num: 1
            },
            methods:{
                cancle(){
                    this.num--
                }
            }
        })
    

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

Vue插件安装

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