vue基础使用和指令

已于 2023-06-23 17:05:14 修改
阅读量739 收藏
点赞数
分类专栏： 前端 vue 文章标签： vue.js javascript 算法
于 2023-06-20 22:14:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaolisolovely/article/details/131316289
版权
前端 同时被 2 个专栏收录
16 篇文章 0 订阅
订阅专栏
vue
7 篇文章 0 订阅
订阅专栏

1.基础使用

1. <script src="cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>

可以使用cdn

也可以保存在本地，使用时，导入即可

 小案例：点击自动切换图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <button v-on:click="handlshow">点我换图片</button>
    <img v-bind:src="url" alt="" @click="hanglow">

</div>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            url:'https://picx.zhimg.com/v2-40db00ef919cb6592655488f2d2fc87f_1440w.jpg',
            //图片列表
            url_list:[
                'https://pic4.zhimg.com/80/v2-a369d0a1a7f6bb5cd9047ed8bb39cc1f_720w.webp',
                'https://pic3.zhimg.com/80/v2-d8ce83d396bda6fca1cd2dc28d4627f2_720w.webp',
                'https://pic3.zhimg.com/80/v2-373b826f8ff78f2a594f921f440cb5aa_720w.webp',
                'https://pic4.zhimg.com/80/v2-a2098afc8689b516f5509eae96b89733_720w.webp',
                'https://pic4.zhimg.com/80/v2-8619ab6a39dfe9b78a2a3c90a554f8c3_720w.webp',
                'https://pic3.zhimg.com/80/v2-7301042500eb9683e4a812d1990732ea_720w.webp',
            ]
        },
        methods:{
            //函数
            handlshow(){
                var _this=this     //将最初的this赋值给_this  方便后面使用
                this.timer=setInterval(function(){    //etInterval(function(){},1000)  定时器
                    t=Math.floor(Math.random()*_this.url_list.length)
                    // console.log(_this.url_list[t])
                    _this.url=_this.url_list[t]
                }, 1000)
                console.log(this.timer)

            },
            hanglow(){
                console.log(this.timer)
                clearInterval(this.timer);      //结束定时器    this.timer定时器的名字

            }
        }
    })
</script>

</body>
</html>

2.插值语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>

</head>
<body>
<div id="app">
    <p>字符串：{{name}}</p>
    <p>数字：{{age}}</p>
    <p>数组：{{hobby}}--->{{hobby[1]}}</p>
    <p>对象：{{wife}}--->{{wife['name']}}---->{{wife.age}}</p>
    <p>标签形式字符串：{{a}}--->说明不存在xss攻击</p>
    <p>-----插值语法，还可以放，简单表达式和函数(后面了)-----</p>
    <p>简单表达是：{{1 + 1}}</p>
    <p>三目运算符【条件?符合条件执行这个:不符合条件】：{{10>2?'正确':'不正确'}}</p>

</div>


</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: 'lqz',
            age: 19,
            hobby: ['篮球', '足球', 'spa'],  // js 就叫数组
            wife: {name: '刘亦菲', age: 38},   // js 中叫对象
            a: '<a href="http://www.baidu.com">点我看美女</a>'  // 标签形式字符串


        }
    })


</script>
</html>

3.文本指令

# v-text:把变量渲染在标签内部
# v-html：把标签类型的字符串直接渲染成标签
# v-if: 控制标签显示与否，直接删除或加入标签
# v-show:控制标签显示与否，通过样式的display: none;控制显示与否

4.事件指令

# 用的最多的就是点击事件，给某个标签绑定一个点击事件，当点击一下，就执行某个函数

# 使用方式
v-on:事件名='函数名'
# 重点：v-on:事件='函数名'
可以简写成：
@事件='函数名'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <button v-on:click="handlshow">点我换图片</button>
    <img v-bind:src="url" alt="">

</div>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            url:'https://picx.zhimg.com/v2-40db00ef919cb6592655488f2d2fc87f_1440w.jpg',
            //图片列表
            url_list: 'https://pic4.zhimg.com/80/v2-a369d0a1a7f6bb5cd9047ed8bb39cc1f_720w.webp',
        },
        methods:{
            //函数
            handlshow(){
                this.url=this.url_list
            },

        }
    })
