Portuguese Subtitles for Vue.js 2 Quickstart Tutorial 2017



Subtitles / Closed Captions - Portuguese

oi meu nome é <font color="#E5E5E5">Dustin de codificação da </font>

calma maneira inteligente e hoje neste <font color="#CCCCCC">vídeo </font> Eu gostaria de <font color="#CCCCCC">lhe</font><font color="#E5E5E5"> dar </font><font color="#CCCCCC">uma breve </font> introdução na <font color="#E5E5E5">extremidade da frente-JS2 vista </font> quadro e vista é muito novo quadro que ganha um monte de tração no momento e nesta introdução

Eu vou guiá-lo através dos primeiros passos você <font color="#CCCCCC">precisa saber para começar com um </font> quadro e iniciar um projeto vírus portanto, fique atento <font color="#CCCCCC">okay primeiro é sempre uma </font> boa idéia dar <font color="#E5E5E5">uma olhada no projeto </font> website ea vista <font color="#CCCCCC">jas site pode ser </font>

encontrada em UJS escuro e <font color="#CCCCCC">você pode vê-lo </font> aqui, então o que exatamente é vista braço vu como um progressiva você tem um quadro roteiro que se concentra na construção de interfaces de usuário por isso só funciona no <font color="#E5E5E5">modo de exibição camada de </font> sua aplicação e não faz

pressupostos de middleware e <font color="#CCCCCC">para trás e </font> tecnologias que você está usando para que de fato você pode trabalhar em conjunto com todo o <font color="#E5E5E5">para trás e tecnologias que são comuns </font> disponível <font color="#CCCCCC">para desenvolvimento web no </font> momento e pode ser facilmente integrado em

seus <font color="#E5E5E5">projetos existentes de curso e </font> que o <font color="#E5E5E5">torna muito fácil de integrar </font> vista em seus projetos existentes outro principal vantagem de uma visão Jas é que ele é <font color="#E5E5E5">muito alto desempenho, de modo que você pode </font><font color="#CCCCCC">lê-lo </font> aqui é apenas 17 kilobytes e tamanho e

isso significa que a biblioteca central e que faz você aplicativo super rápido assim a sobrecarga você está adicionando ao incluir vista <font color="#CCCCCC">cadeiras </font><font color="#E5E5E5">em seu projeto é muito </font> pequena e que garante <font color="#CCCCCC">que o seu </font> aplicação é performance <font color="#CCCCCC">bem se </font><font color="#E5E5E5">você </font>

<font color="#CCCCCC">deseja integrar vista draya de em seu </font> projeto existem <font color="#E5E5E5">diferentes formas de </font> fazendo então vamos clique aqui no guia para obter uma visão geral <font color="#E5E5E5">das diferentes opções e </font> <font color="#E5E5E5">você pode clicar sobre a instalação aqui na </font>

o menu do lado esquerdo e aqui você pode <font color="#CCCCCC">ver </font> <font color="#CCCCCC">existem diferentes opções </font><font color="#E5E5E5">assim para </font> <font color="#E5E5E5">exemplo, você pode incluí-lo diretamente pelo </font> usando uma tag de script em <font color="#CCCCCC">sua página HTML </font> isso é <font color="#E5E5E5">basicamente tudo o que </font><font color="#CCCCCC">é necessário </font><font color="#E5E5E5">para </font> <font color="#CCCCCC">ir </font><font color="#E5E5E5">com vista e você pode </font>

<font color="#E5E5E5">integrá-lo diretamente usando um script </font> marcar e usar o recurso de um conteúdo rede de distribuição, por exemplo, ele correr empacota um dos distribuição de conteúdo redes que torna espectador <font color="#CCCCCC">j / s Weibull </font> e essa é a <font color="#CCCCCC">opção mais fácil outro </font>

