vue学习1

The_era_achievs_hero

于 2025-02-05 19:30:53 发布

阅读量987

点赞数 16

文章标签： vue.js 学习 javascript

本文链接：https://blog.youkuaiyun.com/The_era_achievs_/article/details/145450757

版权

1.vue是什么

是一个用于构建用户页面的渐进式（循序渐进）框架（完整的项目解决方案）

声明式渲染 ->组件系统->客户端路由 ->大规模状态管理 ->构建工具

vue的两种使用方式：

vue核心开发
场景：局部模块改造
vue 核心包&vue插件工程化开发
场景：整站开发

2.创建vue实例

准备容器
引包（官网）- 开发版本/生产版本
创建vue实例 new Vue()
指定配置项 ->渲染数据
el指定挂载点
data提供数据

<body>
    <div id="app">
        <h1>{{ msg }}</h1>
        <a href="#">{{ count }}</a>
    </div>

    <!--引入的是开发版本包，包含完整的注释和警告-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

    <script>
    //1.一旦引入vuejs核心包，在全局环境，就有了vue构造函数
    const app = new Vue({
        //通过el配置选择器，指定vue管理的是哪个盒子
        el:'#app',
        //通过data 提供数据
        data:{
            msg:'Hello 黑马',
            count: '666'
        }
    })
    </script>
</body>

3.插值表达式

作用：利用表达式进行插值，渲染到页面中
表达式：是可以被求值的代码，js引擎会将其计算出一个结果
语法：{{ 表达式 }}
注意点：
使用的数据必须存在（data）
支持的是表达式，而非语句，比如：if for
不能在标签属性中使用{{ }}插值

<body>
    <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>

4.响应式特性

数据改变，视图自动更新
data中的数据，最终会被添加到实例上（在控制台是操作即可）

访问数据：“ 实例.属性名 ”
修改数据：“ 实例.属性名” = “值”

5.vue指令

vue会根据不同的指令，针对标签实现不同的功能
指令：带有v-前缀的特殊标签属性

<div v-html="str"></div>

1.v-html

v-html:
作用：设置元素的innerHTML
语法：v-html=“表达式”

<body>
    <div id="app">
        <div v-html="msg"></div>
    </div>


     <!--引入的是开发版本包，包含完整的注释和警告-->
     <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

    <script>
        const app = new Vue({
            el:'#app',
            data:{
                msg:`
                <a href="http://www.itheima.com">黑马程序员</a>`
            }
        })
    </script>
</body>

常记的：
请添加图片描述

2.指令v-show vs v-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>
    <style>
        .box {
            width: 200px;
            height: 100px;
            margin-bottom: 10px;
            text-align: center;
            border: 2px solid black;
            box-shadow: 2px 2px 2px #ccc;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="box" v-show="flag">我是v-show控制的盒子</div>
        <div class="box" v-if="flag">我是v-if控制的盒子</div>
    </div>

     <!--引入的是开发版本包，包含完整的注释和警告-->
     <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

     <script>
        const app = new Vue({
            el:'#app',
            data:{
                flag:true,
            }
        })
     </script>
</body>
</html>

v-show

作用：控制元素显示隐藏
底层原理：切换css 的display：none 来控制显示隐藏
场景：频繁切换显示隐藏的场景
v-if
作用：控制元素显示隐藏（条件渲染）
底层原理：根据判断条件控制元素的创建和移除
要么显示，要么隐藏，不频繁的切换场景

请添加图片描述
第一个是flag=true(此时都一样)
第二个是flag=false(此时v-if没了)

3.指令v-else和v-else-if

作用：辅助v-if进行判断渲染
语法：v-else v-else-if=“表达式”
注意：需要紧挨着v-if 一起使用

4. 指令v-on

作用：注册事件= 添加监听 + 提供处理逻辑
语法：
v-on:事件名=‘‘内联语句’’
v-on:事件名=‘‘methods中的函数名’’

<button v-on:cilck="count++">按钮</button>

为了以后写代码更方便v-on:这一部分可以替换成@
第一种语法：

<body>
    <div id="app">
        <button v-on:click="count--">-</button>
        <span>{{ count }}</span>
        <button v-on:click="count++">+</button>
    </div>

     <!--引入的是开发版本包，包含完整的注释和警告-->
     <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

     <script>
        const app = new Vue({
            el:'#app',
            data:{
                count:0
            }
        })
     </script>
</body>

第二种语法：

 <div id="app">
        <button @click="fn">切换显示隐藏</button>
        <h1 v-show="isShow">黑马程序员</h1>
     </div>
      <!--引入的是开发版本包，包含完整的注释和警告-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                isShow:true,
            },
            methods:{
                fn() {
                    //让提供的所有methods中的函数，this都指向当前实例
                    this.isShow = !this.isShow
                }
            }
        })
    </script>

