Vue.js(基础使用方法详解)
Vue
- Vue 基本配置项
-
- **Vue 扩展:**
- 模板引擎
- 插值表达式
- 指令
-
- v-for (遍历)
- v-text/v-html
- v-show/v-if (显示与隐藏)
- v-if/v-else-if/v-else (条件)
- v-bind (绑定属性)
-
- class 的绑定
- style 的绑定
- v-on (事件)
-
- 事件修饰符
- v-model (绑定表单 value)
-
- v-model 修饰符
- 自定义指令
-
- 局部指令
- 全局指令
- 计算属性
- 过滤器 (filter)
-
- 过滤器的串联
- 侦听器 (ref & $refs)
- 过渡 & 动画
官网: https://cn.vuejs.org
介绍: Vue 是渐进式 Javascript 框架
渐进式: 先使用Vue的核心库，再根据你的需要的功能再去逐渐增加相应的插件。
Vue最核心的功能就是数据渲染
Vue 基本配置项
const vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js'
}
})
- el (element): 表示 vue 的接管范围(或者 vue 生效的范围)
- 推荐使用 id 选择器, id 具有唯一性
- 不能使用 body 和 html, 否则会报错
- data: 数据项, 是一个对象
- 网页中使用的数据需要预先在 data 中声明, 否则会报错
- data 选项中的数据是响应式的
- data 中的数据是直接挂在 vue 实例上的, 如果需要使用, 直接获取 vm.xxx, 修改 vm.xxx = 新值
Vue 扩展:
vm.$el == 代表 Vue 接管的原生DOM 节点
vm.$data == 代表 Vue 的数据模型
模板引擎
<div id="app">
{{msg}}
div>
<script src="https://cn.vuejs.org/js/vue.js">script>
<script src="./vue.js">script>
<script>
const vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js'
}
})
script>
插值表达式
-
{{xxx}}这种标记称为插值, 也叫胡子语法 -
作用就是将
data中的数据展示在页面上(插值就是用来数据展示的) -
插值可以放什么
- 属性名
- 表达式 (数学运算, 三元表达式)
- 方法的调用
-
不可以放什么
- 不能对数据本身进行修改, 例 {{a+=2}}, {{a++}}
- 不能定义变量, 声明 if, for 之类的代码块
<div id="app">
<p>{{ msg }}p>
<p>{{ 100 }}p>
<p>{{ '嗨' }}p>
<p>{{a + 50}}p>
<p>{{msg + ',World'}}p>
<p>{{a % 3}}p>
<p>{{a % 2 === 0 ? '偶数' : '奇数'}}p>
div>
<script src="vue.js">script>
<script>
const vm = new Vue({
el: '#app',
data: {
msg: 'Hello,China',
a: 100
}
})
指令
- 指令可以做属性的数据展示
<p title="{{msg}}">{{msg}}p>
- 做用在标签上, 以
v-开头, 与 vue 数据项属性绑一起的具有特定功能的属性 - 指令可以加强 vue 作为模板引擎渲染数据的能力, 填补插值表达式的短板
v-for (遍历)
作用: 列表渲染
注意:
- v-for 做列表渲染的时候, 最好给每一个列表项添加一个稳定不重复的 key属性, 提高 vue 的计算效率, 性能优化的方式
<div id="app">
<ul>
<li v-for="product,index in products">
{{product}} == {{index}}
li>
ul>
div>
<script src="vue.js">script>
<script>
const vm = new Vue({
el: '#app',
data: {
products: [
{
title: '苹果',
price: 8.98
},{
title: '香蕉',
price: 3.45
},{
title: '橘子',
price: 2.9
},{
title: '柚子',
price: 1.98
}
]
}
})
script>
v-text/v-html
<div id="app">
<ul>
<li v-text="msg">撒li>
<li v-html="msg">撒li>
ul>
div>
<script src="./vue.js">script>
<script>
const vm = new Vue({
el: '#app',
data: {
msg: '你好
'
}
})
script>
v-show/v-if (显示与隐藏)
- 作用: 控制标签的显示与隐藏
- v-show/ v-if : 后面可以跟任何数据类型(为 true 时隐藏, 为 false 时显示)
- 区别
- v-show: 通过 display: none 来控制元素隐藏
- v-if: 是通过动态创建和移除元素(条件渲染)
v-if/v-else-if/v-else (条件)
- 多分支的 条件 成立则渲染
<div id="app">
<div class="header" v-if="x > 4">headerdiv>
<div class="content" v-else-if="x > 5">contentdiv>
<div class="footer" v-else>footerdiv>
div>
<script src="https://cn.vuejs.org/js/vue.js">script>
script>
<script>
const vm = new Vue({
el: '#app',
data: {
flag: true,
x: 3
}
})
script>
v-bind (绑定属性)
bind：绑定，我们之前见的bind是函数的一个方法，用来改变this指向的
作用: 动态绑定标签上的属性的值
-
动态绑定标签上的属性不能使用插值表达式来设置
-
<元素 v-bind:属性名1="值1" v-bind:属性名2="值3">元素> -
简写, 省略 v-bind, 用冒号代替
class 的绑定
- 支持表达式绑定, 2. 支持对象格式来定义类名, 3. 支持数组格式
- 三元绑定法
<h3 class="title" v-bind:class="score > xx ? 'success' : 'error'">h3>
- 对象绑定
- 对象的属性为真正的类名
- 如果对象的属性值为 true 时表示添加, 值为 false 时表示不添加
<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
>
div>
<script>
data: {
isActive: true,
hasError: false
}
script>
<div class="static active">div>
- 不内联在模板里 class 列表会相应的刷新
<div v-bind:class="classObject">div>
data: {
classObject: {
active: true,
'text-danger': false
}
}
- 数组绑定
- 数组中的每一个单元都是一种个类名
<div v-bind:class="[activeClass, errorClass]">div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
<div class="active text-danger">div>
style 的绑定
- 支持以对象格式定义
- 对象绑定
v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">div>
data: {
activeColor: 'red',
fontSize: 30
}
直接绑定到一个样式对象通常更好，这会让模板更清晰：
<div v-bind:style="styleObject">div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
- 数组绑定
v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：
<div v-bind:style="[baseStyles, overridingStyles]">div>
v-on (事件)
触发 DOM 事件
-
支持所有的事件名 (所有的原生事件 文档: https://developer.mozilla.org/zh-CN/docs/Web/Events
-
注意在 html 中:
- 如果不需要参数，不加括号
- 如果需要需要参数，需要加
- 事件对象如何获取?
- 如果函数没有参数，第一次形式参数就是事件对象，无需传实际参数
- 如果函数有参数，最后一个形式参数对应事件事件对象，并且还需要手动传入$event，
-
使用方法
v-on:事件类型=“回调函数”
定义事件回调不要使用箭头函数, 箭头函数的 this 不指向 vm
<标签 v-on:事件名="要执行的代码">标签>
<标签 @事件名="要执行的代码">标签>
<标签 v-on:事件名="methods中的函数">标签>
<标签 v-on:事件名="methods中的函数(实参)">标签>
- 定义事件
const vm = new Vue({
el: '#app',
data: {
isVisible: false
},
// 方法选项
methods: {
/*handleClick(){
// this指向当前vue实例
this.isVisible = !this.isVisible
console.log(e)
}*/
handleClick(x,y,e) {
console.log(x + y, e)
}
}
})
事件修饰符
什么是事件修饰符?
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求.
注意:
使用: v-on:click.prevent.self 会阻止所有的点击, 而v-on:click.self.prevent 只会阻止对元素自身的点击。
修饰符:
.stop：禁止冒泡，如同原生的stopPropagation()
<div id="app" @click="appClick">
<button @click.stop="btnClick">buttonbutton>
div>
.prevent：阻止默认行为，如同原生的preventDefault
<a href="http://www.baidu.com" @click.prevent="gotoBaiDu">百度一下a>
.self：事件作用自己身上才会触发
<div id="app" @click.self="appClick">
<button @click="btnClick">buttonbutton>
div>
.once：事件只触发一次，该事件触发后就将其移除
<button @click.once="btnClick">buttonbutton>
v-model (绑定表单 value)
将 data 中的数据与表单控件中的 value 属性 进行 双向绑定
- 注意: 仅仅可以作用在所有的表单元素上, 不作用 div, span
基本使用:
<div id="app">
<p>{{ username }}p>
<input type="text" v-model="username" placeholder="用户名">
div>
<script>
const vm = new Vue({
el: '#app',
data: {
username: ''
}
})
script>
v-model 修饰符
.lazy
添加 .lazy 修饰符将数据同步时机更改为 change事件(表单中的值改变的时候) 之后也就是光标离开之后:
<input v-model.lazy="msg">
.trim
清除字符串两端的空白, 这里使用可以清除用户输入失误的空格
<input v-model.number="age" type="number">
.number
自动将用户输入的值转为数字值类型
即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。
<input v-model.number="age" type="number">
自定义指令
当 vue 内置指令无法满足开发需求的时候就需要自定义指令
注意: 全局/局部 指令一个有 s 一个没有 s ( directive / directives )
局部指令
局部自定义指令，只在当前 vue 实例中生效
<div id="app">
<p v-hidden="false">{{text}}p>
div>
<script>
var vm = new Vue({
el: '#app',
data: {
text: '学习Vue.js'
},
// 在此自定义指令
directives: {
// 自定义指令的名称，不必添加 v-
hidden: {
// 指令被绑定到某个元素上时，只执行1次
bind: function (el, binding) {
// el 指令所在的元素
// 获取指令相关的参数(各种数据信息) ↓
// console.log(binding);
el.style.display = binding.value ? 'none' : 'block';
},
// 被绑定元素插入父节点时调用
inserted: function (el, binding) {}
},
// 当模板的某些节点发生了变化时, 会执行该回调函数
update(el, binding) {
console.log('发生变化了')
},
// 直接为指令设置成函数, 相当于将 bind 和 inserted 合并
// 可以认为是语法简写
success: function () {
}
}
})
script>
全局指令
<div id="test">
<p v-success>张贺权大傻叉p>
div>
<script>
// 全局指令定义后, 可以在任何实例中应用
// Vue.directive('指令名称', {指令逻辑})
Vue.directive('success', {
bind() {
console.log('全局指令触发')
}
})
script>
计算属性
作用: 可以将模板中过多的逻辑和运算拿到外面来 运算/解析
对于任何复杂逻辑，你都应当使用计算属性
小结：
- 当需要对data中的数据进一步加工的时候，推荐使用计算属性
- 声明的时候是 函数，调用的时候属性
- return什么，在模版中就展示什么
特点/用法:
-
声明的时候是函数，调用的时候是属性（不能加括号，否则会报做）
-
返回(return)什么，就展示什么
-
有缓存，根据依赖进行缓存的，只要依赖变了，计算属性会重新计算；依赖不变，多次调用计算属性会使用第一次缓存的结果，不会重新执行函数体了。
-
计算属性的依赖：这个计算属性是根据哪个或者哪些数据项计算出来的，那么这些数据项就被称为该计算属性的依赖
小结：
缓存问题， 如果依赖没变，那么多次调用该计算属性 会返回第一次计算后的值，不会再去执行计算属性对应的函数了
<div id="app">
<p>{{reverseMsg()}}p>
<p>{{reverseMsg}}p>
div>
<script>
new Vue({
el: '#app',
data: {
msg: 'helloworld'
},
// 计算属性
computed: {
reverseMsg() {
return this.msg.split('').reverse().join('');
}
}
})
script>
过滤器 (filter)
对文本进行格式化处理的工具
- 应用场景(调用过滤器函数)
<p>{{ message | capitalize }}p>
<p>{{item.price | formatePrice(2)}}p>
<div :id="rawId | formatId">div>
- 定义声明过滤器函数
// 第一种(全局定义)
/* 函数的第一个参数是传入当前调用过滤器 的插值表单式
自己传入的参数是第二个形参 */
Vue.filter('formateDate', (input) => {
let date = new Date(input)
let y = date.getFullYear()
let m = date.getMonth() + 1
let d = date.getDate()
// 必须 return 传值
return y + '-' + m + '-' + d
})
// 第二种(局部定义) 在 Vue 实例中定义
/* 函数的第一个参数是传入当前调用过滤器 的插值表单式
自己传入的参数是第二个形参 */
new Vue({
el: '#app',
// 过滤器
filter: {
formatDate(timestamp) {
let dt = new Date(timestamp)
let y = dt.getFullYear()
let m = dt.getMonth() + 1
let d = dt.getDate()
return `${y}-${toDouble(m)}-${toDouble(d)}`
}
}
})
过滤器的串联
上一个过滤器的输出, 作为下一个过滤器的输入
- 原理
<p id="app">{{item.status | form1 | form2}}p>
- 代码
new Vue ({
el: '#app',
filters: {
form1(status) {
xxxxx
return t
},
// 形参接收上一个过滤器函数 return 的值
form2(t) {
xxxx
return 结果
}
}
})
侦听器 (ref & $refs)
某些复杂的开发场景: 需要开发者能够监听到数据的变化并执行特定的逻辑。
ref : 属性有点类似之前所学的 html 中的 id 属性，要保证其具有唯一性，否则将出现被覆盖的现象。
**$refs : **是 Vue 中专门用来获取原生 DOM 节点的实例属性，它专门用于获取具有 ref 属性的节点
<div id="app">
<ul>
<li>
姓名: <input type="text" v-model="username" />
li>
<li>
密码: <input type="password" ref="password" v-model="password" />
li>
<li><input type="button" value="提交" />li>
ul>
div>
<script>
// 实例化
var vm = new Vue({
el: "#app",
data: {
username: '',
password: ''
},
watch: {
// 坚挺 password 数据的变化
password: function (newValue, oldValue) {
var reg = /\d{6}/;
// 检验密码
if(!reg.test(newValue)) {
// 修改输入框颜色
return this.$refs['password'].style.border = '1px solid red';
}
// 恢复输入框颜色
this.$refs.password.style.border = '';
}
}
});
script>
过渡 & 动画
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果，用来增强用户体验：
在 CSS中自动应用，Vue会自动为元素添加类名:
- css 部分
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
transition: 1s;
opacity: 1;
}
/* .active {
width: 240px;
height: 300px;
background-color: red;
} */
.v-enter {
opacity: 0;
width: 400px;
}
.v-enter-to {
opacity: 1;
}
.v-enter-active {
transition: 10s;
}
.v-leave {
opacity: 1;
}
.v-leave-to {
opacity: 0;
}
.v-leave-active {
transition: 10s;
}
style>
- html 和 js
<div id="app">
<button @click="seen = !seen">切换button>
<transition>
<div class="box" v-if="seen">div>
transition>
div>
<script src="./libs/vue.js">script>
<script>
const vm = new Vue({
el: '#app',
data: {
seen: false
}
})
script>