html代码
//所有内容都要div里进行
<div id="app">
<h1>{{msg}}</h1>//data定义数据要解析到页面，需要在html页面写双话括号接收
</div>
js代码
<script scr=''></script>引入vue.js文件
<script>
Vue是构造函数需要new
new Vue({
el:"#app", //用于挂载要管理的元素
data:{ //定义数据
msg:'你好',
}
//定义方法
methods:{
}
})
</script>
简单指令
v-bind:属性想使用动态变量就需要添加 简写为符号 冒号: v-on：事件绑定例如：click点击事件 简写@click
双向绑定指令v-model：
- v-model 是一种语法糖 来实现双向绑定数据
- v-model 可以在不操作Dom的条件下快速获取表单数据
- 双向绑定data中的值,可以在input、textarea、select等使用，div等不可以
- .lazy 在表单事件中 不会时时更新，只会在失去焦点的时候更新
条件渲染指令
- v-if
- v-show
- if的条件为false的时候会把整个元素在Dom中删除
- v-show 只是让元素做一层display:none 隐藏元素
- v-if配套指令
- v-else-if v-else
- 与原生同理
列表渲染指令v-for
类似与for in 只要用了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>