opção é <font color="#CCCCCC">usar o </font><font color="#E5E5E5">gerenciador de pacotes NPM </font> instalar <font color="#CCCCCC">vista por ou simplesmente digitando em </font> <font color="#E5E5E5">NPM instalar vista que é que o download </font> a biblioteca e <font color="#E5E5E5">adicioná-lo às notas </font> pasta módulos do seu projeto e não há é <font color="#CCCCCC">uma outra versão e que é </font><font color="#E5E5E5">o outro </font>

versão que será que será usando neste vídeo <font color="#CCCCCC">e isso é uma vista </font> <font color="#CCCCCC">Jas CLI é uma interface de linha de comando e </font> com uma interface de linha de comando que você está recebendo outro comandante que é a vista de comando e usando esse comando

você pode iniciar um novo projeto que é baseado em um modelo e já está incluindo a biblioteca vista para que você não <font color="#CCCCCC">precisa</font><font color="#E5E5E5"> baixá-lo em uma etapa separada </font> <font color="#E5E5E5">ok então vamos mudar para </font><font color="#CCCCCC">a linha de comando </font> e iniciar a instalação do comando view

interface de linha para que possamos <font color="#CCCCCC">usá-lo para </font> <font color="#E5E5E5">iniciar o nosso primeiro projeto e fazê-lo </font> <font color="#E5E5E5">precisamos dizer instalar npm e eu fazê-lo </font> como um usuário root menos G porque queremos <font color="#CCCCCC">para instalar o ponto de vista de uma linha de comando </font> interface como um comando global por isso precisamos

para dar essa opção g para o global e o <font color="#CCCCCC">nome do pacote é </font> vista traço na CL I assim executar esse comando ea instalação <font color="#E5E5E5">está tomando uma </font> segunda ok aqui estamos nós você pode ver a instalação foi concluída

com sucesso e agora <font color="#CCCCCC">a nova visão </font> comando está disponível, você pode vê-lo aqui tem diferentes opções e, a fim de gerar um novo projeto que <font color="#E5E5E5">estamos usando o </font> primeira opção aqui o na adoção e nós fazê-lo <font color="#E5E5E5">da seguinte forma vamos economizar </font>

você nele pacote de web porque <font color="#CCCCCC">queremos </font> obter o modelo de projeto que está usando o pacote de web de carregador de módulo e bundler e depois para <font color="#E5E5E5">o último parâmetro </font> dar o nome do projeto e nós simplesmente <font color="#E5E5E5">chamá-lo visualizar aplicativo 01 e agora é </font>

iniciar o projeto que você pode <font color="#E5E5E5">ver que é </font> o download do modelo e então é fazer algumas perguntas primeiro <font color="#CCCCCC">precisamos </font> dar um <font color="#E5E5E5">nome de projeto aqui e podemos </font> <font color="#E5E5E5">deixá-lo no padrão aqui visualizar aplicativo </font><font color="#CCCCCC">01 </font> uma descrição do projeto, embora se o

Padrão Aqui o autor e agora é perguntando como a visão construída deve ser feito <font color="#E5E5E5">estamos escolhendo um tempo de execução e compilar </font> essa é uma maneira recomendada dos anos Linda recurso para o <font color="#CCCCCC">momento que estou dizendo </font><font color="#E5E5E5">não e </font> aqui a respeito da configuração do teste foi karma

e assaltante embora não e extremidade-a-extremidade testes não foi assistir novamente não de modo que é tudo o que é necessário agora um novo projeto pasta foi criada vista aplicativo a <font color="#E5E5E5">um e </font> você <font color="#CCCCCC">pode vê-lo aqui o próximo passo é </font> mudar para essa pasta e, em seguida,

concluir a instalação instalando tudo o fim <font color="#CCCCCC">em pacotes necessários para o nosso </font><font color="#E5E5E5">projeto por </font> usando o <font color="#E5E5E5">NPM instalar comando ok então </font> vamos fazê-lo mudar para esse novo projeto diretório e, em seguida, executar <font color="#E5E5E5">instalar NPM </font>

