12.16 vue
Posted lidandanaa
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了12.16 vue相关的知识，希望对你有一定的参考价值。
日考
1、http与https
http vs tcp：应用层，传输层，http协议是传输层采用的tcp的应用层
http特点：无状态，无连接，（基于请求响应）先客户端发出请求，服务器端一定做出响应
https：在http协议之上增加ssl安全认证
2、前端布局
流式布局
响应式布局
盒模型布局
浮动布局
定位布局
课程安排
Vue：
基础：指令、实例成员、组件(组件间传参)
项目：基于组件开发、插件（vue-router、vuex、axios、vue-cookies、jq+bs、element-ui）
DRF：
全称：django-restframework：完成前后台 分离式 django项目
知识点：
请求、响应、渲染、解析、异常
序列化组件、三大认证、视图家族(CBV)
分页、筛选、搜索、排序
Luffy：
目的：了解前后台分离项目，了解公司开发项目的模式
知识点：git、多方式登录、第三方短信认证、支付宝、上线
Vue
前端框架：angular、react、vue
vue：有前两大框架优点，摈弃缺点；没有前两个框架健全
vue优点：中文API、单页面应用、组件化开发、数据双向绑定、虚拟DOM、数据驱动思想(相比DOM驱动)
知识总结
1、vue框架的优势
2、vue如何在页面中引入
1）通过script标签引入vue.js环境
2）创建vue实例
总结：
挂载点：Vue实例与页面标签建立关联
挂载点采用的是css3选择器语法 但是只能匹配第一次检索到的结果
通常挂载点都采用id选择器，因为它有唯一性
html与body标签不能作为挂载点
一般一个页面出现一个挂载点
3）通过el进行挂载
4）声明的实例是否用一个变量接收
在实例内部不需要，用this就代表当前Vue实例本身
在实例外部或其他实例内部需要，定义一个变量接收new Vue()产生的实例
模板：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
{{ msg}}
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg:'message'
}
})
</script>
</html>
3、插值表达式
{{ 变量以及变量的简单运算 }}
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<p>{{ msg}}</p>
<p>{{ num * 10}}</p>
<p>{{ msg + num}}</p>
<p>{{ msg[1] }}</p>
<p>{{ msg.split('') }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg:'message',
num:10
}
})
</script>
</html>
4、文本指令
{{ }} | v-text | v-html | v-once
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<!--
文本指令：
1.{{ }}
2.v-text:不能解析html语法的文本，会原样输出
3.v-html:能解析html语法的文本
4.v-once:处理的标签内容只能被解析一次
-->
<p>{{ msg.split('') }}</p>
<p v-text="msg.split('')">123456</p>
<p v-text="info"></p>
<p v-html="info"></p>
<hr>
<p v-on:click="pClick" v-once>{{ msg + info}}</p>
<p>{{ msg }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg:'message',
info:'<i>info</i>'
},
methods:{
pClick:function () {
this.msg='信息'
}
}
})
</script>
</html>
5、方法指令
v-on:事件="变量" | @事件="变量" | @事件="变量()" | @事件="变量($event, ...)"
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
user-select: none;
/*不让用户选中*/
}
</style>
</head>
<body>
<div id="app">
<!--
事件指令： v-on:事件名='方法变量'
简写： @事件名="方法变量"
-->
<p v-on:click="f1">{{ msg }}</p>
<p @click="f1">{{ msg }}</p>
<hr>
<p @mouseover="f2" @mouseout="f3" @mouseup="f5" @mousemove="f6" @contetxmenu="f7">{{ action }}</p>
<hr>
<!-- 事件变量，不添加(),默认会传事件对象：$event -->
<!-- 事件变量，添加(),代表要自定义传参，系统不再传入事件对象，但是可以手动传入事件对象-->
<p @click="f8($event,'第一个')">{{ info }}</p>
<p @click="f8($event,'第二个')">{{ info }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg:'点击切换',
action:'鼠标事件',
info:'确定点击者'
},
methods:{
f1(){
this.msg='点击了'
},
f2(){
this.action='悬浮';
console.log('悬浮')
},
f3(){
this.action='离开'
},
f4(){
this.action='按下'
},
f5(){
this.action='抬起'
},
f6(){
this.action='移动';
console.log('移动')
},
f7(){
this.action='右键';
},
f8(ev,argv){
console.log(ev,argv);
this.info=argv + '点击了';
}
}
})
</script>
</html>
6、属性指令
v-bind:属性="变量" | :属性="变量"
:title="t1"
:class="c1" | :class="[c1, c2]" | :class="{c1: true}"
:style="s1" | :style="{color: c1, fontSize: f1}"
s1是字典变量，c1和f1变量分别控制字体颜色和大小
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.d1{
width:200px;
height:200px;
background-color: orange;
}
.d2{
border-radius: 50%;
}
.d3{
border-radius: 20%;
}
</style>
</head>
<body>
<div id="app">
<!--
属性指令： v-bind:属性名="变量"
简写： :属性名="变量"
-->
<p style="color:red" class="dd1" abc="def" title="悬浮提示">红色字体</p>
<p v-bind:title="pTitle" :abc="def" @click="changeImg">简单使用</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg:'message'
}
})
</script>
</html>
7、js补充
letconst定义的变量不能重复定义，且具备块级作用域，出了{}就不能再用了
function可以作为类，内部会有this
箭头函数内部没有this
{}里面出现的函数称之为方法： 方法名(){}
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>js面向对象</h1>
</body>
<script src="js/vue.js"></script>
<script>
function f1() {
console.log('f1 run')
}
f1();
//构造函数==类
function F2(name) {
this.name=name;
this.eat=function (food) {
console.log(this.name + '在吃' + food);
}
}
let ff1=new F2('Bob');
console.log(ff1.name);
let ff2=new F2('Tom');
console.log(ff2.name);
ff1.eat('面');
ff2.eat('米饭');
let obj={
name:'jerry',
// eat:function (food) {
// console.log(this.name + '在吃' + food)
// }
eat(food){ //方法的语法
console.log(this.name + '在吃' + food)
}
};
console.log(obj.name);
obj.eat('葱')
</script>
</html>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>函数补充</h1>
</body>
<script src="js/vue.js"></script>
<script>
function f(){
d=40; //全局变量
}
f();
console.log(d);
const c=30; //常量
console.log(c);
if (1){
var a=10;
let b=20;
var a=100;
// console.log(a);
// console.log(b);
//letconst定义的变量不能重复定义，且具备块级作用域
}
console.log(a);
// console.log(b);
for (let i=0;i<5;i++){
console.log(i);
}
// console.log(i);
// console.log(i);
// console.log(i);
function f1() {
console.log('f1 run');
}
f1();
let f2=function () {
console.log('f2 run')
};
f2();
let f3=() =>{
console.log('f3 run');
};
f3();
//如果箭头函数没有函数体 只有返回值
let f4=(n1,n2)=> n1+n2;
let res=f4(10,25);
console.log(res);
//如果箭头函数参数列表只有一个 可以省略()
let f5=num=>num *10;
res=f5(10);
console.log(res)
//重点 function、箭头函数、方法都具有本质区别
let obj={
name:'jerry',
eat: function (food) { //function
console.log(this);
console.log(this.name + '在吃' + food)
},
// eat: food => { //箭头函数
// console.log(this); //this指的是window
// console.log(this.name + '在' + food)
// },
// eat(food) { // 方法的语法
// console.log(this);
// console.log(this.name + '在' + food)
// }
};
obj.eat('food');
new Vue({
data:{
res:''
},
methods:{
fn(){
//axios插件
let _this=this;
this.$axios({
url:'',
method:'get',
data:{
},
}).then(function (response) {
_this.res=response.data;
})
},
fn1(){
//axios插件
this.$axios({
url:'',
method:'get',
data:{
},
}).then(response=>{
this.res=response.data;
})
}
}
})
</script>
</html>
以上是关于12.16 vue的主要内容，如果未能解决你的问题，请参考以下文章