Vue ---- vue的基本使用 文本/事件/属性指令 补充: js面向对象 js函数
Posted lddraon1
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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框架???
- 开发版本：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函数的主要内容，如果未能解决你的问题，请参考以下文章