Vue2+3

Day1

创建Vue实例

准备容器

引包 —— 开发版本

创建Vue实例 —— new Vue()

指定配置项 el 和 data => 渲染数据

el指定挂载点，指定控制的是哪个盒子

data提供数据

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 容器 --><div id="app"><!-- 将来会编写一些用于渲染的代码逻辑 --><!-- 插值表达式 --><h1>{{msg}}</h1><a href="#">{{count}}</a></div><!-- 引包 —— 官网v2.cn.vuejs.org 开发版本(包含完整的注释和警告)/生产版本--><script src="vue.js"></script><script>//一旦引入VueJS核心包，在全局环境，就有了Vue构造函数const app = new Vue({//通过el配置选择器，指定Vue管理的是哪个盒子el:'#app',//通过data提供数据data:{msg:'Hello 黑马',count:666}})</script></body>
</html>

插值表达式{{ 表达式 }}

表达式：能求得结果的；{{}}插值：用于渲染展示给用户看的文本的

🔺插值表达式不具备解析标签的能力

+ - * /

三元表达式

obj.name

arr[0]

obj.fn()

▲表达式中的数据需要在data里面声明

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><!-- 容器 --><div id="app"><!-- 将来会编写一些用于渲染的代码逻辑 --><!-- 插值表达式 --><!-- toUpperCase()转大写 --><p>{{ msg.toUpperCase() }}</p><p>{{ msg + '你好' }}</p><p>{{ count >= 18 ? '成年' : '未成年' }}</p><p>{{ friend.name }}</p></div><!-- 引包 —— 官网v2.cn.vuejs.org 开发版本(包含完整的注释和警告)/生产版本--><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><!-- <script src="vue.js"></script> --><script>//一旦引入VueJS核心包，在全局环境，就有了Vue构造函数const app = new Vue({//通过el配置选择器，指定Vue管理的是哪个盒子el:'#app',//通过data提供数据data:{msg:'Hello',count:18,friend:{name:'jepson',desc:'热爱学习'}}})</script></body>
</html>

Vue核心特性 —— 数据可以进行响应式处理

何为响应式：数据msg变化(修改)，视图自动更新

data里的数据如何访问或修改："实例.属性名" = "值"

app上拥有msg属性

直接在控制台修改对应属性；视图会更新

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 容器 --><div id="app"><h1>{{msg}}</h1><p>{{count}}</p></div><script src="vue.js"></script><script>//一旦引入VueJS核心包，在全局环境，就有了Vue构造函数const app = new Vue({el:'#app',data:{//响应式数据msg:'你好 黑马',count:666}})</script></body>
</html>

极简插件官网_Chrome插件下载_Chrome浏览器应用商店

Vue指令

指令：带有 v-前缀的特殊标签属性 <div v-html="str"></div>

v-html

作用：将一个文本当做html标签来解析

语法：v-html = "表达式"

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 容器 --><div id="app"><div v-html="msg"></div></div><script src="vue.js"></script><script>//一旦引入VueJS核心包，在全局环境，就有了Vue构造函数const app = new Vue({el:'#app',data:{msg:`<a href="http://www.itheima.com">黑马程序员</a>`}})</script></body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 容器 --><div id="app"><div v-html="msg"></div></div><script src="vue.js"></script><script>//一旦引入VueJS核心包，在全局环境，就有了Vue构造函数const app = new Vue({el:'#app',data:{msg:`<h1>学前端，来黑马</h1>`}})</script></body>
</html>

v-show/v-if

控制元素的显示隐藏

区别：

v-show

v-show = "表达式" 表达式值为true显示；值为false隐藏

通过切换css的display:none来控制显示隐藏

场景：适用于频繁需要切换显示隐藏

v-if

v-if = "表达式" 表达式值为true显示；值为false隐藏

根据条件控制元素的创建和移除；其中隐藏就是移除

场景：x；点击叉号

v-if/v-else/v-else-if

v-else-if = "表达式"

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 容器 --><div id="app"><p v-if="gender === 1">性别：男</p><p v-else>性别：女</p><hr><p v-if="score >= 90">成绩评定A：奖励电脑一台</p><p v-else-if="score >= 70">成绩评定B：奖励周末郊游</p><p v-else-if="score >= 60">成绩评定C：奖励零食礼包</p><p v-else>成绩评定D：惩罚一周不能玩手机</p></div><script src="vue.js"></script><script>//一旦引入VueJS核心包，在全局环境，就有了Vue构造函数const app = new Vue({el:'#app',data:{gender:2,score:95}})</script></body>
</html>

v-on

注册事件

语法：方式1.v-on:事件名 = "内联语句"

添加监听 + 提供处理逻辑

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 容器 --><div id="app"><button v-on:click="count--">-</button><span>{{count}}</span><button v-on:click="count++">+</button></div><script src="vue.js"></script><script>//一旦引入VueJS核心包，在全局环境，就有了Vue构造函数const app = new Vue({el:'#app',data:{count:100}})</script>
</body>
</html>

鼠标滑入 click => mouseenter

简写：v-on:click => @click

@事件名

语法：方式2.语句改成函数名