nesse diretório e agora é buscar download de todos os pacotes definidos no o arquivo JSON pacote ponto que era <font color="#E5E5E5">adicionado ao </font><font color="#CCCCCC">projeto esse arquivo é </font> contendo todas as dependências e é download de todas <font color="#CCCCCC">as dependências e </font>

instalar os módulos nó no pasta de módulos nó <font color="#CCCCCC">do projeto </font><font color="#E5E5E5">e </font> isso de novo <font color="#E5E5E5">leva um segundo </font><font color="#CCCCCC">para completar </font> <font color="#E5E5E5">bem aqui </font><font color="#CCCCCC">estamos é concluída e agora </font> podemos fazer um primeiro teste e podemos começar no servidor web da web desenvolvimento

servidor para executar o projeto e <font color="#CCCCCC">que é </font> novamente feito usando <font color="#E5E5E5">o </font><font color="#CCCCCC">comando npm e </font> digamos npm prazo def aqui <font color="#E5E5E5">tudo bem você pode </font> ver o navegador é aberto automaticamente e é carregar no <font color="#CCCCCC">projeto aqui no </font> porta de host local 8080 e você pode ver o

<font color="#CCCCCC">APP que foi inicializado com uma vista </font> comando já está em execução e mostrando esta saída aqui <font color="#E5E5E5">no navegador e se </font><font color="#CCCCCC">eu </font> voltar para o terminal você pode <font color="#CCCCCC">ver </font> ele está dizendo tudo bem ele foi compilado com sucesso e agora o que o servidor é

escutando em localhost 8080 e é uma servidor de recarga ao vivo por isso, se estamos implementação de agora quaisquer alterações no <font color="#CCCCCC">site </font> <font color="#E5E5E5">está a carregar automaticamente sem qualquer </font> etapas manuais olhar porque não <font color="#E5E5E5">está bem, então vamos </font> manter nosso projeto correndo aqui <font color="#E5E5E5">e eu tenho </font>

<font color="#E5E5E5">abriu outra guia aqui no comando </font> linha e eu estou no mesmo projeto anuário aqui e agora vamos começar a minha editor de código e <font color="#E5E5E5">isso é Adam </font> para que possamos dar uma <font color="#E5E5E5">olhada na </font> estrutura do projeto inicial <font color="#CCCCCC">bem aqui é </font>

então vamos fechá-lo e ver o que está <font color="#E5E5E5">dentro </font> fora da nossa pasta do projeto e aqui você <font color="#E5E5E5">pode </font><font color="#CCCCCC">ver, temos vários arquivos incluídos </font> aqui você pode ver o arquivo package.json que é <font color="#CCCCCC">o fogo bem sem dependências </font> são listados <font color="#E5E5E5">e, antes de ter a certeza </font>

que as dependências foram baixado <font color="#E5E5E5">e instalado </font><font color="#CCCCCC">no nó </font> Módulos pasta, executando o <font color="#CCCCCC">npm em </font> comando estilo na pasta do projeto e em seguida, <font color="#E5E5E5">o próximo arquivo que </font><font color="#CCCCCC">é importante é </font> o arquivo index.html porque <font color="#E5E5E5">nesse arquivo </font>

<font color="#E5E5E5">encontrar o ponto de partida </font> aplicação e <font color="#E5E5E5">você pode ver que é uma planície </font> arquivo ha HTML simples e no corpo <font color="#CCCCCC">seção do que o HTML apresentar uma secção diff </font> está incluído e <font color="#E5E5E5">que um braço de deflexão </font> tem um atributo aqui o atributo ID

eo atributo de ID ID é atribuído um corda no nosso caso, <font color="#E5E5E5">essa é a seqüência de aplicativo </font> e <font color="#CCCCCC">z males armar o espaço reservado para que </font> a estrutura vista sabe onde inserir o conteúdo que <font color="#CCCCCC">é gerado pela </font> aplicação vista ok pescoço aberto do próximo let

