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

  • 相关阅读:
    数据类型装换
    变量及数据类型
    27 网络通信协议 udp tcp
    26 socket简单操作
    26 socket简单操作
    14 内置函数 递归 二分法查找
    15 装饰器 开闭原则 代参装饰器 多个装饰器同一函数应用
    12 生成器和生成器函数以及各种推导式
    13 内置函数 匿名函数 eval,exec,compile
    10 函数进阶 动态传参 作用域和名称空间 函数的嵌套 全局变量
  • 原文地址:https://www.cnblogs.com/csic716/p/12297356.html
Copyright © 2011-2022 走看看