Vue.js - Day3

Vue definido componentes

Quais são os componentes: a emergência dos componentes, a quantidade de código é dividir exemplo Vue, permitem-nos diferentes componentes, divididos em diferentes módulos funcionais para o futuro que tipo de funções que precisamos, você pode ir chamar os componentes correspondentes ou seja, pode,
montagem e modularização diferente:

Modular: o código é dividida a partir do ponto de vista lógico; código de camada única para facilitar o desenvolvimento e assegurar as funções de cada módulo funcional;
Componentes de: ângulo é dividido a partir da interface UI; componentes front-end para componentes de fácil reutilização de interface do usuário;

componentes globais definidas de três maneiras

Use Vue.extend com o método Vue.component:

var login = Vue.extend({
      template: '<h1>登录</h1>'
    });
    Vue.component('login', login);

método diretamente Vue.component:

Vue.component('register', {
      template: '<h1>注册</h1>'
    });

A seqüência de modelo, para definir os tipos de tag script:

<script id="tmpl" type="x-template">
      <div><a href="#">登录</a> | <a href="#">注册</a></div>
    </script>

Ao mesmo tempo, precisamos definir componentes Vue.component:

Vue.component('account', {
      template: '#tmpl'
    });

Nota: estrutura DOM montagem, e há apenas um elemento raiz único (elemento raiz) para embrulhar!

Componentes e exibir dados em resposta a eventos

Na montagem, dataque precisa de ser definido como um método, por exemplo:

Vue.component('account', {
      template: '#tmpl',
      data() {
        return {
          msg: '大家好！'
        }
      },
      methods:{
        login(){
          alert('点击了登录按钮');
        }
      }
    });

Na sub-montagem, se a cadeia modelo, para definir a tag script e, em seguida, acessar o corpo do sub-conjuntos datavalor da propriedade, você precisa usar thisa acessar;

[Chave] componentes de atributos de dados Por que deve ser definido como um método e devolve um objecto

apresentação de casos pelo contador

Uso `components`atributo define um subconjunto parcial

Exemplos do componente é definido por:

<script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      components: { // 定义子组件
        account: { // account 组件
          template: '<div><h1>这是Account组件{{name}}</h1><login></login></div>', // 在这里使用定义的子组件
          components: { // 定义子组件的子组件
            login: { // login 组件
              template: "<h3>这是登录组件</h3>"
            }
          }
        }
      }
    });
  </script>

componentes de referência:

<div id="app">
    <account></account>
  </div>

Utilizar `flag`o identificador em combinação `v-if`e `v-else`componente de comutação

estrutura da página:

<div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <my-com1 v-if="flag"></my-com1>
    <my-com2 v-else="flag"></my-com2>
  </div>

definição de instância Vue:

<script>
    Vue.component('myCom1', {
      template: '<h3>奔波霸</h3>'
    })

    Vue.component('myCom2', {
      template: '<h3>霸波奔</h3>'
    })

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: true
      },
      methods: {}
    });
  </script>

Use `:is`propriedade para alternar entre diferentes sub-componentes, e adicionando comutação de animação

Exemplos do componente é definido por:

  // 登录组件
    const login = Vue.extend({
      template: `<div>
        <h3>登录组件</h3>
      </div>`
    });
    Vue.component('login', login);

    // 注册组件
    const register = Vue.extend({
      template: `<div>
        <h3>注册组件</h3>
      </div>`
    });
    Vue.component('register', register);

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: { comName: 'login' },
      methods: {}
    });

Use componentetiquetas para se referir a um componente de :isespecificar o componente a ser propriedades carregados:

  <div id="app">
    <a href="#" @click.prevent="comName='login'">登录</a>
    <a href="#" @click.prevent="comName='register'">注册</a>
    <hr>
    <transition mode="out-in">
      <component :is="comName"></component>
    </transition>
  </div>

Somando-se a estilos de comutação:

  <style>
    .v-enter,
    .v-leave-to {
      opacity: 0;
      transform: translateX(30px);
    }

    .v-enter-active,
    .v-leave-active {
      position: absolute;
      transition: all 0.3s ease;
    }

    h3{
      margin: 0;
    }
  </style>

componente pai submontagem para passar valores

método definido instância do componente, NOTA: Certifique-se de usar a propspropriedade para definir a transferência de dados do componente pai

<script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '这是父组件中的消息'
      },
      components: {
        son: {
          template: '<h1>这是子组件 --- {{finfo}}</h1>',
          props: ['finfo']
        }
      }
    });
  </script>

Uso v-bindou instrução simplificado, passa os dados para o sub-conjunto de:

<div id="app">
    <son :finfo="msg"></son>
  </div>

Valor transmitido para os componentes de sub-montagem pai

Princípio: O componente principal do método de referência, o método passado para os subconjuntos internos, subconjuntos, chamar o componente progenitor dentro passar, enquanto os dados a serem enviados para o componente de matriz, como um parâmetro passado ao chamar o método;
referências componente pai passado para o método de sub-montagem, que getMsgé o componente principal do methodsnome do método definido no funcmétodo método submontagem ao passar sobre o nome de chamada

<son @func="getMsg"></son>

Subconjunto interior por this.$emit('方法名', 要传递的数据)forma a chamar componentes métodos parentais, enquanto que os componentes utilizados para transmitir dados para o pai

<div id="app">
    <!-- 引用父组件 -->
    <son @func="getMsg"></son>

    <!-- 组件模板定义 -->
    <script type="x-template" id="son">
      <div>
        <input type="button" value="向父组件传值" @click="sendMsg" />
      </div>
    </script>
  </div>

  <script>
    // 子组件的定义方式
    Vue.component('son', {
      template: '#son', // 组件模板Id
      methods: {
        sendMsg() { // 按钮的点击事件
          this.$emit('func', 'OK'); // 调用父组件传递过来的方法，同时把数据传递出去
        }
      }
    });

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        getMsg(val){ // 子组件中，通过 this.$emit() 实际调用的方法，在此进行定义
          alert(val);
        }
      }
    });
  </script>

Lista de comentários Caso

Objetivos: O principal valor-passagem entre os componentes do exercício pai e filho

Use `this.$refs`para obter os elementos e componentes

  <div id="app">
    <div>
      <input type="button" value="获取元素内容" @click="getElement" />
      <!-- 使用 ref 获取元素 -->
      <h1 ref="myh1">这是一个大大的H1</h1>

      <hr>
      <!-- 使用 ref 获取子组件 -->
      <my-com ref="mycom"></my-com>
    </div>
  </div>

  <script>
    Vue.component('my-com', {
      template: '<h5>这是一个子组件</h5>',
      data() {
        return {
          name: '子组件'
        }
      }
    });

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        getElement() {
          // 通过 this.$refs 来获取元素
          console.log(this.$refs.myh1.innerText);
          // 通过 this.$refs 来获取组件
          console.log(this.$refs.mycom.name);
        }
      }
    });
  </script>

O que é roteamento

Para o website média, todos os hiperlinks são endereços de URL, endereços de URL que correspondem a todos os recursos correspondentes para o servidor;
Para aplicações de uma única página, realizado principalmente por alternar entre diferentes páginas no hash URL (número #), enquanto, um hash apresenta: HTTP pedido não contém hash de conteúdo relevante e, portanto, uma única página da aplicação o principal salto página implementado de hash;
Nas aplicações de página única desta maneira para comutar a página alterando o hash, chamado a extremidade dianteira do (diferente via a partir da extremidade traseira) rota;

Use vue-router na vue

Apresentando biblioteca de classes componente vue-router:

<!-- 1. 导入 vue-router 组件类库 -->
  <script src="./lib/vue-router-2.7.0.js"></script>

Utilizando a ligação-router montagem para navegar

<!-- 2. 使用 router-link 组件来导航 -->
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>

Usando o router-view exibição do componente corresponde a componente

<!-- 3. 使用 router-view 组件来显示匹配到的组件 -->
<router-view></router-view>

Criado usando o Vue.extendCriar o componente

    // 4.1 使用 Vue.extend 来创建登录组件
    var login = Vue.extend({
      template: '<h1>登录组件</h1>'
    });

    // 4.2 使用 Vue.extend 来创建注册组件
    var register = Vue.extend({
      template: '<h1>注册组件</h1>'
    });

Criar uma instância de roteador de roteamento, para definir regras de roteamento corresponder pela propriedade routers

// 5. 创建一个路由 router 实例，通过 routers 属性来定义路由匹配规则
    var router = new VueRouter({
      routes: [
        { path: '/login', component: login },
        { path: '/register', component: register }
      ]
    });

Use router atributo para usar as regras de roteamento

// 6. 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      router: router // 使用 router 属性来使用路由规则
    });

Definir um Highlight Route

Rota eficiência de comutação dinâmica fornecida

Parâmetros definidos nas regras de roteamento

Parâmetros definidos na regra:

{ path: '/register/:id', component: register }

Ao this.$route.paramsadquirir os parâmetros da rota:

var register = Vue.extend({
      template: '<h1>注册组件 --- {{this.$route.params.id}}</h1>'
    });