a pasta de origem, porque o que é um colocar na nossa estrutura de projeto onde o <font color="#CCCCCC">aplicação ver jes é implementado e </font> vamos abrir dentro dessa pasta o arquivo principais <font color="#CCCCCC">jas ponto e isso é o lugar onde </font> a <font color="#CCCCCC">aplicação de visualização é inicializado </font>

<font color="#E5E5E5">e você pode ver aqui estamos importando </font> duas coisas aqui primeiro precisamos <font color="#E5E5E5">importar </font> uma visão da vista e <font color="#CCCCCC">que </font><font color="#E5E5E5">este é </font><font color="#CCCCCC">o </font> classe de aplicativo principal e você pode ver -lo aqui ele é usado <font color="#E5E5E5">para criar um novo </font> instancia de

quadro e junto com um que vista está importando uma segunda coisa e que é aplicativo a partir do <font color="#CCCCCC">arquivo do aplicativo e que é um </font> componente estamos implantando aqui em nosso projeto que está disponível <font color="#E5E5E5">aqui </font><font color="#CCCCCC">em </font> <font color="#E5E5E5">Vista Epcot vamos dar uma olhada em um lado </font>

<font color="#CCCCCC">de que a implementação de um segundo, mas </font> primeiro vamos concentrar na parte aqui e a instância novo quadro vista é criado chamando-lhes <font color="#CCCCCC">o construtor </font> usando a nova palavra-chave eo construtor recebe um parâmetro e

<font color="#E5E5E5">que é o objeto aqui com este </font> Propriedades de reconfiguração e o primeiro <font color="#E5E5E5">propriedade aqui você pode ver que é chamado de </font><font color="#CCCCCC">al </font> <font color="#E5E5E5">para o elemento e que </font><font color="#CCCCCC">é atribuído a </font> corda aqui e que é principalmente dizendo ou uma definição que a saída <font color="#CCCCCC">da vista </font>

<font color="#CCCCCC">aplicação deve ser inserido dentro do </font> elemento que <font color="#CCCCCC">é o ID do aplicativo e vimos </font> -lo antes no arquivo index.html nós atribuído o aplicativo corda à <font color="#CCCCCC">propriedade rd z </font> e agora estamos nos conectando a nossa visão aplicação com esse elemento div para que o

saída que <font color="#CCCCCC">é gerado o código HTML </font> de saída, que é <font color="#E5E5E5">gerado </font><font color="#CCCCCC">pela nossa vista </font> aplicação está substituindo que div elemento dentro do nosso arquivo de índice HTML de modo aqui está o modelo da nossa aplicação e que o modelo <font color="#CCCCCC">E é muito simples </font>

porque ele só está <font color="#E5E5E5">contendo um elemento </font> e <font color="#CCCCCC">que é o elemento Z AB, que é </font> referindo-se <font color="#E5E5E5">ao componente aplicativo e por </font> usando esse elemento aqui em nosso modelo estamos definindo que na saída HTML que <font color="#CCCCCC">é gerada pelo componente de aplicação </font>

deve ser colocada aqui <font color="#E5E5E5">dentro de nossa visão </font> template por isso é parte da saída que a aplicação vista gera e para ser capaz de usar no <font color="#E5E5E5">elemento aplicativo </font> aqui e incluindo a saída do <font color="#CCCCCC">aplicativo </font> componente

não <font color="#CCCCCC">só precisa importar até aqui nós </font> Também <font color="#E5E5E5">precisa declarar-se aqui dentro do </font> objeto que está atribuindo à componentes propriedade na vista objeto de configuração para que a exibição aplicação sabe que nós <font color="#E5E5E5">queremos fazer </font>

uso de componente aplicativo dentro do nosso modelo <font color="#CCCCCC">ok então vamos passar para a </font> <font color="#CCCCCC">implementação da componente de aplicativo e </font> a implementação está disponível no aplicativo vista sapo por isso aqui você <font color="#CCCCCC">pode ver os nossos conjuntos </font> da <font color="#CCCCCC">extremidade implementação completa como em </font>

