23-尚硅谷-微信支付-初识Vue-数据绑定和事件

那接下来呢，我们来看一下，我们在这个里面呢，再添加一些更丰富的内容，那么这个呢，就是我们脚本部分的基本的结构了，所有的内容呢，我们必须要写在export default后面的这个大括号之间，那么在这个地方呢，我们可以为页面定义呢数据模型，那这个data里面的语句里面定义的就是我们这个页面的数据模型了，比如说在这面呢，我来定义一个课程名称，微信支付，好，那我们如何将这个cos这个数据显示在页面当中呢？我们这个地方需要有一个叫差值表达式，差值表达式啊，那差值表达式如何去体现出来呢？是一个双大括号，那双大括号里面呢，指定我们贝塔里面定义的元素就可以了。好，那现在呢，我们来看一下页面，微信支付这个文本呢，就展示在了我们的页面当中，所以这个呢，就是我们所说的数据绑定。

好，那么为了方便调试我们的view程序呢，我们可以安装一个view的调试工具，这个调试工具呢，是专门应用于Chrome浏览器的，我们打开我给大家提供的资料啊，在资料工具这个目录下有一个S这样的一个谷歌浏览器的插件，因为我们去谷歌浏览器上下载这个插件呢，基于我们现在的绝大部分同学的网络环境呢，不是很方便，所以呢，我把这个插件打包了，大家直接呢解压这个压缩包，然后安装这个插件就可以了，那具体的方式呢，就是右键把这个插件解压。好，解压之后呢，我们打开谷歌浏览器，在浏览器当中的右上角有三个点儿，点击一下更多工具，里面呢有一个扩展程序。然后我们把开发者模式这个模式打开。

接下来呢？我们点击加载已解压的扩展程序。然后接下来呢，我们就选择插件的目录，那我这个在这个位置哈。好，我们选择这个目录，这样的话呢，这个扩展程序呢，就加载到我们的谷歌的浏览器当中了，然后接下来呢，我们来到刚才我们编写的这个案例的页面，我们按F12，或者是有些同学的快捷键不是F12啊，那你就可以右键检查也可以，这样的话呢，就可以打开我们的开发者工具，那么在开发者工具这一块呢，我们刷新一下。就可以看到呢，有一个选项卡，那么在选项卡当中呢，我们就可以进行页面的调试了，因为我们当前的这个页面呢，是写在名字叫做点啊，我们管它叫组这个组当中的，所以呢在这面我们就可以看到这个组呢，已经被加载到我们的开发者工具当中了，然后呢，在右侧我们就可以看到我们在data那个数据模型当中定义的这些数据了，所以呢，这个cos就是目前为止我们页面当中的数据，那么通过这样的一个方式呢，我们可以监听到我们页面当中的数据的变化。

方便我们前端的调试，好，那刚才我们讲的呢，是一个。数据绑定的概念，另外呢，还有差值表达式的概念。还有就是安装了我们的前端的调试工具，那接下来呢，我们再来说一个双向数据绑定的概念，所谓的双向数据绑定呢，就是不但我们脚本当中的数据定义会影响到我们页面当中的内容展示，那么反过来我们页面的内容展示也会影响到我们脚本当中的数据定义，那我们来在我们的页面当中呢，添加一个input文本框，好，这是一个用户输入组件，然后呢，在input文本框当中呢，我们写一个v model，这个model呢，在view当中它叫做指令。

那除了model这个指令之外呢，实际上view当中还有很多其他的指令，这里呢，我们就不去扩展了，在model当中呢，我们指定。Cos这个数据值，这样的话呢，我们就可以把cos里面的数据和input的文本框呢绑定到一起了，那么大家可以发现呢，在文本框当中呢，也显示了微信支付这样的文本，说明呢，这个是一个数据绑定，那目前为止呢，我们的数据绑定呢，还是单项数据绑定的一个体现，也就是说你会发现当你为cos进行了定义的时候，那么文本框和前面的啊这个文本一样都展示出来了，所以这是一个单项数据绑定的体现，但是现在大家注意我在文本框当中输入一些其他的内容。

那么在我们的调试工具当中，我输入的内容呢，影响到了我们当中的cos啊这个变量的值，所以这个呢，其实就是双向数据绑定好，最后呢，我们再来说一下在view当中的用的比较多的事件处理，比如说我们这面呢，有一个按钮啊。这个按钮呢，是一个支付按钮。好，叫去支付。那么我们想在点击这个按钮的同时呢，响应一个事件，然后呢，让他来调用我们的后端接口，完成整个应用程序的支付的功能，那这样的话呢，我们就必须为这个按钮呢去注册事件，那么如何去注册事件呢？首先我们要有一个事件的方法的定义，所以我们需要在methods这个关键字里面呢，去定义我们的方法，好methods呢，这个后面是一个大括号，所以这个里面呢，它会指定若干方法，那首先呢，我们来指定一个支付方法，那我们为我们自己定义的这个方法呢，起个名字，那么在view当中，我们可以这样去定义一个方法，好，然后can.log叫做去支付。

那我们通过在前端浏览器的控制台上打印一个日志的形式呢，来检查一下这个方法是否能够被成功的调用，接下来呢，我们就需要在button这个按钮当中去注册我们刚才的那个方法，那么注册方法的具体的方式呢，就是at click，然后我们指定一下刚才咱们写的这个方法的名字就可以了。好，接下来呢，我们在我们的浏览器当中呢，去点击一下这个去支付，点击之前呢，我们先把开发者工具切换到CE这个选项卡当中，然后我们来点击去支付，你会发现呢，刚才我们注册的这个事件呢，就成功的运行了。

那么以上这些内容呢，就是我要给大家介绍的的一个基本的入门知识。