当前位置：首页 > news >正文

Vue2 day01

news 2025/6/21 16:17:14

1.Vue是什么

下图就算你会一个声明式渲染的你也可以进行构建用户界面其他的类似。

2.创建一个Vue实例

我们可以去vue2官网那查看下载引入文件，也可以在官网上复制线上网站地址引入到文件中

<!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 class="box1">{{msg}}</div><div class="box2">{{msg}}</div>-----------------------------------------<!-- 1准备容器 --><div id="app">{{msg}}</div><!-- 2.引包 --><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>//3.创建vue实例 new vue() const app = new Vue({//通过el选择器，来指定vue管理的是哪个盒子el: '#app',//通过data提供数据data: {msg: '诶嘿嘿嘿'}})</script>
</body></html>

3.插值表达式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 插值表达式：Vue的一种模板语法作用：利用 表达式 进行插值渲染语法：{{ 表达式 }}注意点：1. 使用的数据要存在2. 支持的是表达式，不是语句  if  for3. 不能在标签属性中使用 {{ }}----------------------- --><!-- <p>{{ hobby }}</p> --><!-- <p>{{ if }}</p> --><!-- <p title="{{ nickname }}">我是p标签</p> --><div id="app"><p>{{ nickname }}</p><p>{{ nickname.toUpperCase() }}</p><p>{{ nickname + '你好' }}</p><p>{{ age >= 18 ? '成年' : '未成年' }}</p><p>{{ friend.name }}</p><p>{{ friend.desc }}</p></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {nickname: 'tony',age: 18,friend: {name: 'jepson',desc: '热爱学习 Vue'}}})</script></body>
</html>

4.Vue响应式特性

6.开发者工具安装

根据上一集，如果要在页面上调试vue很麻烦如下图。

所以有个插件，在浏览器搜索这个插件，这个是vue2的插件

在vue设置里打开

7.指令初识和 v-html

（1）v-html

（2）指令-v-show和v-if

（3）指令 v-else 和 v-else-if

这里注意：v-if必须和v-else进行搭配使用，不然会报错。

（4）指令-v-on-01-语法1-内联语句

这里的v-on:可以写成@符号

（4.1）指令-v-on-02-语法2-methods处理函数

（4.2）指令-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>
<style>.box {border: 3px solid #000000;border-radius: 10px;padding: 20px;margin: 20px;width: 200px;}h3 {margin: 10px 0 20px 0;}p {margin: 20px;}
</style><body><div id="app"><div class="box"><h3>小黑自动售货机</h3><button @click="buy(5)">可乐5元</button><button @click="buy(10)">咖啡10元</button><button @click="buy(8)">牛奶8元</button></div><p>银行卡余额：{{ money }}元</p></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {money: 100},methods: {buy(price) {this.money -= price}}})</script>
</body></html>

（5）指令-v-bind

案例-波仔的学习之旅

（6）指令-v-for

如果index用不上可以省略，写法如下：

案例-小黑的书架

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><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><!-- 注册点击事件 →  通过 id 进行删除数组中的 对应项 --><button @click="del(item.id)">删除</button></li></ul></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/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: {del (id) {// console.log('删除', id)// 通过 id 进行删除数组中的 对应项 → filter(不会改变原数组)// filter: 根据条件，保留满足条件的对应项，得到一个新数组。// console.log(this.booksList.filter(item => item.id !== id))this.booksList = this.booksList.filter(item => item.id !== id)}}})</script>
</body>
</html>

这里补充说明下这里面Vue中的this：

拓展：

（7）指令-v-for的key

加了key

删除li后，整个li都删除了

如果没有key，删除li呢

结果虽然内容删除了，但是样式什么的会给下一个li进行复用

总结就是要有key。

（8）指令-v-model


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><!-- v-model 可以让数据和视图，形成双向数据绑定(1) 数据变化，视图自动更新(2) 视图变化，数据自动更新可以快速[获取]或[设置]表单元素的内容-->账户：<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="https://cdn.jsdelivr.net/npm/vue@2/dist/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>