cada exibição <font color="#E5E5E5">J como componente único arquivo </font> implementações como arquivo é dividido em três seções na parte superior você pode <font color="#CCCCCC">ver aqui </font> é <font color="#E5E5E5">a seção do modelo do aplicativo </font> componente então temos uma seção de script até aqui <font color="#E5E5E5">e, finalmente, temos aqui a </font>

<font color="#CCCCCC">seção de estilo contendo em CSS styling </font> código <font color="#CCCCCC">para o modelo de componente e </font> você pode ver que o <font color="#E5E5E5">torna muito fácil de </font> manter a visão geral porque tudo pertencentes a um componente é aqui dentro desse um arquivo e então vamos primeiro

dê uma <font color="#E5E5E5">olhada na seção de script que você </font> Pode ver aqui a seção de script é tornando um especialista em padrão de um e objeto a configuração do componente de vista e que é objecto de configuração contendo <font color="#E5E5E5">dois Propriedades </font><font color="#CCCCCC">Nome atribuindo </font>

um nome para o componente no nosso caso <font color="#CCCCCC">é </font> aplicativo e novamente uma propriedade componentes tendo um objecto que contém todo o componentes subsequentes que são utilizados aqui no componente aplicativo e temos um componente incluído <font color="#CCCCCC">aqui que é a </font>

Olá componente é listado aqui porque se dermos uma <font color="#CCCCCC">olhada</font><font color="#E5E5E5"> no modelo que </font> pode ver o componente Olá está incluído <font color="#E5E5E5">no modelo utilizando o LM Olá </font> e aqui e agora você pode ver <font color="#CCCCCC">o </font> modelo não é tão longo com apenas um

<font color="#E5E5E5">seção diff aqui e na seção diff </font> consiste em dois <font color="#CCCCCC">elementos de </font><font color="#E5E5E5">uma imagem </font> elemento este elemento de imagem é inclusive o arquivo de logotipo PNG e de saída e <font color="#E5E5E5">ele está incluindo a saída que é </font> gerado <font color="#E5E5E5">pelo sub componente e Olá </font>

<font color="#CCCCCC">se agora comparar esse modelo para o </font> saída que era um <font color="#CCCCCC">weibull aqui no </font> navegador, você pode ver <font color="#CCCCCC">seu </font><font color="#E5E5E5">rótulo aqui </font> que é o <font color="#E5E5E5">arquivo de logotipo e todos os outros </font> saída que <font color="#CCCCCC">é gerado aqui o </font> <font color="#CCCCCC">Mensagem de boas vindas as asas essenciais os </font>

ligações dos ecossistemas e assim por diante é que vem <font color="#E5E5E5">o conteúdo ou a saída do qual </font><font color="#CCCCCC">está </font> produzido pelo <font color="#E5E5E5">componente Olá e Z é </font> <font color="#CCCCCC">aqui incluídos no modelo então vamos </font> dê uma <font color="#E5E5E5">olhada na última parte do </font> estrutura do projeto inicial e essa é a

implementação da componente Olá a implementação <font color="#CCCCCC">como um weibull aqui em </font> os componentes de subpastas e arquivos Olá Ver ponto e / ou abrir esse arquivo e aqui você pode <font color="#CCCCCC">ver, novamente, temos o modelo </font> seção disponível, então temos a tripulação

<font color="#E5E5E5">Seção </font><font color="#CCCCCC">/ script </font><font color="#E5E5E5">e, finalmente, usar </font><font color="#CCCCCC">o </font> seção de estilo e como você pode ver se nós começar por dar uma olhada no script seção novamente uma exportação padrão é feita definindo uma configuração componente objeto o nome, neste caso, é Olá

