大家好,我是天空之城,今天给大家带来小福利,带你快速入门vue框架(3)
v-mode双向绑定,计算属性和监听器
v-mode双向绑定
作用:在input标签里输入内容,会改变script下面message里面的内容;同样修改script下面message里面的内容,也会改变message的内容,叫双向绑定
定义一个button里面的click事件setmsg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-model 双向绑定 -->
<input type="text" v-model:value='message'>
<p>{{ message }}</p>
<button @click='setmsg'>修改message</button>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'LG'
},
methods: {
setmsg: function(){
this.message = '大虎'
}
}
})
</script>
</body>
</html>
计算属性
示例,计算长方形的面积
value会控制input标签的显示,v-mode绑定value属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
<!-- <div id="app">
<span>长:</span>
<input type="text" v-model:value='length'>
<span>宽:</span>
<input type="text" v-model:value='width'>
<span>面积:</span>
<input type="text" v-model:value='area'>
</div>
<script>
new Vue({
el: '#app',
data: {
length: 0,
width: 0
},
computed: {
area: function(){
return this.length * this.width
}
}
})
</script> -->
<div id="app">
<span>省:</span>
<input type="text" v-model:value='province'>
<span>市:</span>
<input type="text" v-model:value='city'>
<span>区:</span>
<input type="text" v-model:value='district'>
<span>详细地址:</span>
<input type="text" v-model:value='address'>
</div>
<script>
new Vue({
el: '#app',
data: {
province: '',
city: '',
district: ''
},
computed: {
address: {
get:function(){
let result = ''
if (this.province) {
result = this.province + '省'
}
if (this.city) {
result += this.city + '市'
}
if (this.district) {
result += this.district + '区'
}
return result
},
set:function(value){
let result = value.split(/省|市|区/)
// console.log(result)
if (result && result.length > 0) {
this.province = result[0]
}
if (result && result.length > 1) {
this.city = result[1]
}
if (result && result.length > 2) {
this.district = result[2]
}
}
}
}
})
</script>
</body>
</html>
注意:set方法不能单独出现
监听属性
监听某个属性值,一旦发生改变时,就采取相应的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
<div id="app">
<span>搜索:</span>
<input type="text" v-model:value='keyword'>
<p>搜索结果:</p>
<p>{{ result }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
keyword: '',
result: ''
},
watch: {
keyword: function(newvalue, oldvalue){
// console.log(newvalue)
// console.log(oldvalue)
this.result = '加载中....'
// 定时器
setTimeout(()=>{
this.result = '搜索关键字:' + newvalue
}, 1000)
}
}
})
</script>
</body>
</html>
表单输入绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model:value.lazy='message'>
<textarea name="" id="" cols="30" rows="10" v-model='message'></textarea>
<br>
<input type="checkbox" value="jr" v-model='checkname'>
<span>jr</span>
<input type="checkbox" value="lg" v-model='checkname'>
<span>lg</span>
<input type="checkbox" value="coder" v-model='checkname'>
<span>coder</span>
<br>
<input type="radio" value="男" name="m" v-model='gender'>
<span>男</span>
<input type="radio" value="女" name="m" v-model='gender'>
<span>女</span>
<br>
<select v-model='selected'>
<option value="" disabled>请选择</option>
<option value="A">A</option>
<option value="B">B1</option>
<option value="C">C1</option>
<option value="D">D</option>
</select>
<input type="text" v-model.number='age'>
<input type="text" v-model.lazy='msg'>
{{ message }}
<!-- {{ checkname }} -->
{{ gender }}
{{ selected }}
{{ msg }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: '',
checkname: [],
gender: '',
selected: '',
age: 0,
msg: ''
}
})
</script>
</body>
</html>
组建的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button-counter></button-counter>
<!-- <button-counter></button-counter>
<button-counter></button-counter> -->
<!-- <HelloWorld></HelloWorld> -->
<!-- <hello-wo-rld></hello-wo-rld> -->
<!-- 局部组件 -->
<!-- <hello-world></hello-world> -->
<!-- <hello-juran></hello-juran> -->
<!-- <juran></juran> -->
</div>
<script>
// 组件的名字
// 在组件之间的使用的使用,使用驼峰就可以
// 全局组件
Vue.component('button-counter', {
template: `
<div>
<button @click="count+=1">{{ count }}</button>
<button @click="count-=1">-</button>
<h3>hello</h3>
<button @click="add">+</button>
<HelloWoRld></HelloWoRld>
</div>
`,
data: function(){
return {
count: 0
}
},
methods:{
add:function(){
this.count += 1
}
}
});
// 组件名字采用驼峰的方式来命名
Vue.component('HelloWoRld',{
template: `
<div>
<p>{{ msg }}</p>
</div>
`,
data: function(){
return {
msg: 'hello world'
}
}
})
// 普通的组件命名方式
// Vue.component('juran',{
// template: `
// <div>
// <p>{{ msg }}</p>
// </div>
// `,
// data: function(){
// return {
// msg: 'hello jr'
// }
// }
// })
// let HelloWorld = {
// data: function(){
// return {
// msg: 'hello world'
// }
// },
// template: '<div>{{ msg }}</div>'
// }
// let HelloJuran = {
// data: function(){
// return {
// msg: 'hello juran'
// }
// },
// template: '<div>{{ msg }}</div>'
// }
new Vue({
el: '#app',
data: {
name: '居然'
},
// 局部组件
// components:{
// 'hello-world': HelloWorld,
// 'hello-juran': HelloJuran
// }
})
</script>
</body>
</html>
<!--
组件的注意点:
data是一个函数
组件模板内容必须是单一根元素
组件模板可以模板字符串
组件的命名方式
短横线
驼峰
-->