</script>


</body>
</html>

5.属性指令

# 标签上   name   id  class  src  href ,height  属性
    如果这样，name='xx' 就写死了，我们想动态的绑定变量，变量变化，属性的值也变化
    
    
#  v-bind:属性名='变量'
# 简写成： :属性名='变量'

 案例同事件指令

6.条件渲染-------v-if

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>

</head>
<body>
<div id="app">

    <div v-if="score>90&&score<=100">优秀</div>
    <div v-else-if="score>80&&score<=90">良好</div>
    <div v-else-if="score>=60&&score<=80">及格</div>
    <div v-else>不及格</div>

</div>
</body>


<script>
    let vm = new Vue({
        el: '#app',
        data: {
            score: 92
        },
        methods: {}
    })


</script>
</html>

7.v-for---循环

v-for  都可以循环  -----# 数字，字符串，数组，对象

# 看到别人写v-for时，在标签上都会加一个 key 属性，目的是为了提高虚拟dom的替换效率
<el-carousel-item v-for="item in 4" :key="item">
# key 的值必须唯一，如果不唯一就报错

###### 以后如果数据变了，页面没有发生变化#####
Vue.set(对象, key, value)
Vue.set(数组, 索引, 值)
 

案例：显示购物车

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <script src="./js/vue.js"></script>

</head>
<body>
<div id="app">

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <h1 class="text-center">购物车</h1>
                <div class="pull-right">
                    <button class="btn btn-danger" @click="handleClick">加载购物车</button>
                </div>

                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>id号</th>
                        <th>商品名</th>
                        <th>商品价格</th>
                        <th>商品数量</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="good in good_list">
                        <th scope="row">{{good.id}}</th>
                        <td>{{good.name}}</td>
                        <td>{{good.price}}</td>
                        <td>{{good.count}}</td>
                    </tr>
                    </tbody>
                </table>


            </div>

        </div>

    </div>

</div>
</body>


<script>
    let vm = new Vue({
        el: '#app',
        data: {
            good_list: []
        },
        methods: {
            handleClick() {
                this.good_list = [
                    {'id': 1, 'name': '小汽车', 'count': 2, 'price': 100000},
                    {'id': 2, 'name': '脸盆', 'count': 1, 'price': 23},
                    {'id': 3, 'name': '方便面', 'count': 3, 'price': 6},
                    {'id': 4, 'name': '钢笔', 'count': 4, 'price': 5},
                ]
            }
        }
    })


</script>
</html>

