Vue指令
插值表达式
//语法:{{表达式}}
<template>
<div>
<h1>{{ msg }}</h1>
<h2>{{ obj.name }}</h2>
<h3>{{ obj.age > 18 ? '成年' : '未成年' }}</h3>
</div>
</template>
<script>
export default {
data() { // 格式固定, 定义vue数据之处
return { // key相当于变量名
msg: "hello, vue",
obj: {
name: "小vue",
age: 5
}
}
}
}
</script>
<style>
</style>
、、dom中插值表达式赋值，vue的变量必须在data里声明
<template>
<div id="app">
<!-- //插值表达式 -->
<h1>{{ fd }}</h1>
<!-- //不能写语句，如if,for循环等 -->
<!-- 写对象 -->
<!-- <h2>{{ obj.name }}</h2> -->
<!-- 写三元表达式 -->
<!-- <h2>{{ obj.age > 19 ? "成年" : "未成年" }}</h2> -->
<button @click="btn">反转</button>
<!-- 简写 -->
<a :href="url">跳</a>
<hr />
<!-- 完整写法 -->
<a v-bind:href="url">在跳</a>
</div>
</template>
<script>
export default {
data() {
return {
//声明数据
fd: "你好猫咪",
// obj: {
// name: "猫咪",
// age: 20,
// },
url: "http://baidu.com",
};
},
methods: {
btn() {
this.fd = this.fd.split("").reverse().join("");
},
},
};
</script>
//样式
<style>
</style>
MVVM设计模式
设计模式: 是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结
-
MVVM，一种软件架构模式，决定了写代码的思想和层次
- M： model数据模型 (data里定义)
- V： view视图 （html页面）
- VM： ViewModel视图模型 (vue.js源码)
vue指令,v-bind
//语法：v-bind:属性名='vue变量'
//简写：属性名='vue变量'
<!--vue指令 v-bind属性动态赋值-->
<a v-bind:href='url'>这是a标签</a>
<img :src='imgSrc'>
//把vue变量的值，赋予给dom属性上,影响标签显示效果
v-on指令,给标签绑定事件
//v-on:事件名='要执行的代码'
//v-on:事件名='methods中的函数'
//v-on:事件名='methods中的函数(实参)'
//简写：@事件名='methods中的函数'
<template>
<div id="app">
<h1>商品数量{{ count }}</h1>
<!-- 完整写法 -->
<!-- <button v-on:click="count = count + 1">加1</button> -->
<!-- 简写,带变量 -->
<button @click="addFn">加1</button>
<button @click="accFn">减1</button>
<!-- 传参 (5)-->
<button @click="addCount(5)">加5</button>
<!-- 减5 -->
<button @click="accCount(5)">减5</button>
<!-- 清空 -->
<button @click="zero">清零</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0,
};
},
methods: {
//无传参，通过形参直接接收
addFn() {
this.count++;
},
accFn() {
this.count--;
},
addCount(num) {
this.count += num;
},
//有传参,通过$event指代事件对象传给事件处理函数
accCount(num) {
this.count -= num;
},
zero() {
this.count = 0;
},
},
};
</script>
//样式
<style>
</style>
//常用@事件名，给dom标签绑定事件,以及=号右侧的事件处理函数
v-on修饰符
<template>
<!--.stop 阻止事件冒泡 -->
<div id="app" @click="father">
<button @click.stop="child">阻止</button>
<!-- 阻止默认行为 .prevent -->
<a href="http://baidu.com" @click.prevent>点击我不跳转</a>
<!-- 运行期间只触发一次.once -->
<button @click.once="btn">点我只触发一次</button>
<!-- 键盘事件的修饰符 .enter, .esc -->
<input type="text" @keydown.enter="Enter" />
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {
father() {
console.log("父元素触发");
},
child() {
console.log(123, "父元素不触发");
},
btn() {
console.log("只出现一次");
},
Enter() {
console.log("按下了回车键");
},
esc() {
console.log("取消了");
},
},
};
</script>
//样式
<style>
</style>
v-on按键修饰符
<template>
<div>
<input type="text" @keydown.enter="enterFn">
<hr>
<input type="text" @keydown.esc="escFn">
</div>
</template>
<script>
export default {
methods: {
enterFn(){
console.log("enter回车按键了");
},
escFn(){
console.log("esc按键了");
}
}
}
</script>
<template>
<div id="app">
<h1>{{ test }}</h1>
<button @click="revese">点我转过来</button>
</div>
</template>
<script>
export default {
data() {
return {
test: "hello,World",
};
},
methods: {
revese() {
// this.text.split(""):字符串转成数组,revese()反转,join("")重新拼接
this.test = this.test.split("").reverse().join("");
},
},
};
</script>
<style >
</style>
v-model指令，value属性和Vue数据变量，双向绑定到一起
//语法：v-model='Vue数据变量'
/*
双向数据绑定
变量变化 -> 视图自动同步
视图变化 -> 变量自动同步
*/
<template>
<div>
<!--
v-model:是实现vuejs变量和表单标签value属性, 双向绑定的指令
-->
<div>
<span>用户名:</span>
<input type="text" v-model="username" />
</div>
<div>
<span>密码:</span>
<input type="password" v-model="pass" />
</div>
<div>
<span>来自于: </span>
<!-- 下拉菜单要绑定在select上 -->
<select v-model="from">
<option value="北京市">北京</option>
<option value="南京市">南京</option>
<option value="天津市">天津</option>
</select>
</div>
<div>
<!-- (重要)
遇到复选框, v-model的变量值
非数组 - 关联的是复选框的checked属性
数组 - 关联的是复选框的value属性
-->
<span>爱好: </span>
<input type="checkbox" v-model="hobby" value="抽烟">抽烟
<input type="checkbox" v-model="hobby" value="喝酒">喝酒
<input type="checkbox" v-model="hobby" value="写代码">写代码
</div>
<div>
<span>性别: </span>
<input type="radio" value="男" name="sex" v-model="gender">男
<input type="radio" value="女" name="sex" v-model="gender">女
</div>
<div>
<span>自我介绍</span>
<textarea v-model="intro"></textarea>
</div>
</div>
</template>
<script>
export default {
data() {
return {
username: "",
pass: "",
from: "",
hobby: [],
sex: "",
intro: "",
};
// 总结:
// 特别注意: v-model, 在input[checkbox]的多选框状态
// 变量为非数组, 则绑定的是checked的属性(true/false) - 常用于: 单个绑定使用
// 变量为数组, 则绑定的是他们的value属性里的值 - 常用于: 收集勾选了哪些值
}
};
</script>
v-model修饰符
//语法:v-model.修饰符='vue数据变量'
//.number 以parseFloat转成数字类型
//.trim 去除首尾的空白字符串
//.lazy 在change时触发、而非input时
<template>
<div>
<div>
<span>年龄:</span>
<input type="text" v-model.number="age">
</div>
<div>
<span>人生格言:</span>
<input type="text" v-model.trim="motto">
</div>
<div>
<span>自我介绍:</span>
<textarea v-model.lazy="intro"></textarea>
</div>
</div>
</template>
<script>
export default {
data() {
return {
age: "",
motto: "",
intro: ""
}
}
}
</script>
v-text和v-html指令
//语法：
//v-text='vue数据变量',把值当成普通字符串显示
//v-html='vue数据变量',把值当成标签进行解析显示
//注意：会覆盖插值表达式
<template>
<div>
<p v-text='str'></p>
<p v-html='str'></p>
</div>
</template>
v-show和v-if指令，控制标签的隐藏或出现
//语法:
//v-show='vue变量',用的display:none隐藏（频繁切换使用）
//v-if='vue变量',直接从dom树上移出,可以配合v-else使用
<template>
<div id="app">
<!-- v-show：控制标签的隐藏或出现 ,频繁切换使用-->
<h1 v-show="ok">出现</h1>
<!--v-if:直接移除 ok状态值为false则不显示 -->
<h2 v-if="ok">你好</h2>
<button @click="btn">点我</button>
<div>
<!-- v-if和v-else搭配使用 -->
<p v-if="age > 20">可以结婚了</p>
<p v-else>差了点</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
ok: false,
age: 22,
};
},
methods: {
btn() {
this.ok = !this.ok;
},
},
};
</script>
<style>
</style>
//折叠面板小案例
<template>
<div id="app">
<div class="title">
<h4>芙蓉楼送辛渐</h4>
<span class="btn" @click="ok = !ok"> {{ ok ? "收起" : "展开" }} </span>
</div>
<div class="container" v-show="ok">
<p>寒雨连江夜入吴,</p>
<p>平明送客楚山孤。</p>
<p>洛阳亲友如相问，</p>
<p>一片冰心在玉壶。</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
ok: false,
};
},
};
</script>
<style>
body {
background-color: #ccc;
}
#app {
width: 400px;
margin: 20px auto;
background-color: #fff;
border: 4px solid blueviolet;
border-radius: 1em;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
padding: 1em 2em 2em;
}
h3 {
text-align: center;
}
.title {
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid #ccc;
padding: 0 1em;
}
.title h4 {
line-height: 2;
margin: 0;
}
.container {
border: 1px solid #ccc;
padding: 0 1em;
}
.btn {
/* 鼠标改成手的形状 */
cursor: pointer;
}
</style>
v-for指令,列表渲染所在标签结构,按照数据数量,循环生成
//语法：
//v-for='(值变量,索引变量) in 目标结构'
//v-for='值变量 in 目标结构'
//可以变量数组、对象、数字、字符串（可遍历结构）
//注意：v-for的临时变量名不能用到v-for范围外
小案例。效果如下:
//- 需求1: 根据给的初始数据, 把购物车页面铺设出来
//- 需求2: 点击对应删除按钮, 删除对应数据
//需求3: 当数据没有了, 显示一条提示消息
<template>
<div id="app">
<table class="tb">
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>创立时间</th>
<th>操作</th>
</tr>
<!-- 循环渲染的元素tr -->
<tr v-for="(item, index) in list">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.time }}</td>
<td>
<button @click="del(index)">删除</button>
</td>
</tr>
<tr v-if="list.length == 0">
<td colspan="4">没有数据咯~</td>
</tr>
</table>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{ id: 1, name: "奔驰", time: "2020-08-01" },
{ id: 2, name: "宝马", time: "2020-08-02" },
{ id: 3, name: "奥迪", time: "2020-08-03" },
],
isOk: false,
};
},
methods: {
del(i) {
this.list.splice(i, 1);
},
},
};
</script>
<style>
#app {
width: 600px;
margin: 10px auto;
}
.tb {
border-collapse: collapse;
width: 100%;
}
.tb th {
background-color: #0094ff;
color: white;
}
.tb td,
.tb th {
padding: 5px;
border: 1px solid black;
text-align: center;
}
.add {
padding: 5px;
border: 1px solid black;
margin-bottom: 10px;
}
</style>
//数组名.reduce()方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
//**注意:** reduce() 对于空数组是不会执行回调函数的。,会有个返回值
let arr = [1, 2, 3, 4, 5, 6, 7]
let res = arr.reduce((res, val) => (res += val), 0)
console.log(res);
//res=28