porque estamos definindo o inferno componente e, em seguida, <font color="#CCCCCC">há algo </font> <font color="#E5E5E5">novo é uma função de dados retornando um </font> objeto com uma propriedade incluída e isso é um Z msg <font color="#E5E5E5">significa mensagem </font> propriedade e msg é atribuído a

seqüência de boas-vindas e você pode ver que é bem-vindo <font color="#E5E5E5">ao seu ponto de vista </font> rails app que é exatamente <font color="#CCCCCC">a string </font> que é emitido aqui <font color="#CCCCCC">como o headline </font> sob o arquivo de logotipo e agora se você tomar <font color="#E5E5E5">uma olhada no código do modelo que </font><font color="#CCCCCC">é </font>

definido aqui você pode ver na propriedade msg como aqui utilizado, o modelo na elemento h1, utilizando a interpolação sintaxe que requer usar aberto e fechando chaves duplas e através da utilização sintaxe zetas somos capazes <font color="#E5E5E5">de incluir </font>

propriedades do <font color="#E5E5E5">objecto que está </font> devolvido a partir da função de dados do componente em nosso modelo e esse é o <font color="#CCCCCC">razão pela qual o texto </font><font color="#E5E5E5">da</font><font color="#CCCCCC"> msg </font> propriedade é impresso aqui eo do resto do modelo que você pode ver que é

cerca de imprimir esses links aqui nós ter seção elo essencial incluído em um elemento h2 <font color="#E5E5E5">e, em seguida, como uma lista de todos </font> as ligações <font color="#E5E5E5">são impressos e temos </font> o ecossistema aqui é que parte com fallings apontando para visualizar <font color="#CCCCCC">yucks router </font>

vista loader e vista incrível assim por diante o <font color="#CCCCCC">próximo passo </font><font color="#E5E5E5">que eu gostaria </font><font color="#CCCCCC">de fazer algumas </font><font color="#E5E5E5">mudanças </font> para a implementação inicial e apenas para <font color="#CCCCCC">lhe dar uma impressão </font><font color="#E5E5E5">de como é fácil </font> é <font color="#CCCCCC">usar a estrutura vista e para dar </font> <font color="#E5E5E5">-lhe uma pequena introdução a alguns dos </font>

<font color="#CCCCCC">directivas Vista padrão jrs e </font><font color="#E5E5E5">eu começo </font> com <font color="#CCCCCC">as mudanças suprimindo alguns </font> do conteúdo aqui no modelo de o componente Olá e <font color="#E5E5E5">eu </font><font color="#CCCCCC">vou </font> remover tudo o que está <font color="#E5E5E5">relacionado com </font> as duas <font color="#CCCCCC">seções link aqui então vamos </font>

eliminar este de modo que <font color="#E5E5E5">só está imprimindo </font> a <font color="#CCCCCC">mensagem de boas-vindas e você pode ver </font> Estou salvando o arquivo e imediatamente <font color="#E5E5E5">ele é recarregado na </font> navegador sem precisar que eu <font color="#E5E5E5">faça </font> nada manualmente aqui e agora podemos ir

com a implementação, por exemplo, <font color="#E5E5E5">uma lista </font> imprimir e <font color="#E5E5E5">estou definindo outra dados </font> propriedade aqui <font color="#E5E5E5">no objeto </font><font color="#CCCCCC">que é </font> retornado por <font color="#CCCCCC">os </font><font color="#E5E5E5">dados medidos e eu sou </font> nomear essa matriz <font color="#E5E5E5">i gostaria de ter </font> utilizadores e, em seguida, define-o como uma matriz e

dentro dessa matriz, digamos que temos objectos incluídos <font color="#E5E5E5">nessa matriz que </font> consiste em duas propriedades vamos usar um primeira propriedade nome e atribuir primeiro cadeia de nome e um sobrenome <font color="#CCCCCC">bem que é </font> ele então vamos talvez adicionar mais dois elementos

