Vue框架学习（一）

一、Vue简介

1.定义

Vue是一个基于Javascript的渐进式框架。渐进式：可以控制一个页面的一个标签、一系列标签、也可以控制整个页面，甚至控制整个前台项目

2.vue的优势

有指令（分支结构，循环结构），复用页面结构

有实例成员（过滤器、监听），可以对渲染的数据做二次格式化

有组件（模块的复用和组合），可以快速搭建页面

3.三大前端框架

• Angular （庞大）
• React （常用于移动端）
• Vue （吸取两者优势、轻量级）文档是中文

二、Vue环境搭建

"""
1）cdn


2）本地导入

"""

三、挂载点

Vue对象中，el表示挂载点

1.一个挂载点只能控制一个页面结构
2.挂载点挂在的页面标签严格建议使用id属性进行匹配
3.html标签与body标签不能作为挂载点
4.可以选择用变量去接受实例化的vue对象

四、插值表达式

1.空插值表达式 {{ }},需要有空格
2.{{ }}中渲染的变量需要在data中初始化
3.插值表达式可以进行简单运算
4.插值表达式与其他模版语法冲突时，可以用delimiters自定义

可以将delimiters插值表达式改为标识符为[{ }]。

插值表达式里可以调用属性、方法

	
		
		
	
	
		

			
{{ nums[3] }}
			
{{ }}
			
{{ a + b }}
			
{{ a + b * 2}}
			
{{ msg.length + a }}
			
{{ msg.split('') }}
		
	
	
	

五、过滤器

1.用实例成员filters来定义过滤器
2.在页面结构中，用|来标识并调用过滤器
3.过滤方法的返回值就是过滤器过滤后的结果
4.过滤器可以对1~n个变量进行过滤，同时还可以传入辅助的变量。过滤器方法接收参数时按照传入的位置从左到右。

# 过滤器可以串联使用，从左到右执行。上一个过滤器的结果会当做下一个过滤器的参数传入。如果参数不够，则参数为undefined。如果参数太多，则多余的参数不会被接收。
{{ n1, n2 | fn(99, 77), n1, n2 | fn(100) }}

六、文本指令

1.v-*是vue指令，会被vue解析，v-text="num"中的num表示一个变量，如果在data中未定义num，则会报错。v-text="'num'"，则表示字符串。
2.v-text是原样输出渲染内容。
3.v-html可以解析渲染html语法的内容

七、js对象内容补充

1.js没有字典类型，只有自定义对象，可以完全替代字典来使用。
2.js中对象的属性名，都采用自字符串类型，所以就可以省略字符串的引号
3.对象中属性值为函数时，称之为方法，方法可以简写为: 方法名(){}
4.如果对象的属性值是一个变量，且变量名与属性名相同，则可以简写{属性,}

let obj = {
    'name' : "Bob",
    'eat' : function(){
    console.log("I'm eating...")
    }
}
console.log(obj.name,obj['name'])
obj.eat()

简写

let obj1 = {
    name:'Bob',
    eat(){
        console.log("I'm eating")
    }
}
console.log(obj1.name,obj1['name'])
obj1.eat()

属性简写

let height = 180
let obj2 = {
    height,
    name:'Bob',
}
console.log(obj2.height,obj2.name)

JS中类的声明

prototype为类属性赋值

八、js函数内容补充

函数的形参和调用时传入的实参关系：传入和接收的参数个数不需要一致，按位置进行赋值，不存在关键字参数，多余的实参不会被接收，没有被赋值的形参会被赋值为undefined。

九、事件指令

* 一、数据驱动
*  1）操作是一个功能，使用需要一个方法来控制 2）方法名是变量，所以控制变量就可以控制该方法
*
*
* 二、事件指令
*  1）在实例成员methods中声明事件方法
*  2）标签通过事件指令绑定声明的方法： v-on:事件名="事件方法名"   eg: 按钮

	
		
		
	
	
		

			
			{{ btn }}
			
			
			
			
{{ num }}
			

			{{ btn1 }}
			{{ btn2 }}