前端-vue组件
文章目录
一、vue生命周期
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
{{ num }}
<br>
<button @click="add">+</button>
</div>
</body>
<script>
let app = new Vue({
el : '#app',
data:{
num : 10
},
// 组件创建之前
beforeCreate() {
console.log('组件创建之前')
},
// 组件创建完成
created() {
console.log('组件创建完成')
},
// 组件挂载之前
beforeMount() {
console.log('组件挂载之前')
},
// 组件挂载完成
mounted() {
console.log('组件挂载完成')
},
// 组件更新之前
beforeUpdate() {
console.log('组件更新之前')
},
// 组件更新完成
updated() {
console.log('组件更新完成')
},
// 组件销毁之前
beforeDestroy() {
console.log('组件销毁之前')
},
// 组件销毁完成
destroyed() {
console.log('组件销毁完成')
},
methods: {
add(){
this.num++
}
},
})
// 销毁当前实例
app.$destroy()
</script>
</html>
二、v-model修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-model输入数据会绑定到属性上，lazy当输入框失去焦点时才会进行绑定 -->
<input type="text" v-model.lazy="lazyStr">
<br>
{{ lazyStr }}
<br>
<!-- 输入数据会自动转换为number，可以直接进行运算 -->
<input type="text" v-model.number="numberStr">
<br>
{{ numberStr + 1}}
<br>
<!-- 输入数据会自动去掉前后空格 -->
<input type="text" v-model.trim="trimStr">
<br>
{{ trimStr }}
</div>
</body>
<script>
let app = new Vue({
el : '#app',
data : {
lazyStr : '',
numberStr : '',
trimStr : ''
}
})
</script>
</html>
三、vue的数组操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<!-- 遍历userArr的属性 -->
<p v-for="(item,index) in userArr">
{{item.userId}},{{item.userName}},{{item.userSex}}
</p>
<button @click="clear">清空</button>
</div>
</body>
<script>
let app = new Vue({
el: '#app',
data: {
userArr: [
{
userId: 1,
userName: '小明',
userSex: '男'
},
{
userId: 2,
userName: '小红',
userSex: '女'
},
{
userId: 3,
userName: '小丽',
userSex: '女'
}
]
},
methods: {
clear(){
// 这个方法在vue里不能清空数组
// this.userArr.length = 0
this.userArr.splice(0,this.userArr.length)
}
},
})
// 由于JS语法的限制，有时vue不能监听到数组的变化，所以在使用vue操作数组时，注意要使用vue提供的数组操作方法
// push pop shift unshift splice sort reverse
</script>
</html>
四、表单绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<h1>注册</h1>
<form>
<label>用户名:</label>
<input type="text" v-model="myForm.userName">
<br>
<label>密码：</label>
<input type="password" v-model="myForm.password">
<br>
<label>确认密码：</label>
<input type="password" v-model="myForm.beginpassword">
<br>
<!-- 单选框 -->
<label>性别：</label>
<input type="radio" v-model="myForm.sex" value="0">男
<input type="radio" v-model="myForm.sex" value="1">女
<br>
<!-- 多选框 -->
<label>爱好：</label>
<input type="checkbox" value="0" v-model="myForm.like">读书
<input type="checkbox" value="1" v-model="myForm.like">体育
<input type="checkbox" value="2" v-model="myForm.like">打游戏
<br>
<!-- 下拉框 -->
<label>国籍：</label>
<select v-model="myForm.nationality">
<option value="0">中国</option>
<option value="1">美国</option>
<option value="2">英国</option>
</select>
<br>
<!-- 文本区域 -->
<label>个人简介：</label>
<br>
<textarea cols="30" rows="5" v-model="myForm.synopsis"></textarea>
<br>
<input type="button" value="提交" @click="handler">
</form>
</div>
</body>
<script>
let app = new Vue({
el: "#app",
data: {
myForm: {
userName: "",
password: "",
beginpassword: "",
sex: 0,
like: [0, 1, 2],
nationality: 0,
synopsis: ""
}
},
methods: {
handler: function () {
console.log(this.myForm.userName)
console.log(this.myForm.password)
console.log(this.myForm.beginpassword)
console.log(this.myForm.sex)
console.log(this.myForm.like)
console.log(this.myForm.nationality)
console.log(this.myForm.synopsis)
}
}
})
</script>
</html>
五、过滤器
1.全局过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<!-- 要渲染的数据 | 过滤器名 -->
<!-- 渲染完的数据表示已经通过过滤器的筛选 -->
<!-- 串联的过滤器直接拼接在后面即可，一般用于过滤器需要处理多个函数时 -->
{{ price | add1 | add2 }}
<br>
{{ num1 | dosomethimg(5,20) }}
<br>
{{ num2 | dosomethimg(15,20) }}
</div>
</body>
<script>
// 过滤器是对即将要显示的数据做进一步的筛选，然后进行显示，过滤器并不会改变原来的数据，只是会在原数据的基础上产生新的数据
// 注册全局过滤器时，要在数据前加上大写vue，而且必须在vue实例之前
// filter有2个参数，第一个参数是过滤器名，第二个参数是过滤器的处理函数,处理函数也有一个参数，表示要过滤的数据
Vue.filter('add1', function (value) {
return '￥' + value
})
// 过滤器串联
Vue.filter('add2', function (value) {
return value + '元'
})
// 过滤器传参，传递的参数需要写在处理函数中过滤数据的后面
Vue.filter('dosomethimg', function (value, p1, p2) {
if (p1 < 10) {
return value + p1
} else {
return value + p2
}
})
let app = new Vue({
el: '#app',
data: {
message: '全局过滤器',
price: 10,
num1: 5,
num2: 12
}
})
</script>
</html>
2.本地过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
{{ message | Reverse }}
<br>
{{ message | Length }}
</div>
</body>
<script>
let app = new Vue({
el : '#app',
data : {
message : '本地过滤器'
},
// 本地过滤器写在vue实例中，与data同级
filters : {
// 倒序功能
Reverse : function(value){
// 判断传进来的value是否为空
if(!value){
return ''
}
// 将value的值转成字符串，在转成字符串数组，调用反转功能，最后再转回字符串
return value.toString().split('').reverse().join('')
},
// 返回字符串的长度
Length : function(value){
return value.length
}
}
})
</script>
</html>
六、vue组件
1.vue组件模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<mycomponent></mycomponent>
</div>
<!-- 组件模板，body部分 -->
<template id="mytemplate">
<div>
<h1>这是一个布局组件，现在使用组件模板渲染它</h1>
<button @click="reduce">-</button> {{ num }} <button @click="add">+</button>
</div>
</template>
</body>
<script>
let obj = {
// 组件模板，实例部分，绑定body部分的template标签
template : '#mytemplate',
// 数据部分，data必须是一个函数，该函数返回一个对象
data() {
return {
num : 1
}
},
methods: {
add(){
this.num++
},
reduce(){
this.num--
}
},
}
let app = new Vue({
el : '#app',
components : {
mycomponent : obj
}
})
</script>
</html>
2.vue全局组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<mycomponent></mycomponent>
</div>
</body>
<script>
// 组件是Vue中最重要的组成部分，官方文档定义组件是可复用的vue实例
// 注册全局组件
// 1.使用Vue.component注册全局组件，需要提供2个参数，组件的标签和组件构造器
// 2.Vue.component内部会调用组件构造器，创建组件实例
// 3.将组件挂载到某个vue实例下
// 由于组件是可以复用的vue实例，所以它们也可以有data,computed,methods
Vue.component('mycomponent',{
template :
// 标签部分，模板字符串
`
<div>
<h1>这是一个全局组件</h1>
<button @click="reduce">-</button>{{ num }}<button @click="add">+</button>
</div>
`,
// 数据部分
data() {
return {
num : 1
}
},
// 方法部分
methods: {
add(){
this.num++
},
reduce(){
this.num--
}
},
})
let app = new Vue({
el : '#app',
data : {
}
})
</script>
</html>
3.vue局部组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<mycomponent></mycomponent>
</div>
</body>
<script>
// 注册局部组件
let obj = {
template:
// 标签部分
`
<div>
<h1>这是一个局部组件</h1>
<button @click="reduce">-</button>{{ num }}<button @click="add">+</button>
</div>
`,
// 数据部分
data() {
return {
num: 1
}
},
// 方法部分
methods: {
add() {
this.num++
},
reduce() {
this.num--
}
}
}
let app = new Vue({
el: '#app',
// 组件的集合，里面存放需要渲染的所有组件
components: {
// 左边是组件名（标签名），右边是接收局部组件的变量
mycomponent: obj
}
})
</script>
</html>
本文含有隐藏内容，请 开通VIP 后查看