37、前端基础-Vue-基本语法&插件安装

那上一节课呢，我们快速的体会了一下唯VO的强大，主要测试了它的这个声明式渲染功能，也就是说我们以后啊，想要哪个数据，我们只需要呢，在这说明我们要哪个view u呢，只要管控了这个元素，它呢就会自动的将这个数据渲染上去，那接下来呢，我们再来体会一下它的双向绑定，那什么是双向绑定，还以我们这个例子为例，比如呢，我们这儿有一个谁谁谁非常帅，有几人哎，几个人为他点赞，那这样的话呢，这个有多少个人，我希望呢，我们这一块输的是几个，那就是几个，我呢写一个input框，这个input框里边呢，输了几个人，那这就是几个人，那怎么实现这个效果，我们呢，可以用view里边的一个指令叫V-model。这个model呢，代表这个输入框跟我们view里边的一个模型数据模型绑定，跟谁绑定呢？比如我们这有一个叫number，那接下来我们这就来写一个number，比如number初始是一，有几个人为它点赞，那我们最终呢想取取出这个数字，那我们就双大括号nu好来保存一下，看一下效果，展开来，我们发现呢，这有一个人为他点赞，我们输一个二，那就变成两个人为他点赞，这个呢就是我们说的双向绑定过程，我们只需要将元素跟我们模型里边的某一个数据进行绑定，以后呢，我们输入框变了，我们这一块就会变，包括呢，我们这个数据变了，输入框里边也会跟着变。来我们来测试一下VM里边呢，还有一个number，哎，那么我呢，把它变成十，我们回车，然后发现呢，这也变了，所以这就是我们说的双向绑定。

模型的变化呢，也就是模型的变化。那会引起我们这个视图变化，视图变化同理，视图变了，比如我们这个输入框里边我们变了，模型里边也跟着变，反之亦然。

所以呢，这就是我们说的双向绑定，那还是这个例子，我们再来呢，体会一下我们这个事件处理，比如呢，我们来点击按钮来怎么做，我们举一个例子，我们这儿呢，有一个button按钮，这个按钮呢，我们就叫点赞，诶每点一下呢，多一个人为他点赞，如果是以前我们需要为他绑定单击事件，没做一件事要怎么办，可能挺多，现在怎么做，有了V用呢，我们在button按钮上写一个叫VRVR呢是绑定事件来用的，要绑定什么事件，单击事件我们写一个click好加，当一单击以后想要怎么办，我们呢，想要给它数字加一，所以呢，我们直接可以写number加加，相当于我们来干一件事，我们来保存一下，看一下效果，那们在这呢点赞，点赞来，我们每点一下呢，其实呢，就引起了number的加，而这一块的number呢，那就在这儿，这一块一加以后呢，我们表单呢，又跟它是绑定的，所以表单也动了。

而我们页面呢，在这也显示的，那页面也动了，同样的呢，我们来改表单，这还是一样的效果，哎，因为这是整个双向绑定的过程，而我们这个事件呢，是用我们这个v on进行绑定的，那其实呢，我们现在看到了很多的V叉叉，我们有v model v on，那这个呢，我们就称为指令，我们后来呢会学习更多的指令，而且呢，我们用v on来绑事件呢，我们可以直接对我们里边的数据进行操作，如果我们普通的绑事件，诶杰克瑞为这个元素绑定可列可事件，这是不可以的，那么总结起来，我们对尾U的使用，那我们首先呢，第一步就是先要创建一个view u实例，创建view u实例呢，我们就是使用new view u这个方式，而且呢，这个view u实例要关联一个页面的模板，哎，所以说呢，我们先创建5U实例关联页面的模板，我们view u呢，就。