5.v-on调用传参

可以额外传参数1，2

  <button @click="fn（参数1，参数2）">切换显示隐藏</button>

底下通过形参接受
请添加图片描述
小黑自动售货机案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app {
            width: 200px;
            height: 110px;
            border: 3px solid black;
            text-align: center;
            padding-top: 20px;
            border-radius: 5px;
        }
        p {
            height: 80px;
            line-height: 80px;
            text-align: left;
        }
    </style>
</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="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

     <script>
        const app = new Vue({
            el:'#app',
            data:{
                money:100
            },
            methods:{
                buy(price) {
                    this.money -= price
                }
            }
        })
     </script>
</body>
</html>

6.v-bind

作用：动态的设置html的标签属性：src title url…
语法：v-bind:属性名=“表达式”

<img v-bind:src="imgUrl" v-bind:title="msg">
//简写方式：把v-bind去掉，：别去
<img :src="imgUrl" :title="msg">

请添加图片描述
波仔的学习之旅案例

<body>
    <div id="app">
        <button @click="index--" v-show="index > 0">上一页</button>
        <div>
            <img :src="list[index]" alt="">
        </div>
        <button @click="index++" v-show="index<=list.length">下一页</button>

         <!--引入的是开发版本包，包含完整的注释和警告-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

    <script>
        const app = new Vue({
            el:'#app',
            data:{
                index:0,
                list:[
                    './img/1-00.gif',
                    './img/2-00.gif',
                    './img/3-00.gif',
                    './img/4-00.gif',
                ]
            }
        })
    </script>
    </div>
</body>

7.指令v-for

作用：基于数据循环，多次渲染整个元素 -->数组，对象，数字…
语法：v-for=“(item,index)” in 数组
item每一项，index下标

当用不到index时可以写为
<li v-for="item in list">{{ item }}</li>

<body>
    <div id="app">
        <h3>小黑水果店</h3>
        <ul>
            <li v-for="(item,index) in list">
                {{item}}
            </li>
        </ul>
    </div>

      <!--引入的是开发版本包，包含完整的注释和警告-->
      <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

      <script>
        const app = new Vue({
            el:'#app',
            data:{
                list:['西瓜','苹果','鸭梨','榴莲']
            }
        })
      </script>
</body>

小黑的书架

<body>
    <div id="app">
        <h3>小黑的书架</h3>
        <ul>
            <li v-for="(item,index) in bookList" :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.7.14/dist/vue.js"></script>

      <script>
        const app = new Vue({
            el:'#app',
            data:{
                bookList:[
                    {id:1, name:'《红楼梦》', author:'曹雪芹'},
                    {id:2, name:'《西游记》', author:'吴承恩'},
                    {id:3, name:'《水浒传》', author:'施耐庵'},
                    {id:4, name:'《三国演义》', author:'罗贯中'},
                ]
            },
            methods:{
                del(id) {
                    //通过id进行删除数组中的对应项 对应项 filter（过滤）（不会改变原数组）
                    //filter：根据条件，保留满足条件的对应项，得到一个新数组
                    //再次赋值给原数组
                    this.bookList = this.bookList.filter(item => item.id !== id)
                }
            }
        })
      </script>
</body>

v-for中的key
语法：key属性=“唯一标识”
作用：便于vue进行列表项的正确排序使用
原因：v-for的默认行为会尝试原地修改元素（就地复用）
注意点：
key的值只能是字符串或数字类型
key的值必须具有唯一性
推荐使用id作为key（唯一），不推荐index(会变化，不对应)

8.指令v-model

作用：给表单元素使用，双向数据绑定，可以快速获取或设置表单元素内容
数据变化->视图自动更新
视图自动更新->数据变化
可以快速获取或设置表单元素的内容

<body>
    <div id="app">
        账户: <input type="text" v-model="username"><br><br>
        密码: <input type="password" ><br><br>
        <button>登录</button>
        <button>重置</button>
    </div>
      <!--引入的是开发版本包，包含完整的注释和警告-->
      <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
      <script>
        const app = new Vue({
            el:'#app',
            data:{
                username:''
            }
        })
      </script>
</body>