aqui <font color="#E5E5E5">tudo bem atribuir um nome diferente </font> e último nome para <font color="#E5E5E5">o segundo objeto de usuário </font> e para o objeto de usuário cert vamos usar John como um primeiro nome <font color="#E5E5E5">e talvez Porter como </font> um sobrenome então agora <font color="#E5E5E5">temos três usuários </font> definido aqui na matriz usuários e agora

somos capazes <font color="#CCCCCC">de usar ou fazer uso de </font> essa <font color="#E5E5E5">matriz usuários com o conteúdo </font> incluído no nosso modelo e eu gostaria <font color="#CCCCCC">de </font> imprimir esses usuários como uma lista assim sob o elemento h1 vamos incluir outro seção diff aqui e esta deve ser uma

lista não ordenada e eu dizendo item da lista e agora eu estou usando <font color="#E5E5E5">uma visão </font><font color="#CCCCCC">Jas </font> directiva padrão que é chamado <font color="#E5E5E5">V </font> menos <font color="#E5E5E5">4 e eu estou dizendo que é igual a alguns </font> o usuário primavera em usuários e aplicando <font color="#E5E5E5">que a sintaxe aqui o ponto de vista </font><font color="#CCCCCC">quadro Jas </font>

é <font color="#E5E5E5">a iteração sobre essa matriz e </font> incluindo elemento item de uma lista <font color="#CCCCCC">por </font> objecto <font color="#E5E5E5">definido na nossa disposição no </font> <font color="#E5E5E5">gerado saída e agora podemos usar o </font> sintaxe de interpolação mais uma vez para <font color="#CCCCCC">impressão </font> os valores para a primeira impressão que o usuário

primeiro <font color="#E5E5E5">nome e, em seguida, imprimir o usuário </font> sobrenome <font color="#CCCCCC">tudo bem, vamos salvá-lo e você pode </font> ver na saída <font color="#CCCCCC">é gerada e </font><font color="#E5E5E5">eu e </font> ficando para trás os nomes dos usuários <font color="#CCCCCC">bem </font> tão próxima coisa que eu gostaria <font color="#CCCCCC">de incluir uma </font> elemento de entrada e utilizar os dados de duas vias

ligação para sincronizar o valor da entrada elemento que uma propriedade que <font color="#CCCCCC">é </font> definido em nosso modelo de dados <font color="#E5E5E5">bem DEIXE </font> primeiro definir uma nova propriedade aqui <font color="#CCCCCC">no </font> objeto de retorno da função de dados e vamos citar que a entrada de propriedade bem e

apenas atribuir uma string vazia aqui <font color="#E5E5E5">tudo bem </font> e dentro de nosso modelo aqui sob o seção diff da lista de usuários <font color="#E5E5E5">que eu sou </font> definir uma outra secção de comparação e dentro essa seção diff eu sou incluindo um elemento de entrada e vamos usar

o <font color="#E5E5E5">texto tempo e nós não precisamos de nome e </font> Valorizamos aqui em vez eu estou usando outra <font color="#E5E5E5">j vista como directiva padrão que é </font> chamado <font color="#CCCCCC">V Model View modelo de traço e </font><font color="#E5E5E5">eu sou </font> atribuindo a <font color="#CCCCCC">barra de entrada para a cadeia que </font> corresponde <font color="#CCCCCC">ao nome de nossa propriedade </font>

nós definimos aqui e <font color="#E5E5E5">vamos saída no </font> que a propriedade aqui sob a entrada elemento e vamos dizer ou vamos dizer nossa desovar e eu estou usando o <font color="#E5E5E5">texto v traço </font> directiva e novamente <font color="#CCCCCC">eu estou atribuindo entrada </font> Val <font color="#CCCCCC">tudo bem, então vamos ver aqui é a nossa entrada </font>

elemento e agora posso começar <font color="#E5E5E5">a digitar </font> algo para o <font color="#E5E5E5">desenvolvimento e você </font> pode ver aqui que está a saída do nosso elemento de extensão que <font color="#CCCCCC">está ligada à entrada de </font> elemento bem usando o <font color="#CCCCCC">texto v menos </font> directiva A <font color="#E5E5E5">saída do z a entrada aqui </font>

