您现在的位置是：首页 >技术教程 >Vue一款流行的JavaScript前端框架网站首页技术教程

Vue一款流行的JavaScript前端框架

淮滨爱奖励有限公司王总 2023-05-30 04:00:02
简介Vue一款流行的JavaScript前端框架

1.Vue简介

        Vue是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

  • Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。
  • 通俗的来讲，vue就是一个已经搭建好的空屋，与单纯使用jQuery这种库比，可以更好地实现代码复用，减少工作量；
  • 与Angular.js这种家具电器一应俱全的框架相比又不会一件件挑选，把自己不喜欢再一件件的扔了，甚至required 必须用且耗费空间的！
  • 简而言之，vue做了必须的事，又不会做职责之外的事。 

 2.Vue的使用

        在webstorm中创建工程（这里先用html文件循序渐进的体验一下Vue）

        2.1 引入vue.js文件

<script src="../js/vue.js"></script>

        2.2在body中创建一个div标签

<body>
    <div id="test">
        {{msg}}
    </div>
</body>

        2.3创建一个<script>标签

 <script type="text/javascript">
        
      var test=new Vue({
            //把当前vue对象挂载到指定的标签元素上，使其vue生效。
            el: "#test", 
            
            data:{
                 msg:"一个真正的man",
            }
      })
  </script>

        2.4运行结果

3.Vue的常用指令

      3.1 v-model

描述：数据双向绑定，这个指令多用于需要绑定值和修改值的操作，比如输入框

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

</head>
<body>
<div id="app">
    <p>{{value}}</p>
    <input type="text" v-model="value">
</div>

<script>
    let config = {
        el: '#app',
        data: {
            value: '球王徐坤'
        }
    }
    let vm = new Vue(config)
</script>
</body>
</html>

3.2 v-show和v-if的区别

v-show和v-if最根本的区别在于显示和隐藏元素的方式。

  • v-show是采用样式的方式控制元素的显示和隐藏，也就是我们常用的display: none，此时虽然元素是隐藏状态，但在html代码中还是存在的。
  • v-if则是通过直接控制元素代码的方式在控制显示和隐藏。也就是说当元素隐藏的时候，该元素本身在html是不存在的。所以v-if的显示和隐藏。

3.3 v-no基础

   描述：绑定事件，监听dom上的事件，并绑定回调函数

语法：v-on:事件名="回调函数" or @事件名="回调函数"。事件绑定指令的表达式一般是回调函数，当绑定的事件被触发就会执行绑定的函数。

3.4v-text 和v-html

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="test">
    <span>{{msg}}</span><hr>

    <span v-text="msg">唱</span><hr>
    <!--v-text:无法解析html标签  v-html可以解析html标签-->
    <span v-html="msg">跳</span>
</div>
</body>
<script>
    let test=new Vue({
        el:"#test",
        data:{
            msg:"<font color='green'>rap</font>",
        }
    })
</script>
</html>

3.5 v-for

循环数据

<div v-for="item in items" :key="item.cid">
  {{ item.text }}
</div>
<div v-for="(item, temp) in items"></div>
<div v-for="(value, key) in object"></div>
<div v-for="(value, age, index) in object"></div>
<div v-for="item in items">
  {{ item.text }}
</div>

 3.6 v-bind

描述：绑定dom属性，绑定表达式与dom属性

语法：v-bind:属性="表达式" or :属性="表达式"

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

<div id="test">
    <input :type="type" :disabled="disabled" />


</div>
</body>
<script>
    let test=new Vue({
        el:"#test",
        data:{
            type: 'number',
            disabled: true
        }
    })
</script>
</html>

 

 

风语者！平时喜欢研究各种技术，目前在从事后端开发工作，热爱生活、热爱工作。

站长推荐