可以看到@click使用vue中method的函数时,如果没有参数,可以简写,去掉(), 如果不写参数,传递进去的是事件本身event , text三中通过event拿到了标签的文本内容
@click.prevent阻止事件的默认行为 <a href="http://www.likecs.com/http:" @click.prevent="text8">百度一下</a> <!-- 阻止事件的默认行为 --> 监听某个按键的点击事件 <input type="text" @keyup.enter="text9"> <!-- @keyup.13(名字) 监听某一个键的点击事件 --> 收集表单数据使用vue将用户填入表单中的数据收集起来, 收集到哪里去? 其实是收集到 vue的data块中的属性中
其实就是在html使用v-model暴力绑定dom监听, 将单选框,输入框,多选框中用户输入进去的内容和data中的属性关联起来
input,textarea 等输入框,收集起来的值就是用户输入进去的值
单选框 radio ,多选框 checkbox 等选择框,收集起来的值的 html中的value属性的值
<h1>表单中最终提交给后台的是 value值</h1><br> <h2> 使用v-model实现表单数据的自动收集 </h2> <form action="/XXX" @submit.prevent="handleSubmit" ><!-- 阻止表单的默认自动提交事件 --> <span>用户名:</span> <input type="text" v-model="username"><br> <span>密码</span> <input type="password" v-model="pwd" ><br> <span>性别</span><br> <input type="radio" value="女" v-model="sex"> <label for="female">女</label><br> <input type="radio" value="男" v-model="sex"> <label for="male">男</label><br><br> <span>爱好</span><br> <input type="checkbox" value="basket" v-model="likes"> <label for="basket">篮球</label> <input type="checkbox" value="foot" v-model="likes"> <label for="foot">足球</label> <input type="checkbox" value="pingpang" v-model="likes"> <label for="pingpang">乒乓球</label><br><br> <span>城市</span><br> <select v-model="cityId"> <option value="">未选择</option> <option :value="city.id" v-for="(city,index) in allCitys" :key="index">{{city.name}}</option> </select> <span>介绍:</span> <textarea cols="30" rows="10" v-model="dec"></textarea> <input type="submit" value="注册"><br> </form> </div> <script type="text/javascript" src="http://www.likecs.com/js/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el:'#test', data:{ username:'', pwd:'', sex:'女', likes:['foot'], allCitys:[{id:1,name:'北京'},{id:2,name:"山东"},{id:3 ,name:"青岛"}], cityId:'3' /* 默认让 3被选中*/, dec:"哈哈" }, methods:{ handleSubmit(){ alert(this.username+this.pwd); alert(this.sex); } } }) vue的生命周期vue对象在创建初始化的过程中一次执行如下声明周期相关的方法, 根据这个特性,通常把加载进入一个新的页面中时去发送ajax请求的方法放到mounted(){},收尾工作放在beforeDestroy(){}
var vm = new Vue({ el: "#text", data: {}, beforeCreate() { // 创建之前回调 console.log("beforeCreate"); }, created() { // 创建之后回调 console.log("created"); }, beforeMount() { console.log("beforrMount"); }, // todo 常用, 异步操作, 比如发起ajax请求获取数据, 添加定时器 mounted() { // 初始化显示之后会立即调用一次 console.log("mounted"); this.intervalId = setInterval(() => { console.log("干掉vm之后, 定时器还在跑, 内存泄露了"); this.isShow = !this.isShow; }, 1000); /* 如果下面不使用箭头回调函数, this就是window, 而不是vm * setInterval(() => { this.isShow= !this.isShow; },1000); * */ }, // 更新阶段 beforeUpdate() { //更新阶段之前回调 console.log("beforeUpdate"); }, updated() { // 更新阶段之后回调 console.log("updated"); }, // 死亡阶段 // todo 常用 收尾工作 beforeDestroy() { // 死亡之前回调一次 console.log("beforeDestroy "); clearInterval(this.intervalId); }, destroyed() { console.log("destroyed"); }, methods: {} } }); ES的语法糖,箭头函数比如在设置定时器时, 定时器中需要对vue的属性进行操作,在定时器的代码块中this指的是定时器对象,es6的箭头语法解决就这个问题, 在箭头函数中this没有的属性,会到外层的vue中来找
this.intervalId = setInterval(() => { console.log("干掉vm之后, 定时器还在跑, 内存泄露了"); this.isShow = !this.isShow; }, 1000); 动画按照vue的下面的几步要求, vue 会给目标元素添加或者移除特定的 css,实现动画的效果