Vue基础

Vue基础

class的绑定**

1.1 对象形式

实例

<div :class = '{ "size": true , "bg": true }'></div>
<div :class = '{ size: true , "bg": true }'></div>
<div :class = '{ size: f , "bg": f }'></div>
<div :class = '{ size: "5>3" , "bg": f }'></div>
<div :class = '{ size: fn() , "bg": f }'></div>

：

介绍：

对象形式里面支持变量，字符串，函数名（调用），表达式等等js语法。

补充修改：

对象中的key如（size）带不带引号都是原样输出size，没有变量一说

1.2 数组形式

实例：

//模板的语法格式 
<div :class = '["size","bg"]'></div>
<div :class = '[size,bg]'></div> 
<div :class = '[f?size:"",bg]'></div> 
<div :class = '[classAdd(),bg]'></div> 
//Vue的实例配置 
new Vue({  
	el: '#app',   
	data: {     
	f: true,   
	size: "size",  
	bg: "bg"     
	},   
	methods: {  
	fn(){    
	return 5>3  
	},  
	classAdd(){   
	return f? this.size : ""  
	}  
	}  
}) 

介绍：

数组形式同理对象形式，里面支持变量，字符串，函数名（调用），表达式等等js语法。

补充修改：

对象中的key如（size）带不带引号都是原样输出size，没有变量一说

1.3 class绑定总结

对象形式较数组形式而已，比较复杂，所以推荐在项目中使用数组的形式来进行class的绑定。

style的绑定

2.1 对象形式

实例：

<div :style = "{'width':'100px','height':'100px','background':'red'}" ></div>
<div :style="{width:size,'height':size,'background':color}"></div>

介绍：

对象形式里面支持变量，字符串，函数名（调用），表达式等等js语法。

样式是以键值对的形式展现的。

补充修改：

对象中的key如（size）带不带引号都是原样输出size，没有变量一说

2.2 数组形式

实例：

//模板的语法格式 
<div 
    :style="[{'width':'100px'},
    {'height':'100px'},
    {'background':'red'}]"
    >
    </div> <div 
    :style="[arrSize,arrBg]"
    >
</div> 
	//Vue的实例配置  new Vue({  
    el: '#app',   
    data: {        
            size: '100px',   
            color: 'red',    
            width: 'width',    
            arrSize: {      
            width: '100px',  
            height: '100px',  
            margin: '10px'     
  		 },   
    arrBg: {   
    background: 'red'        \
    	}    
    }    
 }) 

介绍：

数组形式同理对象形式，里面支持变量，字符串，函数名（调用），表达式等等js语法。

补充修改：

对象中的key如（size）带不带引号都是原样输出size，没有变量一说

2.3 style绑定总结

对象形式较数组形式而言，虽然较简单，但是在项目中我们往往把模板里面数组的元素写成变量，在Vue实例中配置data选项的数组变量，这样子更能清晰的表达样式，所以推荐在项目中使用数组的形式来进行class的绑定。

但是呢，在项目中我们并不推荐写行内样式，因为我们的优良传统都是结构、样式和行为进行分离，但项目中如有进行样式覆盖的情况我们为了工作效率和实用性可以使用行内样式的绑定。

3.Mustache

3.1 Mustache 简介

Vue本身是一款非常优秀的前端框架,通过简洁的API提供高效的数据绑定和灵活的组件系统,其核心思想是 “数据驱动的组件系统”。Vue在进行进行插值处理和 绑定表达式时使用了一种叫Mustache模版引擎。

Mustache是常见的Web模板引擎中的一种，这些年随着前端的不断发展,基于javascript的模版引擎越来越多。目前流行有 Mustache、Hogan、doT.js、JsRender、Kendo UI Templates等。

Mustache是一个logic-less(轻逻辑)模板解析引擎,它的优势在于可以应用在Javascript、PHP、Python、Perl等多种编程语言中。

3.2 Mustache 语法

1. {{keyName}}

直接匹配data里面的键名，将对应的值进行渲染

