1216 Vue基础
前端框架
- angular ---更新程度太快,且不向下兼容
- react ----- 移动端大多都使用
- vue
vue
有前两大框架的优点,摒弃缺点
但没有他们框架健全
Vue
1.简介
可以独立完成前后端分离式web项目的JavaScript框架
三大主流框架之一：Angular React Vue 先进的前端设计模式：MVVM 可以完全脱离服务器端，以前端代码复用的方式渲染整个页面：组件化开发
1.1 优点
- 中文API
- 单页面应用
- 组件化开发
- 数据双向绑定
- 虚拟DOM
- 数据驱动思想(相比DOM驱动)
2 使用
所有的script标签,在body与html标签之内的都会在body最下方加载
通过<script>引入vue.js文件,在<script>标签中实例化vue对象获取关联
2.1 基础
1. 挂载点
el指点与页面中的标签建立关联
- 通常挂载点都采用id选择器(唯一性)
- html与body标签不能作为挂载点(组件知识点)
<body>
<section>
<div id="d1">
{{ msg }}
<p> {{ info }} </p>
</div>
</section>
</body>
<script src="vue/vue.js"></script>
<script>
// let app = new Vue({
// el:'#d1', // 挂载点,vue实例与页面标签建立关联
// });
new Vue({
el:'section', // 挂载点采用的是css3选择器语法,但是只能匹配第一次检索到的结果
// data为挂载点提供数据
data:{
msg:'message',
info:'信息'
}
})
</script>
</html>
2. 方法属性
data:{}控制变量
methods:{}控制属性的变化
声明的实例不需要使用变量来接收,用
this代表当前vue实例本身在实例外部或其他实例内部, 需要定义一个变量接受new Vue()产生的实例
console.log(app.pClick);
console.log(this.pClick);
<body>
<section>
<div id="d1">
{{ msg }}
<p v-on:click="pClick" v-bind:style="pStyle">{{ info }}</p>
</div>
<hr>
<div class="d2">
{{ }}
</div>
<hr>
<div class="d2">
{{ }}
</div>
</section>
</body>
<script src="js/vue.js"></script>
<script>
`
console.log(Vue);
let app = new Vue({
el: '#d1', // 挂载点：vue实例与页面标签建立关联
});
new Vue({
el: '.d2', // 挂载点采用的是css3选择器语法，但是只能匹配第一次检索到的结果
});
`;
// 总结：
// 1、通常挂载点都采用id选择器（唯一性）
// 2、html与body标签不能作为挂载点(组件知识点解释)
// new Vue({
// el: 'body'
// })
let app = new Vue({
el: 'section',
data: { // data为挂载点内部提供数据
msg: 'message',
info: '信息',
pStyle: {
color: 'yellowgreen'
}
},
methods: {
pClick: function () {
if (app.pStyle.color !== 'yellowgreen') {
app.pStyle.color = 'yellowgreen'
} else {
app.pStyle.color = 'red'
}
console.log(app.msg);
console.log(app.pClick);
console.log(this.msg);
console.log(this.pClick);
}
}
});
// 声明的实例是否用一个变量接收
// 1、在实例内部不需要，用this就代表当前vue实例本身
// 2、在实例外部或其他实例内部需要，定义一个变量接收new Vue()产生的实例
console.log(app.msg)
</script>
</html>
3. 插值表达式
{{ }} 用于文本插值
<div id="app">
<p>{{ message }}</p>
</div>
算术运算
<p>{{ num * 10 }}</p>
拼接
<p>{{ msg + num }}</p>
取值
<p>{{ msg[1] }}</p>
<p>{{ (msg + num)[3] }}</p>
方法
<p>{{ msg.split('') }}</p>
2.2 文本指令
{{ }}插值表达式- v-text
- v-html
- v-once
1. v-text
不能解析html,只输出文本
<p v-text="info"> 旧文本 </p>
如果有旧文本,则会被替换
2. v-html
能够解析html语法的文本
<p v-html="info"></p>
new vue({
el:'#app',
data:{
msg:'message',
info:'<i> 这是info斜体字 </i>
}
})
3. v-once
处理的标签内容只能被解析一次
添加之后,只会被解析一次
<p v-on:click="pClick" v-once>{{ msg + info }}</p>
2.3 事件指令
v-on:事件名 = '方法变量'
简写:@事件名 = '方法变量'
- 点击事件
click - 悬浮
mouseover - 离开
mouseout - 按下
mousedown - 按下抬起
mouseup - 按下移动
mousemove - 右键
contextmenu
事件变量
- 事件的变量加括号是传参
- 事件对象本身为
$event
* 事件变量,不添加(),默认会传事件对象:$event
* 事件变量,添加(),代表要自定义传参,系统不再传入事件对象,但是可以手动传入事件对象
<p @click="f8($event,'第一个)">{{ info }}</p>
<p @click="f8($event,'第二个)">{{ info }}</p>
f8 (ev,argv){
console.log(ev,argv);
this.info = argv + '点击了'
}
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p @click="f1">{{ msg }}</p>
<hr>
<!--鼠标悬浮/离开-->
<p @mouseover="f2" @mouseout="f3">{{ action }}</p>
<hr>
<!--鼠标按下/按下抬起/按下移动-->
<p @mousedown="f4" @mouseup="f5" @mousemove="f6">{{ action }}</p>
<!--右键-->
<p @contextmenu="f7">{{ action }}</p>
</div>
</body>
<script src="vue/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'点击切换',
action:'鼠标事件',
},
methods:{
f1 (){
this.msg = '点击了'
},
f2 (){
this.action = '悬浮了'
},
f3 (){
this.action = '鼠标离开'
},
f4 (){
this.action = '鼠标按下'
},
f5 (){
this.action = '鼠标抬起'
},
f6 (){
this.action = '鼠标按下时移动'
},
f7 (){
this.action = '右键'
},
}
})
</script>
</html>
2.4 属性指令
v-bind:属性名='变量'
简写成:属性名='变量'
1. 简单使用(单值的使用)
<p v-bind:title="pTitle" :abc="def">简单使用</p>
....
data: {
pTitle: '简单使用',
def: '自定义属性',}
....
2. class的属性绑定
<!--c1变量的值就是类名-->
<p :class="c1"></p>
c1: 'd1 d2',
<!--多类名可以用[]语法，采用多个变量来控制-->
<p :class="[c2, c3]"></p>
c2: 'd1',
c3: 'd3',
<!--选择器位可以设置为变量，也可以设置为常量-->
<p :class="['d1', c4]"></p>
c4: 'd3','d1'直接是默认的样式
<!--{类名: 布尔值}控制某类名是否起作用-->
<!--<p :class="{x1: false}"></p>-->
<!--多种语法混用-->
第一个是固定样式,是否为真
<p :class="['d1', {d2: is_true}]" @click="is_true = !is_true"></p>
3. 样式属性(了解)
<p :style="myStyle">样式属性</p>
data中定义:
myStyle: {
width: '100px',
height: '100px',
backgroundColor: 'red'
}
<p :style="{width: w,height: h, backgroundColor: bgc}">样式属性</p>
data中定义:
w: '200px',
h: '100px',
bgc: 'green'
JS面向对象补充
数据类型
undefined/null/string/number/boolean/object(Array)/function
定义变量的方式
var/let/const/不写
对象object与function
面向过程(函数)
function f1(){
console.log('f1 run)
}
f1();
面向对象
定义类(构造函数 == 类)
function F2(){
console.log('f1 run)
}
f1();
JS中类的参数的传值与接收互相分离,多传值不会接收,少传值会是undefined参数
// 构造函数 == 类
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('sao子面');
直接定义对象(方法的简写)
类
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('hotdog');
JS函数的补充
定义变量
作用域 : 全局 -- 块级 -- 局部
var // for循环时,会是全局的
let // 不能重复定义,且具备块级作用域,出去括号就不认了
const // 常量不可以修改
不写 // 函数内定义则是全局变量
函数的定义
第一种
function f1(){
console.log('f1')
}
f1();
第二种
let f2(){
console.log('f2')
}
f2();
第三种(箭头函数)
let f3 = () => {
console.log('f3')
};
f3();
箭头函数
如果箭头函数没有函数体,只有返回值
let f4 = (n1,n2) => {
return n1 + n2;
}
可以写成
let f4 = (n1,n2) => n1 + n2;
let res = f4(10,25);
console.log(res)
如果兼有函数参数列表只有一个,可以省略括号()
let f5 = num => num * 10;
let res = f5(10);
console.log(res);
重点:
function/箭头函数/方法都具有本质区别
<script>
let obj = {
name: 'Jerry',
// function
eat: function (food) {
console.log(this.name + '在' + food)
// 箭头函数 (this不找当前调用者,找调用者的父一层)
eat: food => {
console.log(this)// 指向window
console.log(this.name + '在' + food) //箭头函数this不能指向上层
// 方法
eat (food) { // 方法的语法
console.log(this);
console.log(this.name + '在' + food) }
};
obj.eat('123')
---------------------------------------------------------
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>
作业
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="app">
<p class="box" :style="{backgroundColor: bgc}"></p>
<input type="button" value="红" @click="c_red">
<input type="button" value="黄" @click="c_ye">
<input type="button" value="蓝" @click="c_bl">
</div>
</body>
<script src="vue/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
bgc:'white'
},
methods:{
c_red(){
this.bgc = 'red'
},
c_ye(){
this.bgc = 'yellow'
},
c_bl(){
this.bgc = 'blue'
},
}
})
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#wrap {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<div id="wrap" :style="{backgroundColor: bgc}" @click="change_c"></div>
<span>{{ count }}</span>
</div>
</body>
<script src="vue/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
bgc:'blank',
count:0,
colorArr:['pink','green','cyan']
},
methods:{
change_c(){
let n = this.count++;
this.bgc = this.colorArr[n % this.colorArr.length]
}
}
})
</script>
</html>
1216 Vue基础的更多相关文章
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期
回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：传值+组件+项目说明
缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...
- python 全栈开发，Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)
一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...
- Vue 基础精讲
Vue 基础精讲 Vue 官方文档:https://cn.vuejs.org/v2/guide/ VUE 实例 每个组件都是一个 vue 的实例. 一个 vue 项目是由实例组成的. vue 实例上有 ...
- Vue基础以及指令
Vue 基础篇一 一.Vue框架介绍 之前大家学过HTML,CSS,JS,JQuery,Bootstrap,现在我们要学一个新的框架Vue~ Vue是一个构建数据驱动的web界面的渐进式框架. 目 ...
- 2-5 vue基础语法
一.vue基础语法 语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...
- Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例，vue基础语法
一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...
- vue基础知识之vue-resource/axios
Vue基础知识之vue-resource和axios(三) vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...
随机推荐
- Linux学习-软件包管理安装
rpm RPM是Red-Hat Package Manager(RPM软件包管理器)的缩写 软件包类型 二进制包:已经使用GCC编辑后的 tar源码包:需要编译 rpm包获取方式 1,系统镜像 需 ...
- 二、SpringBoot基础配置
目录 2.1 @SpringBootApplication 2.3 服务器配置 2.4 修改启动banner 小结 2.1 @SpringBootApplication 从上篇文章中知道@Spring ...
- MySql取消密码强度验证功能
一.修改MySql配置文件(my.cnf)一般情况下,MySql的配置文件 my.cnf 会在 /etc/ 目录下,如果没有,可以使用以下命令查找位置: find / -name my.cnf 编辑 ...
- WPF 不要给 Window 类设置变换矩阵（应用篇）
原文:WPF 不要给 Window 类设置变换矩阵(应用篇) WPF 的 Window 类是不允许设置变换矩阵的.不过,总会有小伙伴为了能够设置一下试图绕过一些验证机制. 不要试图绕过,因为你会遇到更 ...
- java之单元测试
这篇主要简单讲下java的单元测试 目录结构如下: 如图,其中1是需要被测试的功能:2是测试模块:3是单元测试需要的引入包: 1. 功能模块1中 Calculator 的代码: package cn. ...
- 5_PHP数组_3_数组处理函数及其应用_4_数组和变量间的转换函数
以下为学习孔祥盛主编的<PHP编程基础与实例教程>(第二版)所做的笔记. 数组和变量间的转换函数 1. list() 语言结构 程序: <?php $info = array('co ...
- JAVA相关知识
1.CopyOnWrite (1).在写操作的线程,会将数组复制出来一份进行操作.而原本的数组不会做改变. (2)读线程则不会受到影响,但是可能读到的是一个过期的数据. 在juc(java.util. ...
- it commit提示Your branch is up-to-date with 'origin/master'.
今天提交git仓库的时候,遇到了如截图所示的问题,提示Your branch is up-to-date with 'origin/master'. 查了些资料后,发现其根本原因是版本分支的问题 这时 ...
- text-overflow 全兼容
text-overflow 全兼容 text-overflow 这个CSS属性用于设置或检索是否使用一个省略标记(...)标示对象内文本的溢出.比起在后台用程序截断文本再附上省略标记的做法,用CSS来 ...
- python3 中的try 异常调试与 raise 异常抛出
一.什么是异常? 异常即是一个事件,该事件会在程序执行过程中发生,影响了程序的正常执行. 一般情况下,在Python无法正常处理程序时就会发生一个异常. 异常是Python对象,表示一个错误. 当Py ...