Vue ---- vue的基本使用文本/事件/属性指令补充: js面向对象 js函数

时间 2019-12-19

标签 vue 基本使用文本事件属性指令补充面向对象函数栏目 JavaScript 繁體版

原文原文链接

目录javascript

日考题(知识点)🏠

1.http 与 https

http 与 tcp : 一个是应用层, 传输层, http 协议传输层采用的是tcpcss

http的特色: 无状态无链接先客户端发送请求, 服务端必定作出响应html

https : 在http协议之上增长ssl安全认证前端

2.前端布局

流式布局vue

响应式布局java

盒子模型布局: margin padding border contentpython

浮动布局: float ------ clearfix 清除浮动防止父标签塌陷react

定位布局:默认static relative absolute fiexdios

3.orm

对象关系映射css3

表 --- 类记录 --- 对象字段 --- 对象.属性

大概的大纲🏠

"""
vue: 
    基础:指令, 实例成员, 组件(组件间传参)
    项目: 基于组件开发, 插件(vue-router, store, vuex, axios, vue-cookies, jq+bs ,element-ui)
    
drf
    全称: django restframework :完成后台 分离式django项目 
    知识点: 
        请求,响应,渲染,解析,异常
        序列化组件,三大认证(drf永远不用csrf_token),视图家族(cbv)
        分页器,过滤,筛选,搜索,排序
小商城项目:
    知识点:git,多方式登陆,第三方短信认证(面向对象二次封装),支付宝,项目上线
    目的: 了解先后台分离项目, 前端后端彻底独立,了解公司开发项目的模式
"""

vue框架🏠

开发版本：vue.js
生产版本：vue.min.js

前台主流框架: angular, react,vue

vue 有前两大框架优势, 摈弃缺点, 没有前两个框架健全 数据驱动

ECMA Script ec5/6 type Script

vue优势:官网中文api, 单页面应用,基于组件开发, 数据双向绑定,虚拟DOM, 数据启动思想(相比DOM驱动),

1.建立vue实例

# vue的导入
<script src="vue.js"></script> <!--vue的导入 能够取消console的打印大约在9000行-->

# vue实例
console.log(Vue);

# 建立vue实例
let app = new Vue({})
// 不一样于jq 能够建立多个实例 每个实例均可以控制一个标签

2.挂载点

<div id='d1'>{{ }}</div>
<div class='d2'>{{ }}</div>
<div class='d2'>{{ }}</div>

let app = new Vue({
    el:'#id', // 挂载点 vue实例与页面标签创建关联
    el:'.d2', // 挂载点采用的是css3选择器语法, 可是只能匹配第一次搜索到的结果
})

// 1.一般使用id为挂在点
// 2.可是 html 和 body 不能成为挂载点!!

<div id="d1">
        {{ }} <!--双大括号是vue的语法 使用el:id 能够与页面创建联系-->
 </div>

3.data 变量

data:{
        msg:'message',
        info:'info', // 挂载点出现的变量由data提供
        pStyle:{
            color:'red' // 样式操做
        }
    },

<div id="d1">
        {{ info }} <!--数据由data提供-->
        {{ msg }}
        <!--属性 用 bind-->
        <p v-bind:style="pStyle">{{info}}</p>
 </div>

4.methods 方法

methods:{
    pClick:function () {
        // 如何拿到vue实例?
        // app.pStyle.color = 'yellow'
        // 可使用this来获取
        console.log(this.info);

        // 切换案例
        if (app.pStyle.color !== 'yellow'){
            app.pStyle.color = 'yellow'
        }else{
            app.pStyle.color = 'red'
            }
        }
    }
})

// 声明的实例是否用一个变量来接收
 // 1.在实例内部不须要,用this就表明当前vue实例自己
 // 2.在实例外部或其余实例内部须要使用能够用变量接收

<body>
    <div id="d1">
        <!--事件 用 on-->
        <p v-on:click="pClick">{{ info }}</p>  <!--点击事件由methods提供-->  
        <!--属性 用 bind-->
        <p v-bind:style="pStyle">{{info}}</p>
    </div>
</body>

5.插值表达式

完成运算和一些方法的调用

<p>{{ msg }}</p>
<p>{{ num }}</p>
<!--插值表达式 运算 -->
<p>{{ num + 1 }}</p> <!--num 的运算-->
<p>{{ num * 10}}</p>
<p>{{ msg[1] }}</p> <!--取msg的第一个字符-->
<p>{{ msg.split('') }}</p> <!--按空格拆分-->
<p>{{ msg.split('')[0] }}</p> <!--按空格拆分 取 0-->

new Vue({
    el:'xxx',
    data:{
        msg:'msg',
        num:10,
    }
})

6.文本指令

{{ }} <!--插值表达式-->
v-text <!--不能解析html语法文本,会原样输出-->
v-html <!--能解析html语法文本-->
v-once <!--处理的标签的内容只能被解析一次 渲染一次就不能改了-->

