前端: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){
// 代码逻辑
}
}
}
