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

目录

日考题(知识点)🏠​

1.http 与 https

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

http的特点: 无状态 无连接 先客户端发送请求, 服务端一定做出响应

https : 在http协议之上增加ssl安全认证

2.前端布局

流式布局

响应式布局

盒子模型布局: margin padding border content

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

定位布局:默认static relative absolute fiexd

3.orm

对象关系映射

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

大概的大纲🏠

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

vue框架🏠​

​ 前台主流框架: 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
                })
            })
        }
    }
})
posted @ 2019-12-16 17:17  LD_Dragon_sky  阅读(466)  评论(0)  编辑  收藏  举报