vue的使用
使用vue需引入官方的vue.js
然后在new一个vue，例如：
new Vue({
el:'#app',
data:{
},
methods:{
}
})
复制代码
el为挂载点绑定dom元素，data为数据，methods为写方法的地方
简单指令
v-bind:属性想使用动态变量就需要添加 简写为符号 冒号:
v-on：事件绑定例如：click点击事件 简写@click
事件修饰符：
阻止默认事件 @click.prevent 原生event.preventDefault
阻止冒泡 @click.stop
以捕获模式触发当前的事件处理函数 @click.capture
绑定的事件只触发一次 @click.once
只有在event.target是当前元素自身触发事件处理函数 @click.self
按键修饰符:
@keyup.esc 这样可以绑定键盘上的esc键
在键盘事件后面跟上键盘上的名字即可
双向绑定指令v-model：
v-model 是一种语法糖 来实现双向绑定数据
v-model 可以在不操作Dom的条件下快速获取表单数据
双向绑定data中的值,可以在input、textarea、select等使用，div等不可以
v-model指令的修饰符
是为了方变对用户输入的内容进行处理
.lazy 在表单事件中 不会时时更新，只会在失去焦点的时候更新
条件渲染指令
v-if
v-show
if的条件为false的时候会把整个元素在Dom中删除
v-show 只是让元素做一层display:none 隐藏元素
v-if配套指令
v-else-if v-else
与原生同理
列表渲染指令v-for
使用方法： 类似与for in
index就是索引
只要用了v-for这个指令 在后面一定要绑定一个：key，而且尽量把id作为v-for 循环 里面有两项 item表示数组的每一项 index表示数组的索引 循环的时候需要加key 最好使用对象里面的属性为key值 没有再使用index
示例
输入email 和 密码 要求按enter可以alert出邮箱加密码 按enter非空校验 email必要 要有@和.
代码展示：
<div id="app">
邮箱：<input type="text" v-model="user" >
密码：<input type="password" v-model="pwd">
<button @keyup.enter="keyFn">提交</button>
</div>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data:{
user:'',
pwd:''
},
methods:{
keyFn(e){
if(!this.user.trim()||!this.pwd.trim()){
alert('邮箱或密码不能为空');
return
}
if(this.user.indexOf('@')==-1||this.user.indexOf('.')==-1){
alert('邮箱格式不正确')
return
}
alert(`您的邮箱是${this.user}密码是：${this.pwd}`)
}
}
})
</script>
