vue其他语法：
1. 事件监听：
v-on的基础语法：
v-on:监听的事件=“事件函数”
语法糖：上边格式可以改为：@监听的事件=“事件函数”
传递参数的问题：
1.当我们不需要传递参数的时候，后面函数的括号（）可以不用写，但是注意，既是不写（），也会默认传递一个原生事件event对象
2.当我们传递多个参数的时候，也需要传递原生事件event对象时，可以使用$event来作为形参传递。
实例：
<div id="app">
<!--不传递参数：默认传递一个原生的event的对象-->
<button v-on:click="button1">点击我1</button>
<!--传递二个参数,如果也要传递event原生事件，则需要$event传递-->
<button @click="button2('张三',$event)">点击我2</button>
</div>
<script src="../js/vue.js"></script>
<script>
const vue = new Vue({
el: "#app",
data: {
},
methods:{
button1: function (event){
console.log(event);
console.log("button1被点击了")
},
/*函数的简写方式，等同于上边*/
button2(name,event){
console.log(name);
console.log(event);
console.log("button2点击了")
}
}
})
</script>
v-on的修饰符：
1.stop：停止冒泡，当前事件的父级还有事件时，可以使用这个修饰符，使父级事件不触发
2.pervent：阻止默认事件，例如：当我门使用form表单提交时，可以点击submit按钮提交，当我们不想这样提交，想要触发事件，自己调用函数提交时，可以使用perevent修饰符，阻止这个按钮的默认事件。
3.{keyCode | keyAlias}：键修饰符，指定那个键点击了，触发事件。例如：@keyup.键=“事件”：当指定的键抬起时，触发事件
4.once：函数只触发一次
2. v-if、v-else-if、v-else
这三个指令和我们再js中使用的if、else-if、else很类似，在vue中，这三个可以根据表达式的结果决定是否渲染、销毁元素或组件。当表达式为false时，对应的标签根本不会出现在DOM中。
<div id="app">
<span v-if="type">
<label>用户名</label>
<input type="text" placeholder="请输入用户名" key="username-input"/>
</span>
<span v-else-if="!type">
<label>邮箱</label>
<input type="text" placeholder="请输入邮箱" key="email-input"/>
</span>
<button @click="checkType">切换类型</button>
</div>
<script src="../js/vue.js"></script>
<script>
const vue = new Vue({
el: "#app",
data: {
type: true
},
methods:{
checkType(){
this.type = !this.type;
}
}
})
</script>
注意：
1.v-if、v-else-if、v-else这三个的表达式中可以直接从data中获取值，不需要使用{ {}}，直接使用即可。
2.在上边的案例中，当我们在输入框输入文本之后，点击切换类型，发现文本内容没有消失，原因：vue在考虑性能时，会尽量的使用已经创建好的元素，而不会创建新的元素，在案例中，vue发现原来的input不用了，而又要使用另一个input，这时vue就会把原来的input作为else中的input使用。 解决办法：在不想让vue重复使用的元素上，添加一个属性key，key的值只要不一样，就不会重复使用，当一样时，还是会重复使用
3. v-show
v-show和v-if都是一样的作用，都是决定元素或者组件是否渲染和消除用的，也是需要表达式的。
和v-if的区别：
v-if是当表达式不成立的时候，就根本不会创建元素
v-show是表达式不成立的时候，会使用display属性设置为none而已。
如何选择：
多次切换，使用v-show
一次切换，使用v-if
使用用法和v-if相同，不演示
4.v-for遍历
遍历数组：
<div id="app">
<ul>
<!--不需要索引,在需要使用的地方，可以使用{
{music}}，或者使用bind的方式都可以-->
<li v-for="music in musics">{
{music}}</li>
<li>======================================</li>
<!--需要索引，index就表示了索引，从0开始-->
<li v-for="(music,index) in musics">{
{index+music}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const vue = new Vue({
el: "#app",
data: {
musics: ['逃爱','四季于你','大天棚','错乱时空']
}
})
</script>
遍历对象：
<div id="app">
<!--遍历数组-->
<ul v-for="person in persons">
<!--遍历集合：这个地方的person是上边遍历之后的每个person，还可以继续遍历-->
<li v-for="(value,key,index) in person">{
{index}}{
{key}}{
{value}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const vue = new Vue({
el: "#app",
data: {
persons: [
{
name: "张三",
age: 20
},
{
name: "李四",
age: 25
},
{
name: "王五",
age: 21
}
]
}
})
</script>
我们知道vue是一个响应式的框架，后台数据改变，前台自动改变，对应的vue也有一些操作数组的响应式方法，使用这些方法，前台也会直接改变：
1.push():向数组末尾添加元素
2.pop():删除数组最后一个元素
3.unshift()：向数组开始位置添加元素
4.shift():删除第一个元素
5.sort():对数组排序
6.reverse();反转数组中的数据
splice()：神技，可以对数组增删改！！！
增加：splice(起始索引,1,‘增加的数据’)
删除：splice(起始索引)从起始索引开始删除剩余元素
具体删除：splice(起始索引，删除几个)
修改：splice(修改元素的索引,1,修改的内容)
注意：使用：数组名[]方式，不是响应式的，不能实时更新！
5.v-model绑定表单操作
一般我们可以通过事件，手动的提交表单，那么我们怎么可以从客户输入的表单中，获取到用户输入的值呢？可以使用v-model来双向绑定表单和我们的data
<div id="app">
<!--v-bind:value="message" @input="message = $event.target.value"-->
<input type="text" v-model="message">
<textarea v-model="message">
</textarea>
<span>{
{message}}</span>
</div>
<script src="../js/vue.js"></script>
<script>
const vue = new Vue({
el: "#app",
data: {
message: ''
}
})
</script>
上边绑定的表单input标签，使用的v-model，其实v-model是一个语法糖，相当于两个标签的简写：
v-bind:value=“message” ：标签的value和我们data中的message绑定
@input="message = $event.target.value“：监听input标签，当有数据输入的时候，会把data中的message的值，变为用户输入的值。
这就是双向绑定。
v-model绑定redio：
<div id="app">
<input type="radio" name="gender" value="男" v-model="gender">男
<input type="radio" name="gender" value="女" v-model="gender">女
<span>性别是：{
{gender}}</span>
</div>
<script src="../js/vue.js"></script>
<script>
const vue = new Vue({
el: "#app",
data: {
gender: '男'
}
})
</script>
v-model绑定checkbox
<div id="app">
<input type="checkbox" name="type" value="篮球" v-model="type">篮球
<input type="checkbox" name="type" value="足球" v-model="type">足球
<input type="checkbox" name="type" value="乒乓球" v-model="type">乒乓球
<input type="checkbox" name="type" value="排球" v-model="type">排球
<span>爱好有：{
{type}}</span>
</div>
<script src="../js/vue.js"></script>
<script>
const vue = new Vue({
el: "#app",
data: {
type: []
}
})
</script>
注意：当是checkbox类型时，这个类型在data中需要是一个数组，当我们选中的时候，会自动把我们选中的value放入到数组中。
v-model绑定select
<div id="app">
<select v-model="type">
<option value="">--请选择--</option>
<option value="篮球">篮球</option>
<option value="篮球">足球</option>
</select>
<span>选择的是：{
{type}}</span>
</div>
<script src="../js/vue.js"></script>
<script>
const vue = new Vue({
el: "#app",
data: {
type: ''
}
})
</script>
在vue官网还有一个概念叫做值绑定，其实也就是当我们data中有值的时候，会自动的显示，用的也就是v-bind的属性。只要我们的data中有值会自动的回显在页面端。
v-model的修饰符：
1.lazy：跟懒加载差不多，像上边的案例中，我们的input输入内容，会一个字一个字的回显在旁边的span标签中，这样有点浪费性能，我们可以设置lazy修饰符，在输入完成，敲回车或者光标移除之后，才会绑定。
2.number修饰符：即使我们前台写的input类型是number，传递到data中，也还是string类型，所以我们可以使用这个修饰符，让绑定值的时候，转为number
3.trim修饰符：取出多余的空格。