<p v-html='info'></p>  点击
<p v-text='info'></p>  '<a>点击</a>'

new Vue({
    el:'xxx',
    data:{
        info:'<a>点击</a>'
    }
})

7.事件指令

<!--事件指令语法: v-on:事件名='方法变量'-->
<!--支持简写: @事件名='方法变量'-->
<p v-on:click='f1'>{{ msg }}</p> <!--点击事件-->

<!--mouseover mouserenter  |  mouseout mouseleave-->
<p v-on:mouseover='f1'>{{ msg }}</p> <!--鼠标悬浮事件-->
<p v-on:mouseout='f1'>{{ msg }}</p> <!--鼠标离开事件-->
<p v-on:mousedown='f1'>{{ msg }}</p> <!--鼠标按下事件-->
<p v-on:mouseup='f1'>{{ msg }}</p> <!--鼠标抬起事件-->
<p v-on:mousemove='f1'>{{ msg }}</p> <!--鼠标移动事件-->
<p v-on:contextmenu='f1'>{{ msg }}</p> <!--右键事件-->

<!--vue事件传参数-->
<!--事件变量 不加() 默认会传事件对象:$event --> 
<p @click='f2'>{{ msg }}</p> 
<!--事件变量 添加() 表明要自定义传参 系统再也不传入对象 可是能够手动传入 事件 对象 -->
<p @click='f2($event, 1 )'></p>

new Vue({
    data:{msg:'没点击了'},
    methods:{
        f1(){
            this.msg = '点击了'
        },
        f2(env){
            pass
        }
    }
})

8.属性指令

<div class='d1' name='n1' title='悬浮提示' style='color:red'></div>
<!--里面的都叫属性 style 里面的叫样式-->

<!--属性指令:v-bind:属性名='变量名'-->
<!--简写: :属性名='变量名'  ***-->
<p v-bind:title='pTitle' :abc='def' :style='pStyle'>简单使用</p>

<!--class 属性绑定 特色 能够赋值一个 也能够多个-->
<p v-bind:class='C1'>简单使用</p>
<p v-bind:class='[C1,C2]'>设置多个</p>
<p v-bind:class='["d1",C1,C2]'>设置死值</p>

<!--true为起做用 false 不起做用 x1是变量-->
<!--逻辑能够直接在click里面写 x1 = x1取反-->
<p :class='{x1: true}' @click='x1 = !=x1'>布尔类型属性</p>

new Vue({
    el:'#app1',
    data:{
        pTitle:'悬浮信息',
        def:'自定义属性',
        pStyle:{
            color:'red',
            backgroundColor:'red', // 驼峰命名 对应的就是 - 链接
        },
        C1:'d1 d1', // 赋值方式一
        C2:'d1',
        C3:'d2',
    }
})

.d1{background-color:'green';}
.d2{width:100%;}

9.补充:面向对象js

// 数据类型
// undefined , null, string, number, object(Array), function, 
// var , let, const , 不写

// 面向过程
function f1() {console.log('123')};
f1()
// 面向对象 称为构造函数 == 类
function F1(name) {
    // 属性
    this.name = name
    // 方法
    this.eat = function(food){
        console.log(this.name + '在吃' + food)
    } 
};

// 实例化
let f2 = new F2('Tom');
console.log(f2);  // >>> 'Tom'
f2.eat('嫂子');   // >>> 'Tom在吃嫂子'

// 面向对象2
let obj = {
    name:'dragon',
    // 方法1
    eat:function(food){console.log(this.name + '在吃' + food)}
    // 方法简写2
    eat(food){ console.log(this.name + '在吃' + food)}
}

10.补充:js函数

// 变量的4种定义方式
function f1(){
    var a = 10; 
    let a = 20;  // let const 定义的变量不能重复定义, 且具有块级做用域
    const c = 30; // 常量 不能修改
    d = 40; // 不加声明词 全局变量 外部能够调用
}

// 函数的定义方式
function f1(){};
f1();

let f2 = function(){};
f2();

// 箭头函数
let f3 = () => {};
f3();

// 若是箭头函数没有函数体,只有返回值
let f4 = (n1, n2) => n1 + n2;
let res = f4(10, 25);

// 若是箭头函数参数列表只有一个 能够省略()
let f5 = num => num*10
res = f5(10);

function和 箭头函数的区别

// 重点: function,箭头函数,方法,都有本质区别
// 在箭头函数中是没有this的 里面的this指向的是window的 
// 应用场景
new Vue({
    data:{res:''},
    methods:{
        fn(){
            this.$axios({
                url:'',
                mehtod:'get',
                data:{}
            }).then(function(response){
                this.res = response // 这样式不行的 由于这里的this指代的是axios 
              .then(response => {
                this.res = response // 这样的话就不会产生this 会去找父级的this
                })
            })
        }
    }
})

Vue ---- vue的基本使用 文本/事件/属性指令 补充: js面向对象 js函数

日考题(知识点)🏠​