再来一套 vue 全面的内容（一）有源码可以快速上手练习真棒！

最新推荐文章于 2023-03-12 23:31:31 发布

小白追梦

最新推荐文章于 2023-03-12 23:31:31 发布

阅读量74

点赞数

分类专栏： vue 文章标签： vue.js javascript vue

本文链接：https://blog.csdn.net/weixin_43815680/article/details/109005087

版权

vue 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

新建一个html 文件先利用 cdn 引入一下 vue
然后简单操作一下
2)
变量定义在vue data 里面比较好用
3) 我们展示一下这个程序

<html>

<head>
    <title>test</title>
    <meta charset="utf-8">
</head>

<body>
// 上面这部分 使用vue 进行渲染 把这个id 已经放到了实例 el中进行渲染
    <div id="box">
        {{10 + 20}}
        <p>
            {{myName}}
        </p>
    </div>

// 下面这部分不使用vue 进行渲染
    <div>
        {{10 + 20}}
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// vue 实例化
    var vm = new Vue({
        el: "#box", // vue渲染开始的地方
        data: {
            myName: "fhj",
        }
    })
</script>

</html>

在这里插入图片描述
4）
我们来看第一个指令 v-html
你有没有想过是否可以将vue data里面的标签内容直接展示在页面上？

5）
指令 v-show 控制显示或者隐藏
在这里插入图片描述
6）
v-if 动态显示或者删除节点

7)
vue-class
我们尝试实现一个最简单的切换按钮

8）
vue-class
动态切换 class还有两个常用写法
对象写法 控制台添加一个对象会被添加到对象中但不会在html 页面更新因为新添加的对象不会被 get set 拦截到
但如果将其他对象设置为false c 可被加到页面
数组写法可实现上面的功能
数组可是使用数组方法比如插入 push（“c”） pop()
在这里插入图片描述

vue-style
对于这个同样也有三目写法对象写法和数组写法
在这里插入图片描述

10)
vue-条件渲染

可以想一下实际使用场景？
如果你的购物车没有东西默认显示购物车空空如也但是购物车有东西的时候显示商品
怎么实现这个功能？

v-if v-else-if v-else 多个条件的判断
也是很简单就可以实现的
在这里插入图片描述

vue-列表渲染
首先需要说明一下 v-for 可遍历数组和对象不过更多用在数组上

<html>

<head>
    <title>test</title>
    <meta charset="utf-8">
    <style>

    </style>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="box">
    <div>
        <ul >
            <li v-for="data in dataArr">{{data}}</li>
        </ul>
    </div>
    <br>

    <div>
        <ul >
            <li v-for="data in dataObj">{{data}}</li>
        </ul>
    </div>
</div>


<body>


</body>

<script>
    var vm = new Vue({
        el: "#box",
        data: {
            dataArr: ['apple', 'pick'],
            dataObj: {
                name: 'fhj',
                age: '100',
            }
        }
    })
</script>

</html>

实现的效果
在这里插入图片描述

小白追梦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
再来一套 vue 全面的内容（一）有源码可以快速上手练习真棒！

新建一个html 文件先利用 cdn 引入一下 vue然后简单操作一下2)变量定义在vue data 里面比较好用3) 我们展示一下这个程序<html><head> <title>test</title> <meta charset="utf-8"></head><body>// 上面这部分使用vue 进行渲染把这个id 已经放到了实例 el中进行渲染 <d...
复制链接

扫一扫