初识vue

最新推荐文章于 2025-05-14 17:02:49 发布

杨-羊羊羊

最新推荐文章于 2025-05-14 17:02:49 发布

阅读量855

点赞数 26

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/m0_74416054/article/details/145805201

版权

vue快速上手

vue概念

vue是一个用于构建用户界面的渐进式框架

构建用户界面：基于数据动态渲染页面

渐进式：循序渐进的学习

框架：一套完整的项目解决方案，优点可以提升开发效率

创建vue实例，初始化渲染

构建用户页面
创建vue实例，初始化渲染
- 准备容器
- 引包，一旦引入VueJs核心包，在全局环境，就有了Vue构造函数
```
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
```
- 创建vue实例， new vue（）
- 指定配置项，渲染数据
  - el指挂载点
  - data提供数据

插值表达式

插值表达式是一种Vue的模板语法

1. 作用: 利用表达式进行插值，渲染到页面中

表达式：是可以被求值的代码，JS引擎会将其计算出一个结果

2. 语法：{{ 表达式 }}

3. 注意点：

（1）使用的数据必须存在（data）

（2）支持的是表达式，而非语句，比如：if for ...

（3）不能在标签属性中使用 {{ }} 插值

响应式特性数值修改在终端进行，

在代码块处，修改好像没有用

Vue核心特性：响应式

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">
{{a}}
</div>
<script src="../JS/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
//响应式数据->数据变画了，视图自动更新
a:' <a href="">'你好，李昀锐'</a>'
}
});
//data中的数据，是会被添加到实例上
//访问数据，实例.属性名
//修改数据实例.属性名=新值
</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="../JS/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
//响应式数据->数据变画了，视图自动更新
msg:
'<a href="https://yiyan.baidu.com/chat/NjYyMTMyMDY4MTo0NzUzODQxMTI0" > 温馨一眼</a>'

}
});
//data中的数据，是会被添加到实例上
//访问数据，实例.属性名
//修改数据实例.属性名=新值
</script>
</body>

</html>

v-show和v-if

v-else v-else-if

v-else和v-if配合使用，否则报错

如果有v-else-if，必须在v-if和v-else之间

v-on

语法一：

语法二：

在提供所有函数methods中，this都指向当前实例

<!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=count+2">+</button> 等价于//
        <button @click="count=count+2">+</button>
        <span>{{count}}</span>
        <button v-on:click="count--">-</button>
    </div>
    <script src="../../JS/vue.js"></script>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                count:0
            }
        })
    </script> -->
    <!-- 语法二 -->
    <div id="app">
        <button @click="fn">切换显示与隐藏</button>
        <h3 v-show="isShow">《九重紫》</h3>
    </div>
    <script src="../../JS/vue.js"></script>
    <script>
        const app2 = new Vue({
            el: '#app',
            data: {
                isShow: true
            },
            methods: {
                fn(){
                    //在提供所有函数methods中，this都指向当前实例
                    // console.log(app2===this);结果是true
                    // app2.isShow=!app2.isShow
                    this.isShow=!this.isShow
                }
            }
        })
    </script>
</body>

</html>

调用传参

 <div id="app">
            <div class="box">
                <h3>自动售货机</h3>
                <button @click="drink(5)">可乐5元</button>
                <button @click="drink(10)">雪碧10元</button>
            </div>
            <p>余额：{{money}}元</p>
        </div>
        <script src="../../JS/vue.js"></script>
        <script>
            const app2 = new Vue({
                el: '#app',
                data: {
                    isShow: true,
                    money:890
                },
                methods: {
                    drink(price){
                        this.money-=price;
                    }
                }
            })
        </script>

v-bind

<img v-bind:src="imgUrl" alt="">
<img :src="imgUrl" :title="msg" alt="">

v-for

此时删除的li不确定，删除的是下面那一个，不是删除第一个