Use `children`propriedade Nested implementar roteamento

  <div id="app">
    <router-link to="/account">Account</router-link>

    <router-view></router-view>
  </div>

  <script>
    // 父路由中的组件
    const account = Vue.extend({
      template: `<div>
        这是account组件
        <router-link to="/account/login">login</router-link> | 
        <router-link to="/account/register">register</router-link>
        <router-view></router-view>
      </div>`
    });

    // 子路由中的 login 组件
    const login = Vue.extend({
      template: '<div>登录组件</div>'
    });

    // 子路由中的 register 组件
    const register = Vue.extend({
      template: '<div>注册组件</div>'
    });

    // 路由实例
    var router = new VueRouter({
      routes: [
        { path: '/', redirect: '/account/login' }, // 使用 redirect 实现路由重定向
        {
          path: '/account',
          component: account,
          children: [ // 通过 children 数组属性，来实现路由的嵌套
            { path: 'login', component: login }, // 注意，子路由的开头位置，不要加 / 路径符
            { path: 'register', component: register }
          ]
        }
      ]
    });

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      components: {
        account
      },
      router: router
    });
  </script>

Nomeado alcançar vista clássica de layout

Etiquetas estrutura de código:

<div id="app">
    <router-view></router-view>
    <div class="content">
      <router-view name="a"></router-view>
      <router-view name="b"></router-view>
    </div>
  </div>

código JS:

<script>
    var header = Vue.component('header', {
      template: '<div class="header">header</div>'
    });

    var sidebar = Vue.component('sidebar', {
      template: '<div class="sidebar">sidebar</div>'
    });

    var mainbox = Vue.component('mainbox', {
      template: '<div class="mainbox">mainbox</div>'
    });

    // 创建路由对象
    var router = new VueRouter({
      routes: [
        {
          path: '/', components: {
            default: header,
            a: sidebar,
            b: mainbox
          }
        }
      ]
    });

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router
    });
  </script>

estilo CSS:

  <style>
    .header {
      border: 1px solid red;
    }

    .content{
      display: flex;
    }
    .sidebar {
      flex: 2;
      border: 1px solid green;
      height: 500px;
    }
    .mainbox{
      flex: 8;
      border: 1px solid blue;
      height: 500px;
    }
  </style>

`watch`Uso da propriedade

Considere um problema: você quer alcançar 名e 姓os conteúdos de dois mudança caixas de texto, o valor do nome completo da mudança caixa de texto também; (com conhecimento prévio de como conseguir ???)

Monitorar dataalterações de atributo:

<div id="app">
    <input type="text" v-model="firstName"> +
    <input type="text" v-model="lastName"> =
    <span>{{fullName}}</span>
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        firstName: 'jack',
        lastName: 'chen',
        fullName: 'jack - chen'
      },
      methods: {},
      watch: {
        'firstName': function (newVal, oldVal) { // 第一个参数是新数据，第二个参数是旧数据
          this.fullName = newVal + ' - ' + this.lastName;
        },
        'lastName': function (newVal, oldVal) {
          this.fullName = this.firstName + ' - ' + newVal;
        }
      }
    });
  </script>

Monitorar roteamento alterações de objeto:

<div id="app">
    <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>

    <router-view></router-view>
  </div>

  <script>
    var login = Vue.extend({
      template: '<h1>登录组件</h1>'
    });

    var register = Vue.extend({
      template: '<h1>注册组件</h1>'
    });

    var router = new VueRouter({
      routes: [
        { path: "/login", component: login },
        { path: "/register", component: register }
      ]
    });

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router: router,
      watch: {
        '$route': function (newVal, oldVal) {
          if (newVal.path === '/login') {
            console.log('这是登录组件');
          }
        }
      }
    });
  </script>

`computed`Usando a propriedade calculada

Apenas o padrão gettercalculado da propriedade:

<div id="app">
    <input type="text" v-model="firstName"> +
    <input type="text" v-model="lastName"> =
    <span>{{fullName}}</span>
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        firstName: 'jack',
        lastName: 'chen'
      },
      methods: {},
      computed: { // 计算属性； 特点：当计算属性中所以来的任何一个 data 属性改变之后，都会重新触发 本计算属性 的重新计算，从而更新 fullName 的值
        fullName() {
          return this.firstName + ' - ' + this.lastName;
        }
      }
    });
  </script>

Ele tem a definição gettere settercálculo de propriedades:

<div id="app">
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
    <!-- 点击按钮重新为 计算属性 fullName 赋值 -->
    <input type="button" value="修改fullName" @click="changeName">

    <span>{{fullName}}</span>
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        firstName: 'jack',
        lastName: 'chen'
      },
      methods: {
        changeName() {
          this.fullName = 'TOM - chen2';
        }
      },
      computed: {
        fullName: {
          get: function () {
            return this.firstName + ' - ' + this.lastName;
          },
          set: function (newVal) {
            var parts = newVal.split(' - ');
            this.firstName = parts[0];
            this.lastName = parts[1];
          }
        }
      }
    });
  </script>

`watch`, `computed`E o `methods`contraste entre

computedOs resultados são atributos em cache, a alteração de atributo sensível a menos dependente recalculado somente. A principal propriedade para uso como;
methodsO método representa uma operação particular, lógica escrita do negócio principal;
watchUma chave de objecto é uma expressão da necessidade de se observar a função de retorno valor correspondente. É utilizado principalmente para monitorar as alterações específicas nos dados, realizando, assim, determinada operação lógica comercial, pode ser considerado computede methodsuma combinação destes;

`nrm`a instalação

Papel: para fornecer algum do endereço espelho pacote NPM mais comumente usado, nos permite mudar rapidamente para instalar o endereço do servidor do tempo pacote;
qual é a imagem no espelho: o pacote original muito começando só está presente no servidor NPM estrangeiro, mas devido a razões de rede, muitas vezes não visitar este tempo, nós podemos em casa, e criar um site oficial NPM exatamente o mesmo servidor, mas os dados estão assumindo o lugar de onde as pessoas, além disso, usando exatamente da mesma maneira;

Executar npm i nrm -ga instalação global de nrmpacote;
Use nrm lsVer tudo endereço de origem actual espelho disponível e o endereço de origem do espelho atual que está sendo utilizado;
Use nrm use npmou nrm use taobaoalternar entre o endereço de origem espelho;

Documentos relacionados

O hash URL (sinal de libra)

systempause

Publicado 27 artigos originais · ganhou elogios 5 · Vistas 6094

carta particular preocupações

aprendizagem vue três

Vue.js - Day3

Vue definido componentes

componentes globais definidas de três maneiras

Componentes e exibir dados em resposta a eventos

[Chave] componentes de atributos de dados Por que deve ser definido como um método e devolve um objecto

Uso `components`atributo define um subconjunto parcial

Utilizar `flag`o identificador em combinação `v-if`e `v-else`componente de comutação

Use `:is`propriedade para alternar entre diferentes sub-componentes, e adicionando comutação de animação

componente pai submontagem para passar valores

Valor transmitido para os componentes de sub-montagem pai

Lista de comentários Caso

Use `this.$refs`para obter os elementos e componentes

O que é roteamento

Use vue-router na vue

Definir um Highlight Route

Rota eficiência de comutação dinâmica fornecida

Parâmetros definidos nas regras de roteamento

Use `children`propriedade Nested implementar roteamento

Nomeado alcançar vista clássica de layout

`watch`Uso da propriedade

`computed`Usando a propriedade calculada

`watch`, `computed`E o `methods`contraste entre

`nrm`a instalação

Documentos relacionados

Acho que você gosta

aprendizagem vue três

Vue.js - Day3

Vue definido componentes

componentes globais definidas de três maneiras

Componentes e exibir dados em resposta a eventos

[Chave] componentes de atributos de dados Por que deve ser definido como um método e devolve um objecto

Uso componentsatributo define um subconjunto parcial

Utilizar flago identificador em combinação v-ife v-elsecomponente de comutação

Use :ispropriedade para alternar entre diferentes sub-componentes, e adicionando comutação de animação

componente pai submontagem para passar valores

Valor transmitido para os componentes de sub-montagem pai

Lista de comentários Caso

Use this.$refspara obter os elementos e componentes

O que é roteamento

Use vue-router na vue

Definir um Highlight Route

Rota eficiência de comutação dinâmica fornecida

Parâmetros definidos nas regras de roteamento

Use childrenpropriedade Nested implementar roteamento

Nomeado alcançar vista clássica de layout

watchUso da propriedade

computedUsando a propriedade calculada

watch, computedE o methodscontraste entre

nrma instalação

Documentos relacionados

Acho que você gosta

Uso `components`atributo define um subconjunto parcial

Utilizar `flag`o identificador em combinação `v-if`e `v-else`componente de comutação

Use `:is`propriedade para alternar entre diferentes sub-componentes, e adicionando comutação de animação

Use `this.$refs`para obter os elementos e componentes

Use `children`propriedade Nested implementar roteamento

`watch`Uso da propriedade

`computed`Usando a propriedade calculada

`watch`, `computed`E o `methods`contraste entre

`nrm`a instalação