Vue-简单介绍

vue初体验 

    
{
    {message}}
    
{
    {name}}

vue-for

    
{
    {message}}
    

        
        
{
    {item}}
    

案例：计数器

    
当前计数：{
    {counter}}
    
    
    +
    1

Vue 的 mvvm，model view view model

vue的template, live template设置。

插值操作，Mustache(也就是双大括号)

  
{
    {message}}
  
{
    {message}},合理咯
  
  
{
    {firstName + ' ' +  lastName}}
  
{
    {firstName}} {
    {lastName}}
  
{
    {counter*1024}}

v-once

展示一次数据后，不会跟着改变

 
{
    {message}}

v-html

  
{
    {message}}
  

v-text 不灵活

  
{
    {message}}
  

v-pre 不解析，原封不动的显示出来

  
{
    {message}}

v-cloak

cloak: 斗篷

  
  
  




  
{
    {message}}

v-bind介绍

绑定到某一个属性之中，{ {}}是绑定到文本内容之中

动态绑定属性

比如：a的 href属性，  img的 src属性

  
{
    {message}}
  
  百度一下

缩写 :语法糖写法

  
  百度一下

动态绑定class，1.对象语法 2.数组语法

  
  
{
    {message}}
  Button

//用的很少
{
    {message}}

组件化

  
{
    {message}}
  


  

局部组件

  const app = new Vue({
    el: '#app',
    data:{
      message: 'hello'
    },
    components: {
      // cpn使用组件是的标签名
      //局部组件
      cpn: cpnC
    }
  })

父组件与子组件

  const cpnC1 = Vue.extend({
    template: `
      

        
title1
        
content1
      
    `
  })
  const cpnC2 = Vue.extend({
    template: `
      

        
title2
        
content2
        
      
    `,
    components: {
      cpn1: cpnC1
    }
  })

 注册组件语法糖

  //1.全局组件注册的语法糖
  Vue.component('cpn1',{
    template: `
      

         
title
      
    `

 const app = new Vue({
    el: '#app',
    data:{
    },
    components: {
      cpn2: {
        template: `
          

             
title
          
    `
      }
    }

组件模板的分离写法