se reflecte directamente aqui como uma saída na <font color="#CCCCCC">mesma página </font><font color="#E5E5E5">bem a última coisa que eu </font> gostaria <font color="#E5E5E5">de </font><font color="#CCCCCC">demonstrar é como você pode usar </font> em eventos com ensaios vista de drogas e vai incluir outra seção diff aqui, para o caso de uso <font color="#E5E5E5">que eu gostaria de </font>

implementar <font color="#CCCCCC">é muito fácil, basta deixar-nos </font> <font color="#E5E5E5">implementar um botão que </font> vai incrementar um contador por um cada vez que o usuário <font color="#E5E5E5">clica no botão </font> então vamos primeiro definir os dados do contador propriedade aqui em nossos dados objeto <font color="#E5E5E5">Estou </font>

vai chamar um contador e configurá-lo inicialmente para 20 e dentro dessa nova detecção Estou implementando um botão <font color="#CCCCCC">e </font> este botão deve incluir e bela manipulador de eventos e eu estou usando o <font color="#E5E5E5">v traço directiva relativa seguido </font><font color="#CCCCCC">pelo </font>

caso <font color="#CCCCCC">eu gostaria </font><font color="#E5E5E5">de responder e </font> que é um evento de clique e cada vez <font color="#CCCCCC">que o </font> usuário clica <font color="#E5E5E5">no botão do balcão </font> propriedade deve ser incrementado para que eu sou usando <font color="#E5E5E5">plus plus aqui e o conteúdo do </font> o botão certo para refletir o <font color="#CCCCCC">valor de </font>

o contador assim que <font color="#CCCCCC">eu estou incluindo um pouco </font> bit de informação de texto aqui você tem clicado neste botão e agora eu <font color="#E5E5E5">vou </font> <font color="#CCCCCC">usar sintaxe de interpolação novamente para </font> incluem o valor do contador <font color="#E5E5E5">x </font><font color="#CCCCCC">ok </font> vamos guardá-lo e ver como <font color="#CCCCCC">a saída </font>

parece agora aqui é um botão <font color="#E5E5E5">e eu </font> pode <font color="#E5E5E5">clicar no botão e cada vez que eu </font> clique você <font color="#CCCCCC">pode ver é o valor do contador </font> que é impresso no botão aqui é incrementado por um esta era a mesma <font color="#E5E5E5">de codificação de maneira inteligente </font><font color="#CCCCCC">calma, se você fizer </font>

como os meus vídeos, por favor não <font color="#CCCCCC">se esqueça de </font> assinar <font color="#E5E5E5">o meu canal de vê-lo no </font> próxima bye vídeo você



Video Description

#1 Online Course: Vue JS 2 - The Complete Guide (http://codingthesmartway.com/courses/vuejs2-complete-guide/)

Vue.js 2 Quickstart Tutorial 2017

Vue is a progressive JavaScript framework that focuses on building user interfaces. As it only works in the “view layer” it makes no assumption of middleware and backend and therefore can be integrated easily into other projects and libraries. Vue.js offers a lot of functionality for the view layer and can be used for building powerful single-page webapps. In this video tutorial you'll learn how to get started with Vue.js!

This is a CodingTheSmartWay.com tutorial

---------------------
Check out our ebooks on Leanpub.com:

* Angular 2 - A Practical Introduction to the new Web Development Platform
https://leanpub.com/angular2-book

* Ionic 2 - A Practical Introduction To Hybrid Mobile Apps Development
https://leanpub.com/ionic2-book
---------------------

Musik:
Night Owl by Broke For Free is licensed under a Creative Commons Attribution License.
(http://freemusicarchive.org/music/Broke_For_Free/Directionless_EP/Broke_For_Free_-_Directionless_EP_-_01_Night_Owl)