03_尚硅谷_Vue_模板语法

嗯，下面我们简单看一下，理解一下他啊没有屏幕啊，屏幕掉了是吧，等一下啊，看屏幕好像掉了。嗯。能看到吗？可以啊，再重新点一下，诶，好。我们前面说过一句话，叫view是这种模式的实现是吧，那这个模式呢，它实际上是几个单词的缩写。嗯，来说一下啊，叫MVVM啊，这个还真是有时候在面试的时候容易问到啊，第一个M是model的意思啊，OK，第二个V呢，叫view，这个好理解啊，后面两个是一个单词叫model。

啊，先看这个最简单的。它翻译过来叫什么视图，实际上就是这个。那也就是说这个视图指谁呢？模板页面对吧？哎，强调一个啊，是模板页面，不是一个静态页面是吧。好，这个应该是好懂的。那它是不是用来显示数据的，那下面就说这。啊，翻译过来啊，角模型。没问题是吧，好，本质上就是什么呢？数据对象。13是谁呀？那数据指的谁呢？对。

能不能，那他们俩之间应该有关系吧？我的模板页面下面是个动态页面呗，动态页面是不是要从某一个地方读数据。读了谁的数据啊，Data的数据啊，但本质上其实还不是啊，只是说数据来源是他啊，数据来源是它啊。好，下面说另外一个东西，View model。翻译过来就是什么视图模型。是吧，那实际上是谁呢？啊，说一下本质是谁你就懂了啊，这个地方本质上就是鱼幼的实力。啊，没有的实力，那是他吗？是他吗？不是，是不是它的实力呀，那也是谁VM，这就是这里面为什么不命名成小view友对吧？按正常情况下应该命名是这个名字才对啊，对不对，但是实际上命名的是这个名字。

为什么把它命名成这个名字呢？因为这是一个单词的缩写，就是这个单词的缩写。能不能好？它呢是这个地方就说，哎，说完这个以后再看这个图啊，不是看这个图啊，看这个上面这个图。左边的是我的什么六是图界面啊，这里面有一个概念叫什么多大家知道啊，要想显示是根据多来显示的，要想更新是不是要通过DOM来更新，但是我们不直接去操作动。对吧，我们并没有直接操作啊，好，这个好理解啊，这个是比较好理解的。只是我要强调一遍，这个模板里面有两个语法，就是这个这个视图里面有两种语法。

这两个语法的这个概念大家应该要知道，一个叫指令。就自定义属性是吧，自定义标签属性，再一个呢，叫大括号表达式，有时候也简称表达式啊，叫大括号表达式，我简写一下啊。他个人干嘛的？显示数据对吧，写两个大括号，写一个表达式啊，这两个要知道啊，好没问题，这个最好理解了，下面其实这个最简单，说实话我懂模型三是谁了，简单来说就是这个date。Date里面是包含了好一些数据啊，N个数据，我这些数据给谁用？试图用，而且它是自动能读啊，这个自动的背后要有一个人的支撑。就是这个核心的管理者是吧，就是这个并不是他啊，只是它的什么实力能懂，不是它的实力啊，记住不是view这个钩子函数。

对，一定要区别开来，大家学了这么多GS啊。构造函数和实例，它是万万不一样的，对不对，好，它这里面呢，有两个事情啊，两个事情，首先它一个概念，诶这什么意思。叫翻译过来叫数据绑定。这个数据绑定实现一个什么样的效果呢？对吧，我的页面，我的视图能够从哪里读数据，Date里面也从model里面是不是读数据显示。也是从内存是跑到页面上去了。这个能理解吧，好，我们说我们除了这样一个白点，是不是还有另外一个方向。哎，这个是一个什么概念呢？这一个就是如果我一个输入框对吧，哎哎，我在输入框发生改变的时候，我能不能去更新一下数据了，能你想想，要一想能够更新数据，我得知道输入框改变了吧，那说明要干嘛呀。

你看输入框输入一改变，哎，我就要做一个什么事情，对吧，那你说我要干嘛呀，内部啊，他有这东西啊。Boom监听啊。这是它背后的一个工作啊，对于我们用，对于我们使用者来说，我们用管这些东西吗？就我们再去写页面效果，写一些东西，其实完全可以不用管，你就按照他要求去写指令，写大括号表的事。定义date效果是不是就出来了？这种其实有一个概念叫生命式开发。啊，OK，视频开什么意思呢，整个流程。我要处理吗？不需要，我只需要根据它的语法，是不是写一定特定语法的一些代码就可以，你看。

