vue学习笔记第一天之基本语法（{{}}、v-once、v-html、v-text 、v-pre、v-bind、计算属性）

插值操作
一、Mustache（胡子、胡须）语法{{}}
使用方法：对下面数据的进行表达的意思

 

    
{{firstName}}
        //这样可以对下面数据的表达
    
{{firstName}}流批
   //
    
{{firstName + lastName}}
  //可以把这样使用它
    
{{firstName + ' ' + lastName}}
    
{{firstName}} {{lastName}}
   //两个Mustache间有两个空格
    
{{counter * 2}}

  
  

二、v-once 由于vue使用{{}}存在响应式，也就是在浏览器上可以修改数据，要求不能修改这个数据就使用这个属性
如：

  

  	  {{message}}
  

三、v-html 如果我们从服务器请求到的数据本身就是一个HTML代码，如果我们直接通过{{}}来输出，会将HTML代码也一起输出，使用这个回使这段数据以代码的形式解释

	  

	  
{{url}}
   //这里输出的是直接就是原来的文本
	  
  //这里解析了这个代码，输出的是一个链接
	
	
	
	  
	
	

v-bind动态绑定
一、对属性进行动态绑定，如a元素的href属性，img元素的src属性
案例如下：

		

		      //这里使用了动态绑定属性v-bind: 这个：后面跟的是要绑定的属性，于是后面这"imgURL"是下面js中data的对象
		  百度一下  //同理
		  
		  
		  百度一下
		
		
		

二、v-bind动态绑定class对象语法，下面四种用法
用法一：直接通过{}绑定一个类

 
Hello World
   //'active': isActive 也就是active : true ,这样这里就相当于设置了  class="active"
const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      isActive: true,          //这里设置了isActive 相当于true的值
    }

用法二：也可以通过判断，传入多个值

		
Hello World
   //两个class
		const app = new Vue({
		    el: '#app',
		    data: {
		      message: '你好啊',
		      isActive: true,
		      isLine: true
		    },

用法三：和普通的类同时存在，并不冲突
注：如果isActive和isLine都为true，那么会有title/active/line三个类

Hello World

用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性

{{message}}
  
{{message}}
   //这里设置一个方法
  按钮   //这里设置了一个按钮

四、v-bind动态绑定style对象语法
:style="{color: currentColor, fontSize: fontSize + ‘px’}"
style后面跟的是一个对象类型
对象的key是CSS属性名称，对象的value是具体赋的值，值可以来自于data中的属性
如代码案例

	  

	     //动态绑定style的伪代码方式
	
	   
	         //数值必须加引号
	
	  
	     
	  
{{message}}
	  
{{message}}
   //也可以通过封装方法，把{fontSize: finalSize + 'px', backgroundColor: finalColor}放到方法里直接return
	
	
	
	

五、v-bind动态绑定style数组语法

style后面跟的是一个数组类型
多个值以，分割即可

				

			  
{{message}}
   //这里赋一个数组
			
			
			

六、计算属性
1、理解：在模板中可以直接通过{{}}插值语法显示一些data中的数据。但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示。这个时候就可以通过计算属性来进行对数据的处理，处理后再显示出来
如下

		

		  
{{firstName + ' ' + lastName}}
		  
{{firstName}} {{lastName}}
		
		  
{{getFullName()}}
		
		  
{{fullName}}
    //这个计算属性再这里不需要加（），因为把它当作一个属性