2021.11.19
处理用户输入
<!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" type="text/javascript"></script>
</head>
<body>
<div id="app">
{{message}}--{{age}}
<input type="button" v-on:click="reverse($event)" value="反转消息">
<input v-model='message'>
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
message:"Hello World!",
age:'123456'
},
methods:{
reverse:function(e){
this.message=this.message.split('').reverse().join('')
console.log(e)
}
}
})
</script>
</body>
</html>
v-on方法是DOM原生态方法，如果括号内没有参数可以省略
v-model数据绑定，双向绑定，绑定一个元素且元素必须有value值，以此题为栗子，当input内的值改变时，message显示的值会随之改变
$event事件对象，调用时我们能返回window.event的全局
二、表单输入绑定
<!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">
<script src="vue.js" type="text/javascript"></script>
<title>Document</title>
</head>
<body>
<div style="margin-top: 20px" id='app'>
<input type='checkbox' id='jack' value='jack' name='1' v-model='checked'>
<label for='jack'>jack</label>
<input type='checkbox' id='john' value='john' name='2' v-model='checked'>
<label for='john'>john</label>
<input type='checkbox' id='mike' value='mike' name='3' v-model='checked'>
<label for='mike'>mike</label><br>
<span>Checked names:{{checked}}</span><br>
<input type="radio" id='two' value='two' v-model='radio'>
<label for='two'>two</label>
<input type="radio" id='three' value='three' v-mode='radio'>
<label for="three">three</label><br>
<span>Radio name:{{radio}}</span><br>
<input type="button" value="提交" v-on:click='submit'></input>
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
checked:['mike'],
radio:"two"
},
methods:{
submit:function(){
console.log(this.checked)
}
}
})
</script>
</body>
</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">
<script src="vue.js" type="text/javascript"></script>
<title>Document</title>
</head>
<body>
<div id='app'>
<ol>
<todo-item v-for='item in groceryList' v-bind:todo='item' v-bind:key='item.id'>
</todo-item><!--自定义标签-->
</ol>
</div>
<script type="text/javascript">
Vue.component('todo-item',{
props:['todo'],//自定义一个属性todo
template:'<li>{{todo.text}}</li>'//template模板，此模板的意思是添加列表项
})
var app=new Vue({
el:'#app',
data:{
groceryList:[
{id:0,text:"蔬菜"},
{id:1,text:"奶酪"},
{id:2,text:"随便吃"},
]
}
})
</script>
</body>
</html>