大家看啊，我先证明我一个数据里面是不是内等于多少，接着我接着是不是写了一个在模板里面写的这个。就说明什么，我需要date里面的什么。但是最后背后是不是总要有人去读吧，总要读出来，以后总要能设计进来吧？这些事情其实背后都有人做，对不对，因为整个流程。包括我去更新输入框的时候，我在输入框里输入数据的时候，你们觉得这个事情很神奇吗？我去加监听了吗？没有，我去读这个输入的数据了吗？也没有，我去更新那个data里面数据吗？都没有。对不，我就按照他要求写了一个什么。Model，一切效果都有了。这不就是生明的一个概念吗？我只需要声明一下，按，但是前提是必须按照别人的什么语法来去做吧，譬如说你，你不写V，我偏偏要要要写X，你觉得会有效果吗？

那肯定必要没有了，因为你写这个他根本不识别对不对啊，就按照别人的语法去做一些声明的定义啊，生命的描述，这个声明啊，不是声明一个变量，是按照别人的语法去写一些特定的代码。哎，我们需需要的一些展现，需要的一些交互就有了。啊，这种呢，我们叫生命式开发。那其实跟生命开发有另外一个概念啊，这个地方其实这两个概念大家要去知道啊，生命式还有一个叫命令式。啊，简单来说，命令什么呢？就是我啊，不仅要知道啊要写什么，还要知道怎么告诉他，说白了就是我们以前用最快的写法。

我们直接撬动，我们要去给他绑定监听是吧，我们要在监听里面去去去读当前的输入值吧。读完以后，我是要把那个值设置到那个P标签里面去等等。就整个流程。所有的事情，什么都需要你做。那这一个这种开发的模式叫什么呢？命令我的声明是什么概念啊，我不需要管流程。对吧，我只需要说你要干什么，你要显示对吧，那你就要去写对应的一些语法是什么语法，那它后面会有说明是吧。OK，一定要理解这两个概念啊。好，这是这个。这个图大家应该先啊，大概能懂，因为你现在用的毕竟少。啊，你说特别特别懂也很费劲啊，等我们练了，做了一些小练习以后，大家可能能够更好一些，有个过程啊。

好行，那下面呢，我们就去看它的语法，其实后面就是它的一些语法的一些东西，大家可以看一下，后面呢，就有一个。啊，这个后面再说看下这个。模板语法其实就是参照他这个文档去写的一个测试用例。啊，写的一个测试用例，好，这里面呢，也会需要去做一些，呃，简单的一些演示啊，做一个演示，我们一定一共有这么几个语法需要演示，我们来看一下。把页面先打开。大家现在什么都没有，只是说我们要是不是测试这三个方面的语法，是在模板里面有这么两个方面语法，一个大话表是，再一个是什么指令是吧？啊模板语法嘛，好，首先大家要知道模板的一个理解啊，就是动态的什么呢？HTM，也就是说它里面包含了一些什么JS语法代码有两个方面，一个是大括号表的是一个什么。

指定属性对吧，都以什么开头，V杠开头，以V杠开头的自定义标签属性好，那下面呢，我们来去用用它给一定的步骤。有些基本的搞法永远是固定的。引怒。对吧，GS view接着写1.gs啊，稍微写1.gs啊，有些是固定的嘛，六一个view这个总是不会变嘛，E等于个什么值。是吧，这也是固定的吧，下面来一个什么data塔，自己写成名称，那就看你到底要显示个什么数据了，对吧，根据实际情况来看。好。我们现在先来去给大家演示一下那个大括号表达式的一个语法啊，其实非常简单，比如说假设我有一个message。

可以吧，啊一个message，呃，我这里面呢，我们假设就叫叫，比如说啊，我写一个吧，哎，我要back，我会回来的，好来。那下面啊，下面我要显示它其实非常简单吧，搞个什么。其收益这个事情对吧，其实是命是的好处来看一下刷一下肯定是可以显示的，对吧，好现在。我想显示纯大写的。这有大小写是吧？有大写有小写，我想全部全部都是大写。怎么做？大家知道这个大号里面是写GS表达式，它不就是这是个变量吗？干嘛点Apple k什么？你一定想着现在写GS你就应该会写了。

非常简单的事啊。这个大家应该，如果你懂GS懂H，应该也大概能看懂，对吧，好懂啊。好，这是这个啊这个。其实呢，还有一个这个这个其实很少用啊，很少用，但是我稍微给大家用一下，但是呢，我就这个时候就不做这个了，我还一个A标签啊，我这地方比较特别，来个A标签啊，我这个地方呢，写一个啊hif等于比如说HTTP，嗯3W硅谷点com。可以吧，好，大家看啊，很有意思。很有意思，我这个地方呢，我来去写一个P标签，我写三个大卦，大一写我一写大家可能就能知道是一个什么样的概念。啊啊，少一个是吧。