1. {{#keyName}} {{/keyName}}

以#开始、以/结束表示区块，它会根据当前上下文中的键值来对区块进行一次或多次渲染

1. {{^keyName}} {{/keyName}}

该语法与{{#keyName}} {{/keyName}}类似，不同在于它是当 keyName 值为 null, undefined, false 时才渲染输出该区块内容。

1. {{.}}

{{.}}表示枚举，可以循环输出整个数组

1. {{<partials}}

以>开始表示子模块，如{{> address}}；当结构比较复杂时，我们可以使用该语法将复杂的结构拆分成几个小的子模块

1. {{{keyName}}}

{keyName}}输出会将等特殊字符转译，如果想保持内容原样输出可以使用{{{}}}

1. {{!comments}}

!表示注释，注释后不会渲染输出任何内容

template

4.1 语法

<template v-for = ' v in arr '>     
  <li> {{ v }} </li> 
</template> 

在项目里面我们将template放在最外面，v-for等指令放在li里面

4.2 优点

1. 可以页面提高渲染效率
2. template标签不会直接渲染到页面

计算属性computed

5.1 用法

函数形式：

computed: {//字符串反向输出     //多个计算属性   计算属性可以是函数  
   newStr(){     
    return this.str.split('').reverse().join('')   
      } 
   } 

对象形式：

对象形式用到了getter和setter，其中Vue自带了get方法，set方法需要我们自己来定义。

   computed: {   
       //多个计算属性   计算属性可以是函数    
       newStr: {    
           get(){     
               //vue内部提供了   
            return this.str.split('').reverse().join('')        	  },      
        set(){     
            //我们自定义的     
        }   
       } 
   } 

5.2 computed和methods对比

• computed利用了Object的存储器getter和setter
• computed的属性可以在视图上直接使用，相当于一个变量。
• computed的属性里面的方法相比较methods不用调用，它的方法结果存在内存中，资源消耗较少,而methods函数每次都需要进行函数调用，所以它的资源消耗较大。

5.3 computed和watch对比

• watch比较而言是专注于监听大量数据的变化情况，computed则对数据进行监听并处理。
• watch监听属性，容易被滥用。
• 当执行数据的异步操作时或者监听开销较大时，我们需要使用watch来监听。

5.2和 5.3参考https://www.cnblogs.com/widgetbox/p/8954162.html

mixin混入

6.1 全局的混入

在全局Vue构造器函数中添加自定义的混入属性，从而在每个Vue实例中都能使用，所以全局混入不推荐使用的，请谨慎使用全局混入。

Vue.mixin({    
    methods: {     
        cc(){     
            console.log('cc')     
        }   
    }  
}) 

6.2 局部的混入

在外部定义一个 对象 ， 这个对象中可以书写组件的任意选项，在根实例（组件）中通过一个mixins的配置项引入即可。

外部对象：

var myMixin = { 
    methods: {     
        aa(){    
            console.log(' 明天情人节快乐' ) 
        }   
    }  
} 

Vue实例：

var vm = new Vue({ 
    el: '#app',   
    data: {    
        a: 1,    
        b: 2   
    },    
    methods: {  
        bb(){    
            console.log( '给他评论' ) 
        }    
    },   
    mixins: [myMixin] 
}) 

过滤器

7.1 Vue过滤器的发展

1. 初期Vue的过滤器是借鉴angular的过滤器。
2. 初器Vue1.x 版本的过滤器是系统的过滤器，定义了货币、日期、时间、字母大小写转换等10种。
3. 后面因为系统过滤器满足不了用户的需求，干脆在Vue2.x时删除了系统过滤器，改成了自定义过滤器，可供用户自己定义过滤器。

7.2 全局的过滤器

以首字母大写过滤器为例：

  Vue.filter('capitalize',function(value){ 
      if (!value) 
          return ''  
      value = value.toString()   
      return value.charAt(0).toUpperCase() + value.slice(1)   }) 

7.3 局部的过滤器

以首字母大写过滤器为例：

new Vue({     
    data: {      
        msg: 'hello  vue.js'   
    },    
    filters: {    
        capitalize: function (value) {   
            if (!value) return ''    
            value = value.toString()  
            return value.charAt(0).toUpperCase() + value.slice(1)    
        }    
    }  
}).$mount('#app') 

此处有个补充知识点：

当未在Vue根实例配置项定义el属性这个作用范围时，我们可以在根实例后面.$mount(’#app’)来设置作用范围。