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')
}
}
js中类的定义(两种方式)

类属性

如果有一个类  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中函数的定义

在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 ,形参的括号也可以省略

原文地址:https://www.cnblogs.com/csic716/p/12297356.html