目录
按钮事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id ="app">
<button @click="count += 1">点击count = {{ count }}</button>
</div>
<script type="text/javascript"">
new Vue({
el: '#app',
data(){
return{
count:1
}
}
})
</script>
</body>
</html>输入框案例（计算属性）
方法一：插值语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id = "root">
姓：<input type="text" placeholder="请输入姓" v-model="firstname"><br /><br />
名：<input type="text" placeholder="请输入名" v-model="lastname"><br /><br />
姓名：<span>{{firstname}}'-'{{lastname}}</span>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#root",
data:{
firstname:'张',
lastname:'三'
}
})
</script>
</html>
方法二：methods方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id = "root">
姓：<input type="text" placeholder="请输入姓" v-model="firstname"><br /><br />
名：<input type="text" placeholder="请输入名" v-model="lastname"><br /><br />
姓名：<span>{{fullName()}}</span>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#root",
data:{
firstname:'张',
lastname:'三'
},
methods:{
fullName(){
return this.firstname + '-' + this.lastname//this是指这整个vue
}
}
})
</script>
</html>
方法三：计算属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id = "root">
姓：<input type="text" placeholder="请输入姓" v-model="firstname"><br /><br />
名：<input type="text" placeholder="请输入名" v-model="lastname"><br /><br />
姓名：<span>{{fullname}}</span><br /><br />
测试: <input type="text" v-model="x">
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
el:"#root",
data:{
firstname:'张',
lastname:'三',
x:'hello',
},
computed:{//计算属性
fullname:{
//当有人读取fullname时，get就会被调用，且返回值就作为fullname的值
get(){
return this.firstname+'-'+this.lastname//此处的this是vm
},
//当fullname被修改时，set调用
set(value){
console.log('set', value)
const arr = value.split('-')
this.firstname = arr[0]
this.lastname = arr[1]
}
}
}
})
</script>
</html>
简写：只读不改可简写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id = "root">
姓：<input type="text" placeholder="请输入姓" v-model="firstname"><br /><br />
名：<input type="text" placeholder="请输入名" v-model="lastname"><br /><br />
姓名：<span>{{fullname}}</span><br /><br />
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
el:"#root",
data:{
firstname:'张',
lastname:'三',
},
computed:{
fullname(){
return this.firstname+'-'+this.lastname
}
}
})
</script>
</html>
方法四：监视函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id = "root">
姓：<input type="text" placeholder="请输入姓" v-model="firstname"><br /><br />
名：<input type="text" placeholder="请输入名" v-model="lastname"><br /><br />
姓名：<span>{{fullname}}</span>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#root",
data:{
firstname:'张',
lastname:'三',
fullname:'张-三'
},
watch: {
firstname(val) {
setTimeout(() => { //定时器不是vue管理的函数，故可使用箭头函数
this.fullname = val+'-'+ this.lastname
}, 1000);//watch实现延迟疫苗响应
},
lastname(val){
this.fullname = this.firstname+'-'+val
}
},
})
</script>
</html>
监视案例watch（监视属性）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id = "root">
<h2>today the weather is {{info}}</h2>
<button @click='changeweather'>切换天气</button>
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
el:"#root",
data:{
ishot:true
},
computed: {
info() {
return this.ishot ? 'hot':'cool'
}
},
methods: {
changeweather() {
this.ishot = !this.ishot
}
},
// watch: {
// ishot:{
// immediate:true, // 初始化时让handle调用一下
// handler(newvalue, oldvalue){
// console.log(newvalue, oldvalue)
// }
// }
// },
})
vm.$watch('ishot',{
immediate:true,
handler(newvalue, oldvalue){
console.log(newvalue, oldvalue)
}
})
</script>
</html>
深度监视
watch: {
ishot:{
handler(newvalue, oldvalue){
console.log(newvalue, oldvalue)
}
},
//监视多级结构中某个属性的变化
'numbers.a':{
handler(){
console.log('aaaa')
}
},
//监视多级属性中所有元素的变化
numbers:{
deep:true,//深度检测，不论是改变a还是b均视为numbers改变
handler(){
console.log('numbers变了')
}
}
}简写形式
// watch: {
// ishot:{
// // immediate:true,//初始化就调用handler
// // deep:true,//深度监视
// //以上两者均不需要可使用简写形式
// handler(newvalue, oldvalue){
// console.log(newvalue, oldvalue)
// }
// }
// },
watch: {
ishot(newValue, oldValue) {
console.log(newValue, oldValue)
}
},
或者
vm.$watch('ishot',function(newvalue, oldvalue){
console.log(newvalue, oldvalue)
})添加对象属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>条件渲染</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id = "root">
<h1>人员信息</h1>
<button @click='add'>点击添加性别属性</button>
<h2>姓名：{{student.name}}</h2>
<h2>年龄：{{student.age}}</h2>
<h2 v-if='student.sex'>性别：{{student.sex}}</h2>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#root',
data:{
keyword:'',
student:{
id:'001',
name:'wjk',
age:24
},
},
methods: {
add() {
Vue.set(this.student,'sex','man')
//this.$set(this.student,'sex','man')两种方式均可
}
},
})
</script>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