别拖一个了，嗯，这边啊，这边这。啊，他没写上啊，它是会自动的看到右边有他就没写来刷新一下。好，现在他没有出来对吧，没出来肯定有问题呗，视频怎么办？没问，显示不出来呀。怎么办？你首先你得看有没有报错吧。有没有看到现在是不是有问题了，对吧，有问题了再说这个，这里面什么大括号在这里，来看一下这里啊。我这个部分。难道这个三三个大号已经已经这个版本已经没了吗？我看一下我先把它隐藏掉是吧。嗯，以前是有的啊，刷一下先。

哎，有显示，但现在呢，我要写三个大号了啊，估计他有可能会把这个下面把这个语法已经什么删掉了啊，前几个版本就前面班测试的时还有的就不用管，其实这个也用的用的不多啊。可以吧，好。啊，这一个的区别，我们到时候会通过通过另外一个另外一个概念得说了，啊，那我就不用去管这个语法了，其实如果用到另外一个，另外一个东西叫。啊，其实这里面是有一个这个。啊，这两个语法呢，它们的功能很类似。比如说这个这个语法现在就相当于谁了。下载这个。我们来看一下，但是下面这个啊，应该说粉啊这个啊拿上去拿上去一个是V-T的，一个是V-HTM。

大家知道有一个属性叫阴的HT吗？懂吗？这个应该是能知道的，把它刷一下。也就是说，如果我用VT，实际上是不是给我的标签体添加一个文本，那如果是V-HT呢，它会把那个文本理解成一个什么，尽量理解成一个标签。对不对，相当于实际上他们用到了两个属性。一个是text content。这是用哪，这是哪个对应，它们都是对应的，这个就是类似的。能看到吧，而这一个呢。所以说大家应该要能懂的事啊，其实比较简单。能看明白吧，啊OK，即使你是个标签结构，我会把理解成标签吗？不会，那我下面这个什么。

是不是就是解析成标签呢啊，解析成标签了啊，这个是比较好动的啊，没什么太大好说的，下面指令好，下面我要说两个特别的指令，两个特别的指令来看一下啊。啊，比如说我现在呢，有一个image标签。是吧，那个image标签是不是要有一个图片的链接呀？好，我来找一个图片链接，就是这个。这张图片吧，右键啊复制图片地址。啊，复制图片地址啊，我这个地方呢，看到。这张图片呢，还是动态的，我给他什么目的，它就显示什么图片，那我这里面呢，来个ul可以吧，就来个image ul。OK吧，OK是不是根据它的值来去显示好了，那我这边呢。啊，我这么写行不行啊，这个懒掉了啊。

大家看一下。是吧？OK，来这么准，我们来瞧一瞧。看一下你就懂了，这东西没什么好说的。肯定是没有加载的图片，而且我们审查一下，看一下这src是不是就是我刚才的这个就是这个文本呢，也就是说它并没有将它理解成表达式。而是把它理解成什么文本就说白了现在用的什么语法。H语法是吧，那要怎么做呢？啊，按我们那个就是在那个react语法。写法是后面是不是写个大号啊，但它不是啊，它不是你不要想它了啊，左边呢，还是这么写。好，这个地方需要去加一个特别的东西，叫微干棒的冒号。就强制绑定反应过来啊，说白了什么意思呢，就是把它本来不是HTM语法吧，把它变成一个GS的什么表达式，就这个就是个表达式了，那是表达式是不是要从date里面。

去读到对应的值。这能理解吗？来看一下。有了吧，有了没有太大问题，但是吧，看着这个红色的我就闹心啊，我应该我可以怎么做了，其实一般我不会这么写，可以把它省略，是简洁语法。啊，OK。各位，可以，那也就是说，我要想将属性值从一个一般的文本变成一个表达式，我只需要干啊。在属姓名的左侧加个冒号。这不比那个写大括号。还是要爽一点嘛，对吧，就叫个冒号，哎，我就右边的就是个表达式了，就他的思想其实非常好啊，就是尽量能简洁就简洁，尽量简洁，包括这里面写法啊，都是看起来比较舒服的，就是一个有点类似于节省的一个一个文件是吧，节省格式的一个对象啊，非常舒服看起来。

