```css
<html>
<head></head>
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<!--
es6里如果属性值是变量,并且这个变量名和属性名一样的话,
那么属性名和属性值可以简写,对象里函数的属性也可以缩写,
默认把:function一同省略 fn(){
} 这样
v-model 双向绑定 仅仅针对于表单元素
checkbox:
单个复选框绑定到布尔值
多个复选框的话就是,绑定到数组(要写value,value写死)
radio:
单选框直接绑定到值
select:
下拉选择框直接绑定到值
修饰符:.number --自动把输入的转换为数字 v-model.number=""
.trim --去首位空格 v-model.trim=""
v-on 绑定事件(注意this) 缩写为@事件名 @click="fn"
阻止事件冒泡(prevent):v-on:click.prevent=""
按键修饰符:v-on:keyup.enter="" --回车松开触发事件
v-on:keyup.page-down="" --向下翻页按键触发事件
computed:计算属性 比如this.box.splite("")这种,要对属性进行处理,
就放在computed里面,写成方法,然后再{
{
}}里写函数名字
computed与methods区别:
计算属性时,只用它依赖的值发生变化的时候才会触发,
就是数值变了,方法自行处理这些东西不需要调用,
而methods里面的函数需要调用
computed计算属性性能更高,methods是主动调用,两者不冲突
记得在computed里面加return
watch:检测数据(监听),改变其中一个属性值,就会触发里面的方法(不常用)
computed与watch
vue2- v-model表单双向绑定、v-on事件绑定简写@、computed与methods
最新推荐文章于 2023-12-30 02:18:44 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)