zoukankan      html  css  js  c++  java
  • 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 ,形参的括号也可以省略

  • 相关阅读:
    【Linux使用技巧】使用 tar g 参数进行增量+差异备份、还原
    【Linux使用技巧】linux 死机了怎么办
    【reSIProcate学习】搭建与测试笔记
    【NGN学习笔记】5 IMS技术
    win7 64位 java.sql.SQLException: [Microsoft][ODBC 驱动程序管理器] 未发现数据源名称并且未指定默认驱动程序 问题
    Asp.Net页面之间传值
    快递公司快递单号规律总结
    DataTable导出Excel的三种方式
    ASPxGridview总结(ASPxGridView的增,删,改,查,数据绑定,外观显示,功能设定,分页)
    终于解决SQL Server 2008 64位系统无法导入Access/Excel的问题 2012/08/01
  • 原文地址:https://www.cnblogs.com/csic716/p/12297356.html
Copyright © 2011-2022 走看看