vue框架初识

最新推荐文章于 2024-07-08 19:33:43 发布

码里安乐窝

最新推荐文章于 2024-07-08 19:33:43 发布

阅读量149

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43078445/article/details/104689985

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一.什么是Vue?

Vue 类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

官网地址:https://cn.vuejs.org/

二.vue的简单使用

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<div id="mini">
   <p></p>
   <input type="text" v-model="val">
   <h3>{{val}}</h3>
</div>
</body>
</html>
<script src="vue.min.js"></script>
<script >
    new Vue({
   el:'#mini',
   data:{
    val:'你好'
   }

    }) //实例化
</script>

结果：
1.vue数组循环

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<div class="box">
  <ul>
    <li v-for="(item, index) in arr" :key="index">{{item}}</li>
  </ul>
</div>
</body>
</html>
<script src="vue.min.js"></script>
<script>
// 数组循环
new Vue({
        el: '.box',
        data: {
            arr: ['小三', '小四', '小五']
        }
})
</script>

在这里插入图片描述

2.动态修改：v-bind

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<div class="box">
  <a href="http://baidu.com">百度</a><br>
  <a v-bind:href="taobao">淘宝</a><br>
  <a :href="csdn">csdn</a><br>
</div>
</body>
</html>
<script src="vue.min.js"></script>
<script>
    new Vue({
        el: '.box',
        data: {
            taobao: 'http://taobao.com',
           csdn: 'https://www.csdn.net/'
        }
    })
</script>

在这里插入图片描述

3.v-on用来绑定事件

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<div class="box">
  <button v-on:click="clickFn1">按钮1</button>
  <button @click="clickFn2">按钮2</button>
</div>

</body>
</html>
<script src="vue.min.js"></script>
<script>
    new Vue({
        el: '.box',
        data: {

        },
        methods: {
            clickFn1(){
                console.log(123)
            },
            clickFn2(){
                console.log(456)
            }
        }
    })
</script>

点击按钮1 、按钮二，可以看到控制台分别输出123、456！我们可以看到需要绑定的方法必须放在methods里面，可以看到按钮绑定方法有两种方式，v-on:click=“clickFn1”，@click=“clickFn2”

在这里插入图片描述

4.v-if、v-else、v-else-if的使用举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的v-if、v-else、v-else-if的使用</title>
    <!--引入vue 依赖项-->
    <script type="text/javascript" src="vue.min.js"></script>

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

        <p v-if="true">true的时候显示</p>

        <p v-if="false">false的时候隐藏</p><br/>

        <!--  语法： v-if="表达式"   v-else-if="表达式"   v-else  -->
        <p v-if="age<18">未成年</p>
        <p v-else-if="age==18">刚好成年</p>
        <p v-else>成年人</p>

    </div>
    <script>
        /*定义Vue全局变量*/
        var app = new Vue({
            el:"#app",
            data:{
                "name":"helloWord",
                age:17
            }
        });
    </script>
</body>
</html>

在这里插入图片描述

5.v-showf的使用举例：

用来在页面中控制一个元素显示与否，我们可以用v-show来实现，效果类似于 display: block/none; 。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的v-if、v-else、v-else-if的使用</title>
    <!--引入vue 依赖项-->
    <script type="text/javascript" src="vue.min.js"></script>

</head>
<body>
    <div class="box">
  <section v-show="ifShow">显示这些文字</section>
   </div>
 <script>
    var vm = new Vue({
        el: '.box',
        data: {
            ifShow: true
        }
    })
</script>
</body>
</html>

在这里插入图片描述

6.v-show与v-if的区别：

相同点	不同点
控制元素显示	v-if ：对元素进行销毁和重建。
控制元素隐藏	v-show ：只是简单地 CSS 对元素进行切换。

码里安乐窝

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue框架初识

一.什么是Vue?Vue 类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。官网地址:https://cn.vuejs.org/二.vue的简...
复制链接

扫一扫

专栏目录