不是使用自己里边的数据，诶将最终呢，将自己的数据渲染到咱们这个关联的模板上，当然这个渲染过程是自动的，而且呢，只要我们这个数据啊，也就是data里边的内容，只要我们这个数据呢发生变化，我们的模板也会跟着变，我们将这个过程呢，称为是响应式的，我们呢还可以通过指令来简化，指令来简化。对DOM的一些操作，比如我们要绑定事件，哎，我们用VR，比如我们要跟他做双向绑定，我们用V杠，Model，当然未来会有非常多的指定，再比如我们点击按钮，可能要做一堆复杂的操作，我们也可以自己来声明一些方法，我们也可以使用方法来声明方法来做更复杂的操作。我举一个例子，我们这儿呢，有一个点赞，那我们再来写一个按钮来取消点赞，V杠二，我们这个取消点赞呢，我们还是绑定单击事件，我们叫取消，那我们想取消呢，没取消一下，我们要给他减数量，我们可以直接在这number减减，当然我们操作如果复杂的话，我们还可以写一个方法，我们来调方法，那怎么做呢？View you还可以有一个属性叫muscles，我。

那以后呢，将所有的方法都放在这里，都放在这里，比如呢，我们有一个方法，我们就叫取消，比如我们就叫cancel吧，好，我们来写了一个方法，然后呢，接下来怎么办？既然是一个方法，好我们直接这么来声明，哎，我们是写了一个方法，我们要对这个number进行操作，我们可以直接this就代表当前实例的number，好，我们给它减减，我们相当于给它发生了变化，那我们想要在这调cancel，我们就直接在这写就行了，我们来测试一下。

那么在这呢，取消诶也可以，点赞也可以，所以呢，我们这个声明方法，我们以后呢，将所有的方法都放在mans里边，可以封装咱们这个方法，这样呢，我们以后绑事件想调方法了或者怎么着了，我们都可以在这直接来调用，当然我们这个view里边到底能写多少属性，EL data methods还是等等等等一大堆，我们后来说我们现在呢，这几个是我们后来用的非常多的EL来主要来绑定一个元素。将我们这个无U实力跟某一个元素来建起关联，然后呢，接下来data是来封装数据，诶，EL，那我们直接写在这儿吧，EL绑定元素，哎，这个data呢是来封装数据，然后muscles呢来封装方法，我们有更多的方法都可以在这写，比如hello，诶等等等等，而且呢，为了我们后来开发方便，我们可以在这装一个VU的插件来进行一些语法提示，比如我们来搜VU，我们以前装了一个这个V拓，然后呢，接下来我们再来装一个VIEW2的这个语法提示，比如呢，它这一块有一个例子，哎，我们写import，它会给我们提示完整的语法，我们new view，它直接给我们整出这个结构等等等等，这就是我们一些快捷键，好，我们直接呢把这个插件一安装以后，我们写语法就有提示了，比如我们先来测一下，我们想直接new view，那我。

来new view这有一个提示我们回车，诶，他直接把这个实例语法格式都提醒出来，还是挺快的，然后呢，我们再来给浏览器安装一个插件，方便我们调试，包括浏览器这也提示我们可以下载一个VU的这个开发工具包，这样呢，我们页面里边有什么变化，我们都可以在这有监控它的数据变成什么样，那这个浏览器上的插件呢，我也发给大家，我们在这个软件里边有一个view tools，当然呢需要将它解压，解压以后呢，我们来安装进来，如何安装呢？打开我们的这一块，有更多工具，有扩展程序，好，扩展程序里边呢，我们调到开发者模式，把它展开，然后呢，我们加载已解压的扩展程序点一下。

我们来找到我们的位置，我们其实是在桌面，我们鼓励商城软件里边，我们来解压的，这个直接进来，这有一个Chrome浏览器适配的，我们选中直接点选择文件夹，那我们这个VIVO插件呢，就装上了，那装上以后呢，我们可以直接重新运行这个页面来open with live server，诶一起来以后呢，F12打开控制台这一块呢，就多了一个V，我们就能看到，诶root，那就是整个页面，页面里边呢，我们data有张三一这些数据，比如我们想要修改，我们也可以直接在这来写，那么当前这个VM元素里边的，比如number，我们变成十一百，那我们看到呢，这也变成100，因面呢，这都会有动静。