Vue基础笔记
目录
定义:【官方定义】
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动
介绍:
渐进式的JavaScript框架
优点
易用 灵活 高效
Script直接引入
开发版本:包含了完整的警告和调试模式 【开发者推荐】
地址:https://vuejs.org/js/vue.js
生产版本:文件的尺寸更加小巧,删除了警告
地址:https://vuejs.org/js/vue.min.js
CDN: 在网络的情况下 推荐使用
制作原型或学习
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
使用原生ES Modules
<script type="module">
import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.esm.browser.js'
</script>
生产环境
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
NPM
使用Vue构建大型应用是 推荐使用NPM安装
$ npm install Vue
制作一个简单的Vue实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 插值表达式 -->
{{msg}}
</div>
<!-- 引入Vue.js -->
<script src="./js/vue.js"></script>
<script>
// 构造一个Vue实例
let vm = new Vue({
el: '#app',
data: {
msg: 'helloworld'
}
})
</script>
</body>
</html>
Vue指令:
v-cloak 解决闪动
v-text 渲染文本
v-html 渲染html标签
v-pre 直接显示原始信息 跳过编译
v-once 只会渲染一次
应用场景:[在数据变化频率几乎很少的情况下,可以使用v-once ]
v-cloak 解决闪动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 样式中使用display:none 将其隐藏 直接将渲染后的数据进行显示 */
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<!-- 结构中使用v-cloak-->
<div v-cloak id="app">
<!-- 插值表达式 -->
{{msg}}
</div>
<!-- 引入Vue.js -->
<script src="./js/vue.js"></script>
<script>
// 构造一个Vue实例
let vm = new Vue({
el: '#app',
data: {
msg: 'helloworld'
}
})
</script>
</body>
</html>
v-text 渲染文本
以文本的形式进行渲染,跟插值表达式类似
没有闪动问题
如果里面有标签语句话的,他会把标签语句当做文本进行渲染、解析
v-html 渲染html标签
相比v-text 来说 可以将标签语句 进行渲染、解析
值得注意的是:v-html 存在安全风险(XSS)
如果涉及到跨域的话,请慎重使用
v-pre 直接显示原始信息 跳过编译
显示初始信息,并且对页面不进行渲染
优点:
【加快渲染速度】如果一些静态资源的话,可以使用此指令加快渲染速度
注意事项:
<p v-pre>{{msg}}<p>
与v-text和v-html不同:v-pre不是写变量的值 而是写插值运算符
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 视图层 -->
<div id="app">
<!-- 插值表达式 -->
<p>{{msg}}</p>
<!-- v-text -->
<p v-text='msg'></p>
<!-- v-html -->
<p v-html='msg'></p>
<!-- v-pre 的不同之处是 不写对应的变量名称-->
<p v-pre>{{msg}}</p>
</div>
<script src="./js/vue.js"></script>
<script>
// 创建一个VUe实例
let vm = new Vue({
el: '#app',
data: {
msg: '<h1>welcome to Vue</h1>'
}
})
</script>
</body>
</html>
双向数据绑定
v-model【指令】
当数据发生改变的时候,视图层会根据数据对页面进行重选渲染
当视图中的数据发生变化的时候,数据也会跟着进行同步的变化
v-model 只能在<input>、<select>、<textarea>、<components>中使用
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 当input输入框中的value值进行改变的时候,
会修改data中的msg,页面中p的msg值也会进行改变 -->
<p>{{msg}}</p>
<input type="text" v-model='msg'>
</div>
<script src="./js/vue.js"></script>
<script>
// 创建vue实例对象
let vm = new Vue({
el: '#app',
data: {
msg: '这是一个测试的值'
}
})
</script>
</body>
</html>
V-on 【事件绑定】
常规语法 v-on:click
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<button v-on:click="msg++">加1</button>
</div>
<script src="./js/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: 0
}
})
</script>
</body>
</html>
简洁语法 @click
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<button @click="msg++">加1</button>
</div>
<script src="./js/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: 0
}
})
</script>
</body>
</html>
v-on事件函数中传入参数
v-on:click="调用的函数"
v-on:click="addOne(1)"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<button @click="addOne(1)">加1</button>
</div>
<script src="./js/vue.js"></script>
<script>
// 构造一个Vue实例对象
let vm = new Vue({
el: '#app',
data: {
msg: 0
}, // 注意事项: add结束之后记得加逗号
// 在methods 中定义一些函数
methods: {
addOne: function(num) {
// 这里的this 指的是vm的实例对象
this.msg += num;
}
}
})
</script>
</body>
</html>
事件修饰符
在事件处理程序中调用事件对象 是我们非常常见的需求
例如 : event.prevnetDefault() 阻止默认行为
例如: event.stopPropagation() 阻止事件冒泡
Vue.js 不推荐我们操作DOM 为了解决这个问题 Vue.js提供了是事件修饰符
特点:可以并联使用
<!-- 提交事件不再重载页面-->
<form v-on:submit.prevent="onSubmit"></form>
<!--即阻止冒泡 也阻止默认事件-->
<form v-on:click.stop.prevent="doThat"></form>
.prevent 修饰符告诉v-on 指令对于触发的事件调用 event.preventDefault()
.stop 阻止冒泡
.capture 事件捕获
.self 事件不是从内部元素触发的
.once
键盘修饰符
常用的键盘修饰符
.enter => enter键
.tab => tab键
.delete (捕获“删除”和“退格”按键) => 删除键
.esc => 取消键
.space => 空格键
.up => 上
.down => 下
.left => 左
.right => 右
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 当enter 按钮释放是 执行onsunmit 事件 -->
<input type="text" v-on:keyup.enter="onsubmit($event)">
</div>
<!-- 引入Vue.js -->
<script src="./js/vue.js"></script>
<script>
// 构造Vue实例对象
let app = new Vue({
el: '#app',
methods: {
onsubmit(event) {
console.log(event.keyCode);
}
}
})
</script>
</body>
</html>
v-bind 指令
被用来想要的更新HTML属性
常规语句 <a v-bind:href="ahref"></a>
缩写 <img :src="ahref">
绑定对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.bcolor {
width: 50px;
height: 50px;
border: 1px solid red;
background-color: #000;
}
.fs {
color: #fff;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="{bcolor:isColor,fs:isfs}">56</div>
<button v-on:click="changeNC"></button>
</div>
<script src="./js/vue.js"></script>
<script>
// 创建一个Vue构造函数
let vm = new Vue({
el: '#app',
data: {
isColor: true,
isfs: true
},
methods: {
changeNC() {
this.isColor = "",
this.isfs = ""
}
}
})
</script>
</body>
</html>
绑定数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.bcolor {
width: 50px;
height: 50px;
border: 1px solid red;
background-color: #000;
}
.fs {
color: #fff;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="[isColor,isfs]">56</div>
<button v-on:click="changeNC">改变,从一点一滴做起</button>
</div>
<script src="./js/vue.js"></script>
<script>
// 创建一个Vue构造函数
let vm = new Vue({
el: '#app',
data: {
isColor: 'bcolor',
isfs: 'fs'
},
methods: {
changeNC() {
this.isColor = "",
this.isfs = ""
}
}
})
</script>
</body>
</html>
样式绑定相关语法细节
1.对象绑定和数组绑定可以结合在一起使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.red {
width: 100px;
height: 100px;
border: 1px solid red;
}
.article {
background-color: yellow;
}
.fc {
color: #fff;
}
</style>
</head>
<body>
<div id="app">
<div :class='[isred ,isarticle, {fc:fc}]'>追求源于热爱</div>
<!-- 点击按钮 清除#app 下面的div盒子的class属性值 -->
<button v-on:click="onchangeBg">改变从一点一滴做起</button>
</div>
<script src="./js/vue.js"></script>
<script>
let vm = new Vue({
el: '#app ',
data: {
isred: 'red',
isarticle: 'article ',
fc: true
},
methods: {
onchangeBg() {
this.isred = "";
this.isarticle = "",
this.fc = false;
}
}
})
</script>
</body>
</html>
2.class绑定的值可以简化操作
数组的简化操作
、 对象的简化操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.bgred {
width: 100px;
height: 100px;
border: 1px solid red;
}
.bgyellow {
background-color: yellow;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="arrclasses">数组的简化操作</div>
<div v-bind:class="objclasses">对象的简化操作</div>
</div>
<script src="./js/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
arrclasses: ['bgred', 'bgyellow'],
objclasses: {
'bgred': true,
'bgyellow': true
}
}
})
</script>
</body>
</html>
3、默认的class会被保留
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.bos_body {
width: 100px;
height: 100px;
border: 1px solid #ccc;
}
.yansh {
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<div class="bos_body" v-bind:class="isyansh">一步一步</div>
<!-- 点击按钮后,清除data中isyansu的属性值为空 -->
<button v-on:click='changeColor'>脚踏实地</button>
</div>
<!-- 引入Vue.js -->
<script src="./js/vue.js"></script>
<script>
// 初始化Vue实例对象
let vm = new Vue({
el: '#app',
data: {
isyansh: 'yansh'
},
methods: {
changeColor() {
this.isyansh = ""
}
}
})
</script>
</body>
</html>