CSIC_716_20200211【Vue入门-实例成员、基础指令 js对象和函数补充】
Vue渐进式框架：
根据需求，可以控制一个页面的一个标签，也可以控制一系列标签，也可以控制整个页面，甚至可以控制整个前台项目。
Vue框架的优点：
轻量集优的框架，表现为虚拟DOM、数据的双向绑定、单页面应用、数据驱动
前后端分离的前端框架：开发效率高
中文API：学习成本低
数据驱动：
前后端不分离项目与前后端分离项目的区别：
前后端不分离：后端占主导，页面由后端服务器渲染，路由由后端分配，可以通过ajax和form两种方式完成前后端数据交互，通常采用session-token方式进行认证
前后端分离：分前后端两个独立的项目，页面由前端直接渲染，前端控制页面路由，后端控制数据路由，项目间的数据通过ajax交互，通常采用jwt认证。
成员实例有：
el挂载点：建议通过id选择器获取到一个页面结构，（优先匹配到的结构） html和body标签不能作为挂载点。
data数据：对插值表达式{{ num }}中的变量num进行赋值
delimiters: 如果插值表达式的符号有冲突时，可以借助此进行自定义插值表达式的符号
filters： 过滤器，在页面结构中，使用管道符 | 来标识使用过滤器，过滤器可以在插值表达式中串联使用
文本指令
v-text 替换纯文本，不做渲染
v-html 可以根据标签渲染
事件指令
v-on：click=' 事件方法名（ 可以传参数 ）' ， v-on: 可以简化成@符号； 在methods中通过方法来接收处理
在页面中 <div id ='app'><button @click=‘fn1’ >按钮</button></div> 在js中 new Vue({ el:'#app', methods:{ fn1(){相关逻辑} } })
补充知识点：
js中的对象补充：
js中对象的属性名都使用字符串，所有简写时就可以省略引号标识
对象中的属性值为函数时，称之为方法，方法简写为 方法名(){}
如果对象的属性值为一个变量，且变量名与属性名相同，可以简写为属性名即可 {name：name，}可以简写为{name，}
举例如下：
let country = ‘China’ var obj = { //对象就类似于Python中的字典 country, fn1(){}, name:'HEU' }
js中类的两种定义方式：
function People(name){ this.name=name, this.eat = function(){ console.log('XXX') } } class People{ constructor(name){ this.name = name } eat(){ console.log('XXX') } }
类属性
如果有一个类 function Fn(){ }
则可以通过 Fn.prototype.类属性名=值 ，设置类的属性,如 Fn.prototype.age=11
类的属性对象都可以获取到， let obj= new Fn() ; 则有： Fn.age =11, obj.age=11
js中的函数补充：
js中函数的定义：
function fn(a,b){ console.log('XXX'); return a+b; }
在js中，如果函数的形参和实参个数不一致，不会报错；如果实参个数多于形参，多出来的实参会被舍弃；如果实参个数少于形参，则多于的形参会被赋值undefined。
如果将函数赋值给变量fn1，则函数可以定义为 let fn1 = function(a,b){ return a+b; }
此外还可以将关键字用箭头替代 let fn1=(a,b)=>{return a+b}
进一步的，如果没有函数体，只有返回值时，可以将作用域的{}以及返回值的关键字return一并省略，简写为 let fn1=(a,b)=>a+b
更进一步，如果没有函数体，只有返回值，且形参只有一个时，可以简写为 let fn1=a=>a*a ，形参的括号也可以省略
顶