淘淘桃
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue基础-vue指令
Autumnxwq的博客
10-16 1062
Vue 基础指令
Vue基础与常见指令
Jinx_baobao的博客
03-21 988
1、Vue简介 1.1 什么是Vue Vue 是一种用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 1.2 Vue的特点是什么 1、组件化，清晰的文档结构 2、声明渲染，数据渲染视图（页面） <body> <!-- 写视图层，我们要展示的内容 --&
Vue2 基础一指令
jiuchabaikaishui的专栏
03-08 749
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架，。
Vue.js基础指令
m0_48670609的博客
02-05 1221
Vue.js基础指令
Vue 组件基础——自定义指令
qq_40930841的博客
05-05 506
当内置指令不能满足开发需求时，可以通过自定义指令来拓展额外的功能。自定义指令的主要作用是方便开发者通过直接操作DOM元素来实现业务逻辑。Vue中的自定义指令分为两类，分别是私有自定义指令和全局自定义指令。私有自定义指令是指在组件内部定义的指令。私有自定义指令可以在定义该指令的组件内部使用。全局自定义指令是指在全局定义的指令，全局自定义指令可以在全局使用。常用的自定义指令生命周期函数的参数如下表所示。1.1私有自定义指令如果使用setup语法糖，任何以“v”开头。
vue中的自定义指令
无远弗届
06-16 1917
Vue自定义指令提供了一种强大的方法来扩展Vue的功能。它们允许开发者直接对DOM元素进行低层次操作，而无需编写大量的模板或者JavaScript代码。自定义指令可以响应Vue的响应式系统，从而在数据变化时触发相应的DOM更新。Vue提供了一些内置指令，如v-modelv-ifv-for等，它们已经覆盖了很多常见的场景。然而，内置指令的功能是有限的，自定义指令则提供了更多的灵活性和控制力。动画和过渡：实现复杂的动画效果。DOM操作：在不使用额外库的情况下，直接操作DOM。表单验证。
vue基础指令和基础属性
粥可温
03-25 1801
vue的指令 v-text 或 {{}} 输出字符串 <div v-text="text"></div> <div>{{html}}</div>
【vue2基础教程】vue指令
m0_62599305的博客
03-08 1351
Vue.js 是一款流行的 JavaScript 框架，广泛应用于构建交互性强、响应速度快的现代 Web 应用程序。Vue 指令是 Vue.js 中的一项重要特性，它们允许开发者将特定的行为应用到 HTML 元素上，从而使得 DOM 操作更加便捷和灵活。在本篇文章中，我们将介绍 Vue 指令的基础知识，帮助读者快速入门 Vue.js 开发。本文介绍了 Vue.js 中的指令，它们是 Vue.js 框架中的重要特性之一。
vue基础指令练习
m0_64895976的博客
04-07 818
<!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>Do.
vue基础用法&基础原理整理
热门推荐
hangao233的博客
04-06 6万+
vue基础用法&基础原理整理 1. vue基础知识和原理 1.1 初识Vue 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象 demo容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法 demo容器里的代码被称为【Vue模板】 Vue实例和容器是一一对应的 真实开发中只有一个Vue实例，并且会配合着组件一起使用 {{xxx}}是Vue的语法：插值表达式，{{xxx}}可以读取到data中的所有属性 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新
vue快捷键与基础指令详解
08-30
本文将详细介绍 Vue 快捷键和基础指令的使用方法和实践应用。 一、快捷键 快捷键是 Vue 中的一种简写方式，可以简化代码的编写。以下是一些常用的快捷键： 1. v-bind 可以简写成： <img src="{{url}}"> → 2. ...
Vue自定义弹窗指令的实现代码
10-18
以上是关于Vue自定义弹窗指令实现的知识点介绍，文章通过实例代码详细地讲解了如何在Vue2.0版本中创建和使用自定义弹窗指令，这对于那些希望通过Vue扩展其应用交互功能的前端开发者来说，是非常有价值的知识。
vue 使用自定义指令实现表单校验的方法
10-18
首先，让我们深入了解一下Vue自定义指令的两个关键生命周期钩子函数：`inserted` 和 `updated`。`inserted` 钩子在元素被插入到DOM后调用，而`updated`在元素及其子元素更新后调用。在表单校验的场景中，我们通常在...
Vue3基础教程-指令.pdf
06-12
### Vue3基础教程-指令详解 #### 一、引言 Vue.js 是一款非常流行的前端框架，它通过简洁的 API 设计使得开发者可以快速构建出响应式的用户界面。Vue3 作为 Vue.js 的最新版本，在原有基础上进行了诸多优化与改进...
详解Vue.directive 自定义指令
10-17
自定义指令允许开发者扩展 Vue 的基础功能，实现一些特定的 DOM 操作或复杂行为。下面我们将深入探讨这个话题。 首先，我们要理解什么是全局 API。全局 API 是不在 Vue 构造器内部，而是在全局范围内可以直接使用的...
详细介绍 Vue3 的 watch 和 watchEffect
weixin_52648900的博客
08-15 962
非常详细介绍了vue3的watch和watchEffect区别和联系
Element-04.组件-Dialog对话框
最新发布
程小白的博客
08-16 280
【代码】Element-04.组件-Dialog对话框。
element table 判断当前行是否展开和只展开一行
m0_68716504的博客
08-15 438
element组件提供了table的展开和收起功能，并提供了expand-change事件用来监听table行的展开和收起在一些特殊情况下如：处理异步数据时，希望展开行时请求接口，关闭行时不用请求，但是expand-change，无论是展开还是收起都会触发，于是就希望能有一个类似isExpended布尔类型的状态属性来判断是否调用接口。
Vue 生命周期详解含demo、面试常问问题案例
qq_34419312的博客
08-16 1108
Vue 生命周期详解、面试常问问题案例 含 demo
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值