前端:Vue学习-1
- 1. 指令
- 1. 指令修饰符
- 2. v-bind对样式控制的增强
- 3. v-model应用于其他表单元素
- 2. 计算属性
- 3. watch侦听器（监视器）
1. 指令
就是带有v-前缀的特殊属性，不同属性对应不同的功能
v-html：动态设置页面的html标签内容，对应innerHtml；
v-show，v-if：控制元素显示隐藏，其中 v-show只是通过设置标签元素的display属性来控制标签元素的隐藏，而v-if是对标签元素进行删除或插入，通常频繁切换隐藏显示的使用v-show；
v-else，v-else-if：用来辅助v-if的使用；
v-on：用来绑定事件，可以省略写为@事件名=“函数名”；如果定义的函数有参数，直接写为
@事件名=“函数名(参数1，参数2)”
<div id="app"><p v-if="score >= 90">优秀</p><p v-else-if="score >= 80">良好</p><p v-else>不怎的</p><p>分数为：{{score}}</p><button @click="func1">+</button><button @click="func2">-</button>
</div>
<script type="text/javascript">new Vue({el:'#app',data:{score:90},methods:{func1(){this.score ++;},func2() {this.score--;}}});
</script>
v-bind：用来动态设置标签元素的属性，可以简写为 :属性名=属性值；
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue2</title><script src="../vue2.js"></script><style>img{width: 100px;height: 100px;}</style>
</head>
<body><div id="app"><button v-show="index > 0" @click="func(-1)">上一页</button><img :title="imgs[index]" alt=""><button v-show="index < imgs.length - 1" @click="func(1)">下一页</button></div><script>new Vue({el:'#app',data:{imgs: [1, 2, 3, 4, 5, 6],index: 0},methods:{func(i){if(i == -1){this.index --;}else if(i == 1){this.index ++;}}}})</script>
</body>
</html>
v-for：基于数据循环，多次渲染整个元素，可以是数组、对象等，可以写为“v-for=‘item in items’”或者“v-for=‘(item,index) in items’”，通常在使用v-for的标签元素上需要添加属性key，用来唯一标识这个标签元素，推荐使用id作为key，不推荐使用index作为key（会变化，不对应）；
v-model：通常结合表单元素来使用，用来双向数据绑定对应输入框中内容，如修改vue实例data中对应的属性值，输入框中值会进行相应变换，修改输入框中的值，对应的vue实例中对应属性值也会跟着进行变化；
<div id="app"><input type="text" v-model="val">
</div>
<script type="text/javascript">const app = new Vue({el:'#app',data:{val:'hello world！'}})
</script>
1. 指令修饰符
通过“.”指明一些指令后缀，不同后缀封装了不同的处理操作，简化代码。
按键修饰符@keyup.enter，键盘回车监听；v-mdel.trim，去掉首尾空格；v-model.number，转数字；@事件名.stop，阻止冒泡；@事件名.prevent，阻止默认行为。
2. v-bind对样式控制的增强
- 操作class，“:class=’对象/数组‘”
- 对象，键就是类名，值是布尔值，如果值为true，有这个类，否则没有这个类，使用场景，一个类名，来回切换；
- 数组，数组中所有的类，都会添加到盒子上，本质上就是一个class列表，使用场景，批量添加或删除类；
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue2</title><script src="../vue2.js"></script><style>.red{background-color: red;}.blue{background-color: blue;}</style>
</head>
<body><div id="app"><p :class="{red:true}">hello world!</p><p :class="['blue']">hello world!2</p></div>
</body>
</html>
- 操作style，“:style=‘样式对象’”
:style="{width:'300px'}"
像类似“background-color”的属性，写法可以为：“background-color”或“backgroundColor"，前者需要用引号。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue2</title><script src="../vue2.js"></script><style>.jdt{width: 200px;height: 30px;border-radius: 25px;border: 1px solid black;}.inner-jdt{height: 100%;background-color: blue;border-radius: 25px;line-height: 30px;text-align: center;transition: all 0.6s;}</style>
</head>
<body><div id="app"><div class="jdt"><div class="inner-jdt" :style="{width:jdtWidth}">{{jdtWidth}}</div><br><button @click="setWidth('20%')">20%</button><button @click="setWidth('40%')">40%</button><button @click="setWidth('60%')">60%</button></div></div><script>new Vue({el:'#app',data:{jdtWidth:'40%'},methods:{setWidth(width){this.jdtWidth = width;}}})</script>
</body>
</html>
3. v-model应用于其他表单元素
<div id="app">输入框：<input type="text" v-model="v1"><br>复选框：<input type="checkbox" v-model="v2"><br>单选框： 1 <input type="radio" name="hh" value="1" v-model="v3">2 <input type="radio" name="hh" value="2" v-model="v3"><br>下拉菜单：<select v-model="v4"><option name="hh2" value="1">1</option><option name="hh2" value="2">2</option></select><br>多行文本：<textarea v-model="v5"></textarea>
</div>
<script>const app = new Vue({el:'#app',data:{v1:'',v2:true,v3:1,v4:'2',v5:''}})
</script>
2. 计算属性
基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算。声明在computed配置项中，一个计算属性对应一个函数；使用起来和普通属性一样使用；
<body><div id="app"><p>{{list}}</p><p>{{totalCount}}</p></div><script>const app = new Vue({el:'#app',data:{list:[1,2,3,4,5]},computed:{totalCount(){return this.list.reduce((item,sum)=>sum+item,0);}}})</script>
</body>
和函数的比较，**计算属性会对计算出来的结果进行缓存，再次使用直接读取缓存，依赖项变化了，会自动重新计算，并再次缓存。**默认的计算属性只是求，而不能设值，计算属性的完整写法如下：
computed{计算属性名:{get(){一段代码逻辑return 结果值},set(修改的值){一段代码逻辑}}
}
当计算属性名被修改赋值时，执行set，修改的值，传递给set方法的形参。
<body><div id="app"><p>{{getName}}</p><button @click="setName">改名</button></div><script>const app = new Vue({el:'#app',data:{firstName:'孙',secondName:'权'},methods:{setName(){this.getName = '孙小妹';}},computed:{getName:{get(){return this.firstName + this.secondName;},set(val){this.firstName = val.slice(0,1);this.secondName = val.slice(1);}}}})</script>
</body>
3. watch侦听器（监视器）
监视数据变化，执行一些异步操作
// 监视简单数据
watch{数据名(o,n){// 代码逻辑}
}
//复杂数据
watch{'对象.数据名'(o,n){// 代码逻辑}
}
完整写法，比如监视一个对象的所有属性
watch{数据属性名:{deep:true,// 深度监视handler(newValue){// 代码逻辑}}
}
