一、el挂载点
- el是用来设置vue实例挂载的元素;
- vue会管理el选项命中的元素以及其内部的后代元素;
- 挂载元素时可以是有其他的选择器,但建议使用ID选择器:【el:"#app",】;
- 挂在元素可以使用其他的双标签,但不能使用html、body标签,建议使用div标签;
二、指令
1、v-text指令:<div v-text = "message+'新建内容!!'"></div>
- 作用:用于设置标签内容;
- 会替换标签内容;
- 支持表达式;
2、v-html指令:<div v-html = "content"></div>
- 作用:用于设置标签的innerHTML;
3、v-on指令:<input v-on:click = "事件名" /> == <input @click = "事件名">
- 作用:为元素绑定事件;
- v-on:click 就类似onclick;
- v-on:的语法糖是@;
- 对应事件写在methods中(computed计算属性:一般结合插值表达式:{{fullName}},不加()是因为它是属性,不是函数,默认自执行内部get函数),通过this使用data中的数据;关于事件名的使用如下:
-
<div id='app'> <button v-on:click='add(message)'>add事件</button>//正常传参 <button v-on:click='add()'>add事件</button>//加括号不传,形参为undefined <button v-on:click='add'>add事件</button>//不加括号,默认传入event对象(用于只需传一个参数,如果函数定义时不需要传参则可以简写如此) <button v-on:click='add($event)'>add事件</button>//使用$event,将event对象传入(用于传多个参数且需要传入event对象) </div> <script src="../vuejs/vue.js"></script> <script> const app = new Vue({ el:'#app', data:{ message:'hello', }, methods:{ add:function(name){ console.log(name); } } }) </script>
- 补充:event是浏览器dom对象;在vue中使用可以用 $event;
- ::事件绑定的事件写成函数调用的形式,可以传入参数;
- ::如果要传入参数,定义方法时要用形参接收参数;
- ::事件后面通过 . 修饰符可以添加限制;如@keyup.enter = "事件名",可以限制使用enter回车键触发事件;
- 其中:@click.native="事件名",触发原生点击,只用于子组件上,是因为组件上默认不能监听原生点击事件,因为要供子组件向父组件传值,所以默认都是让父组件监听用的;而加上.native的修饰符后,父组件就不会监听了,而是把组件当做一般元素执行原生事件;
4、v-show指令、v-if指令:<img v-show = "isShow" src=""/>
- 作用:用于通过真假控制元素显示与隐藏;
- v-show通过修改元素的样式:display:none;
- v-if通过修改dom树方式控制;true时从dom树中添加元素,false时从dom树中删除元素;
- v-show适用于元素频繁的显示与隐藏;v-if适用于元素可能不显示的功能,不显示时首次就不加载;
5、v-bind指令:<img v-bind:src = "imgsrc">,简写':'
- 作用:动态设置标签属性值;
- 动态绑定style:
<div :style="{color:red,fontSize:16px}"></div>//对象形式 <div :style="isTrue?{color:red,fontSize:16px}:{} "></div>//三元表达式
- 动态绑定类class: 三元表达式、对象形式;
- 为属性动态绑定属性值:
<img v-bind:src="imgUrl" alt="">
- 为元素动态添加、改变一个类:三元表达式;通过事件改变Boolean布尔值'isActive',来实现自主改变是否添加这个类;
<img v-bind:class = "isActive ? active : ' ' ">
- 为元素动态添加、改变多个类:对象形式:通过事件改变Boolean布尔值'isActive',来实现自主改变是否添加这些类;
<img v-bind:class = "{ active:isActive,类名2:boolean,... }">
6、v-for指令:<li v-for = "(item,index) in arr">{{ index }}{{ item }}</li>
- 根据数据生成列表结构;
- 经常与数组连用;
7、v-model指令:<input type = "text" v-model = "message" />
- 等同于:v-bind、v-on结合实现;
- 绑定的数据与表单元素的值相关联;(双向绑定)
- v-model的修饰符
- 在下拉框中应用:选一个项(array设置为字符串:用于记录选择了啥)、选多个项(array设置为数组,用于记录选择的都是啥);
- 在单选框中的应用:(array手动设置为字符串,用于记录选择的是啥)
<input type="radio" value="男" v-model="array" id="baskctBall">
<label for="baskctBall">男</label>
<input type="radio" value="女" v-model="array" id="baskctBall">
<label for="baskctBall">女</label>
<script src="../vuejs/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
array:男''
}
})
</script>
- 在多选框中的应用:一个多选框(array设置为布尔值:用于记录是否选中)、多个多选框(array设置为数组,用于记录选择的都是啥);
<input type="checkbox" value="随便写" v-model="array" id="agree">
<label for="agree">同意协议</label>
<script src="../vuejs/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
array:true
}
})
</script>
<body>
<div id="app">
<input type="checkbox" value="篮球" v-model="array" id="baskctBall">
<label for="baskctBall">篮球</label>
<input type="checkbox" value="足球" v-model="array">足球
<input type="checkbox" value="排球" v-model="array">排球
<input type="checkbox" value="兵乓球" v-model="array">兵乓球
<p>您的选择是:{{array}}</p>
</div>
<script src="../vuejs/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
array:[]
}
})
</script>
</body>