初始Vue

1. vue基础知识和原理

1.1 初识Vue

• 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
• demo容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
• demo容器里的代码被称为【Vue模板】
• Vue实例和容器是 一 一 对应的

初始示例代码

	
		
		
		
		
	

	
		

			
{{msg}} 
			 
		
	
	
	

1.2 模板语法

Vue的文本与指令

 

Vue模板语法有2大类：

        1.2.1插值语法：

            功能：用于解析标签体内容；

            写法：{{xxx}},xxx是js表达式，且可以直接读取到data中的所有属性.

        1.2.2. 指令语法:

            功能:用于解析标签（包括：标签属性、标签体内容、绑定事件...）

            举例：v-bind:href="xxx" 或 简写为 :href="xxx",xxx同样要写js表达式，且可以直接读取到data中的所有属性

            备注:Vue中有很多的指令，且形式都是: v-????，此处我们只是拿v-bind举个例子

初始示例代码

	
		
		
		
		
	

	
		

			
{{str}} 
			前往百度 
			前往百度 
		
	
	
	

1.3 指令分类

• 文本渲染指令
  • {{}}
  • v-text
    文本渲染指令
  • v-html
    html文本渲染指令
• 条件渲染指令
  • v-if
  • v-else
  • v-else-if
  • v-show
    隐藏元素以CSS的方式
    频繁切换用v-show
    ​少量切换用v-if
• 遍历指令
  • v-for
    字符串，数字，数组，对象进行遍历
    
  • {{index+1}}--{{item}}
  
  item 遍历的元素（自定义的名称)
  ​index 遍历的下标（键名)
  list 被遍历的数据
  • v-key
    值必须是唯一的，为了让vue更好的优化渲染列表
• 属性指令绑定
  • v-bind
  • v-on