v-model
v-model：（双向数据绑定）
1>当数据发生变化的时候，试图也就发生变化
2>当时图发生变化的时候，数据也更这同步变化
<input v-model="hello">
<div>{{hello}}</div>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
hello:""
}
})
</script>
v-on
v-on用法：
1><input type=‘button' v-on:click='num++'/>
2>简写：v-on ---> @
<input type=‘button' @click='num++'/>
3>直接绑定函数名称
<button v on:click='say'>Hello</button>
4>调用函数
<button v on:click='say()'>Say hi</button>
事件函数参数传递： 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数
如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event
<button v-on:click='say("hi",$event)'>Say hi</button>
示例代码：
<button v-on:click="handle1">点击1</button>
<button v-on:click="handle2(12,$event)">点击2</button>
</div>
<script>
var vue=new Vue({
el:"#app",
data:{
},
methods:{
handle1:function (event) {
alert(event.target.innerHTML);
},
handle2:function (p1,event) {
alert(p1+event.target.innerHTML);
}
}
})
</script>
事件修饰符：
.stop阻止冒泡（阻止父级dom节点的事件被触发）
<a v-on:click.stop= "handle"> 跳转 </a>
.prevent阻止默认行为（a不会触发跳转） 例如：
<a v-on:click.prevent="handle"> 跳转 </a>
按键修饰符：
在监听键盘事件时，我们经常需要检查详细的按键。
Vue允许 v-on 在监听键盘事件时添加按键修饰符：
.enter回车键
<input v-on:keyup.enter='submit'>
.delete删除键与backspace键：
<input v-on:keyup.delete='handle'>
实例代码：
<div id="app">
弹出提交：<input v-on:keyup.enter='submit'>
弹出删除：<input v-on:keyup.delete='delete1'>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
hello:"<h1>Hello Vue</h1>",
num:0,
},
methods:{
submit:function () {
alert("提交");
},
delete1:function () {
alert("删除");
}
}
})
</script>
v-bind
v-bind指令被用来相应地更新 HTML 属性
v-bind缩写 ：'冒号：'
v-bind语法：
<a v-bind:href="url">{{targ}}</a>
缩写形式：
<a :href="url">{{targ}}</a>
示例代码：
<div id="app">
<!-- 标准形式 -->
<a v-bind:href="url">{{targ}}</a>
<!-- 简写形式 -->
<a :href="url">{{targ}}</a>
<button @click="handel">修改跳转目标</button>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
targ:"跳转百度",
url:"https://www.baidu.com"
},
methods:{
handel:function () {
if (this.targ=="跳转百度"){
this.targ="跳转酸奶yogo掘金地址";
this.url="https://juejin.cn/user/1746461753618696";
}else {
this.targ="跳转百度";
this.url="https://www.baidu.com"
}
}
}
})
</script>
v-bind实现双向数据绑定：
<div id="app">
<input type="text" v-bind:value="qwel" @input="handel">{{val}}
<input type="text" v-bind:value="qwe2" @input="val2=$event.target.value">{{val2}}
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
qwe:"",
qwe2:"",
},
methods:{
handel:function (event) {
this.val=event.target.value;
}
}
})
</script>
style样式绑定：：
<div v-bind:style="[baseStyles, overridingStyles]"></div>
示例代码：
<div id="app2">
<div v-bind:style="styleObject">绑定样式对象</div>
<!-- CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) -->
<div v-bind:style="{ color: activeColor, fontSize: fontSize,background:'red' }">内联样式</div>
<!--组语法可以将多个样式对象应用到同一个元素 -->
<div v-bind:style="[styleObj1, styleObj2]">绑定样式数组</div>
</div>
<script>
new Vue({
el: '#app2',
data: {
styleObject: {
color: 'green',
fontSize: '30px',
background: 'red'
},
activeColor: 'green',
fontSize: "30px",
styleObj1: {
color: 'red'
},
styleObj2: {
fontSize: '30px'
}
}
})
</script>
v-if，v-else，v-else-if：多个元素 通过条件判断展示或者隐藏某个元素
示例：
<div id="app">
<input v-model="score">
<div v-if="score>=90">优秀</div>
<div v-else-if="score>=80&&score<90">良好</div>
<div v-else-if="score>=70&&score<80">一般</div>
<div v-else>较差</div>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
score:100,
}
})
</script>
v-show 和 v-if 的区别
v-show本质就是标签 display 设置为 none 控制隐藏 （性能较高）
v-if是动态的向DOM是内添加或者删除Dom元素
v-for遍历对象
<div v-for='(value, key, index) in object'></div>
v-if 和 v-for 结合使用
<div v-if='value==23' v-for='(value, key, index) in object'></div>
示例代码：
<div id="app2">
<ul>
<li v-for="(v,k,i) in people">{{v + '---' + k + '---' + i }}</li>
</ul>
<hr>
<ul>
<li v-if='v==23' v-for="(v,k,i) in people">{{v + '---' + k + '---' + i }}</li>
</ul>
</div>
<script>
var vue = new Vue({
el:"#app2",
data:{
people:{
name:"朱元铭",
age:18,
birthday:2004308,
}
}
})
</script>
表单操作（基于vue的表单操作）input单行文本 （绑定一个数据即可）
<input type="text" v-model="name">
radio单选框 （绑定同一个数据）
<input type="radio" id="male" value="1" v-model="gender">
<label for="male">男</label>
<input type="radio" id="female" value="2" v-model="gender">
<label for="female">女</label>
checkbox 多选框（绑定同一个数据 （数组类型））
<input type="checkbox" id="ball" value="1" v-model="like">
<label for="ball">篮球</label>
<input type="checkbox" id="sing" value="2" v-model="like">
<label for="sing">唱歌</label>
<input type="checkbox" id="code" value="3" v-model="like">
<label for="code">写代码</label>