而且我们现在的页面就看起来只是说在页面里面是不是套了一些GS的一些东西是吧，啊咱漏洞嗯。好，这是叫强制绑定啊，这个应该是要懂的。好下面啊，另外一个强字在里面呢，还有一个指令啊，也是特别用的特别多。打响。绑定是监听，这个是用的非常多的吧，啊对啊，用了很多很多，譬如说啊举个例子，我们这里面有个button是吧，好叫太吧。开始一好，在这里面我要给它加一个监听。基本语法应该怎么写，小写的UN是吧，我们RA语法应该怎么写，On大写的对吧？好，看到我它是这么写的。

它里面有一个V杠二。冒号后面写什么世界谜？世界名。包含那个R吗？不包含四节篇，是不是后面这个部分啊，记住啊。等于。一个什么呢？回调函数。好，那现在够了吗？肯定不够，我是不是要去写它去写它去好啦。所有事件回调函数都写在另外一个配置里面，我写出来大家就懂。写个方法，这是不是一六的简介语法呀，那解题语法这个地方就要将我的这个设置稍微的什么，是不是改一下。改成这个吗？不是我们现在没有用GSX喇叭，用的是它对不对。

好应用啊，直接确认就行啊。好了呗。能看到吧，好，这里面我就一下。可以吧，来一下啊，就是没有，呵呵吧，没什么好说的了。好来我们来看一下，看看行不行是吧，一看就懂啊，刷一下先。来点他一点。可以可以，没问题。哎，老师你不看这个不爽吗？是吧，那肯定是看他不爽。啊说干掉，你觉得干掉行吗？不行，干掉的话，它是个什么语法啦，强制绑定的语法啦，我现在不仅是要强制绑定，还要说明这是保定监听。啊，这个地方不是用冒号，而是用另外一个符号。那也就是说啊，很简单，要绑定监听，就是艾佛加上什么事件名等于一个回调函数。

给大家看看啊，我的回答还说写括号了吗？哎呀，我写我要写嘛都不用。他就会去这里面去找。少写一个字符是一个字符对吧，OK，其实还有后面还要说一些别的事啊，包括。大家知道在里面我能直接去加括号调用吗？不能，你只能是以前怎么写的，还记得不，以前老写个呃，什么this点。我们是不是要去写一个函数啊，有调能调吗？不能，大家知道不能调用很有很有弊端。不能调用很有弊端，为什么呢？因为我有可能要传一些自己想传的什么参数，是不是？诶以前就以前可以用别的方法来解决，能实现同样的效果，但是毕竟要多写代码，他这里面就很轻松，你想传就传，不想传拉倒。

能懂我意思吧，如果你不想传，写一个名字啊，叫他搞定是吧？那如果你需要传怎么办？加括号传你想传的东西。啊，譬如说开始了。是吧，好，这个假设泰山啊，可以的，没有任何问题啊，在这里面啊，非常爽的一个东西啊，这个假设就叫就叫什么看吧，可以吧，勒的谁看呗，那你说应该勒的什么。ABC吗？能看到吧，啊，甚至于比如说啊，举例子，咔嚓一下，我写这个。那你说额头应该他。

我们看一下这个神奇的现象有没有啊？点。有没有以前我们在要去读状态很费劲的什么，This，点点什么？就我就在想你那个this，这不都一样吗？你为什么要写这些东西干嘛呢？是不是你像这样多舒服啊，不用写，他自己会找。啊，这已经写少写很多字符了，不是一个两个的问题了。啊OK，就他的宗旨就是尽量让程序员写的时候啊，尽量简单，而且也确实好懂，一看就能知道我去哪找数据。啊显示，但有个弊端，就你这个东西写多了吧，你就会发现你的GS的基本能力好像啊拉了很多很多，就是你基本上不需要了嘛，啊很多很多东西都不需要你亲自去操作了，你说老师我用不也一样吗？那不是react，还是有点复杂度，它那个语法挺复杂的，所以说你其实是写rap的吧，你的那个GS功率还是会多少会提高一些。

但写这个嘛，你就光写这个，那真是会一段时间就会把你的那个那个GS的功率给降低一些啊，因为他确实用的就是设计的太灵活了，OK。这个应该是都能懂的对吧，也就是说我们模板里面语法有两个，一个叫什么大括号表达式，一个叫什么指令，这里面的指令其实有很多指令，我这里面就介绍了两个特别的啊，V杠棒的，其实这个我们都不用，我们直接就是冒号对吧，强制绑定的语法，还有一个是什么呢？绑定时间间经济的语法叫什么V杠啊，但其实我也不用不写这个，写什么艾福，但是你得知道啊。好，那我这个也写完了，大家自己写一下。

赶紧写一下啊，那个你要不太会的就看参照一下那个word。