v-on:事件名 = "methods中的函数名"

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 容器 --><div id="app"><button @click="fn">切换显示隐藏</button><h1 v-show="isShow">黑马程序员</h1></div><script src="vue.js"></script><script>//一旦引入VueJS核心包，在全局环境，就有了Vue构造函数const app2 = new Vue({el:'#app',data:{isShow:true//默认值},methods:{fn(){app2.isShow = ! app2.isShow}}})</script>
</body>
</html>

🔺methods函数内的this指向Vue实例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 容器 --><div id="app"><button @click="fn">切换显示隐藏</button><h1 v-show="isShow">黑马程序员</h1></div><script src="vue.js"></script><script>//一旦引入VueJS核心包，在全局环境，就有了Vue构造函数const app2 = new Vue({el:'#app',data:{isShow:true//默认值},methods:{fn(){this.isShow = ! this.isShow}}})</script>
</body>
</html>

传参

语法：@click = "fn(参数1,参数2)"

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 容器 --><div id="app"><div class="box"><h3>自动售货机</h3><button @click="buy(5)">可乐5元</button><button @click="buy(10)">咖啡10元</button></div><p>银行卡余额：{{money}}元</p></div><script src="vue.js"></script><script>//一旦引入VueJS核心包，在全局环境，就有了Vue构造函数const app2 = new Vue({el:'#app',data:{money:100},methods:{buy(price){this.money -= price}}})</script>
</body>
</html>

v-bind

动态设置html的标签属性 -> src、url、title ...

场景：有些时候图片路径是动态设置的；不是写死的

语法：v-bind:属性名 = "表达式"

简写：:属性名 = "表达式"

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 容器 --><div id="app"><!-- <img v-bind:src="imgUrl" v-bind:title="msg"> --><img :src="imgUrl" :title="msg"> </div><script src="vue.js"></script><script>//一旦引入VueJS核心包，在全局环境，就有了Vue构造函数const app2 = new Vue({el:'#app',data:{imgUrl:'../excel/logo.jpg',msg:'logo'}})</script>
</body>
</html>

这个title，鼠标悬停在图片上才会显示

点击按钮切换图片

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><!-- v-show值为true显示 --><button v-show="index > 0" @click="index--">上一页</button><img v-bind:src="list[index]" ><button v-show="index < list.length-1" @click="index++">下一页</button></div><script src="vue.js"></script><script>const app = new Vue({el:'#app',data:{index:0,list:['../img/1.jpg','../img/2.jpg','../img/3.jpg','../img/4.jpg',]}})</script></body>
</html>

v-for

多用于数组、对象...

遍历数组语法： v-for = "(item,index) in 数组"

item —— 数组中的每一项； index —— 数组下标

▲ index可省：v-for = "item in 数组"

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id = "app"><h3>小黑水果店</h3><ul><li v-for="(item,index) in list">{{item}} - {{index}}</li></ul><ul><li v-for="item in list">{{item}}</li></ul></div><script src="vue.js"></script><script>const app = new Vue({el:'#app',data:{list:['西瓜','苹果','鸭梨','榴莲']}})</script></body>
</html>

小黑的书架

js中的filter()：对数组进行过滤；创建一个新数组，新数组中的元素是通过检查的指定数组中符合条件的所有元素

语法：Array.filter(function(currentValue, indedx, arr), thisValue)

其中，函数 function 为必须，数组中的每个元素都会执行这个函数。且如果返回值为 true，则该元素被保留；函数的第一个参数 currentValue 也为必须，代表当前元素的值。

item => item.id!==id 看箭头函数那里

this.booksList = this.booksList.filter((item) => {return item.id!==id;})

前端——JS基础-CSDN博客
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id = "app"><h3>小黑的书架</h3><ul><li v-for="(item,index) in booksList" :key="item.id"><span>{{item.name}}</span><span>{{item.author}}</span><button @click="fn(item.id)">删除</button></li></ul></div><script src="vue.js"></script><script>const app = new Vue({el:'#app',data:{booksList:[{id:1 , name:'《红楼梦》',author:'曹雪芹'},{id:2 , name:'《西游记》',author:'吴承恩'},{id:3 , name:'《水浒传》',author:'施耐庵'},{id:4 , name:'《三国演义》',author:'罗贯中'}]},methods:{fn(id){//console.log('删除',id)this.booksList = this.booksList.filter(item => item.id!==id)}}})</script>
</body>
</html>

v-for里的key

:key="唯一值"

给元素添加的唯一标识；这里相当于给li添加的唯一标识；key值必须具有唯一性，推荐使用id

不加key的话；相当于四个没起名的li；删哪个不知道；需要三个就留前三个li；删最后一个

加key；那就知道了，删key=id那个

v-model

给表单元素使用的，双向数据绑定（数据变化->视图自动更新；视图变化->数据自动更新）

可以快速/实时获取/设置表单元素内容

语法：v-model = "变量"

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app">账户：<input type="text" v-model="username"><br><br>密码：<input type="password" v-model="password"><br><br><button @click="login">登录</button><button @click="reset">重置</button></div><script src="vue.js"></script><script>const app = new Vue({el:'#app',data:{username:'',password:''},methods:{login(){console.log(this.username,this.password)},reset(){this.username='',this.password=''}}})</script>
</body>
</html>