vue的简单认识

发布时间：2024年01月18日

vue是一套前段框架，免除了原生JavaScript中的dom的繁杂操作，简化书写。

vue基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程的重点放在数据上。

简单说就是，我们会把操作数据库的程序简单分为3层：展现层，业务逻辑层和数据层，如果不用vue，我们想在展示层上展示出数据层的信息或者信息的变化，我们只能通过业务逻辑层向数据层获取数据然后在把数据传给展示层把数据呈现在页面上，不能让展示层和数据层直接交互；可我们用了vue之后，我们就可以实现展示层和数据层的双向绑定，实现展现层和数据层的直接交互，我们不需要做任何操作就可以让展示层呈现的数据实时跟随数据层数据的变化而变化。

vue的编写步骤：

?1、在html中引入vue.js文件

?2、在js代码区域，创建Vue核心对象，进行数据绑定（创建Vue对象时，V字母一定要大写）：? ? ? vue对象中的3个基本属性：el? ：指element，用于指示对原代码中的哪个区域用vue控制。? ? ? ? ? ? data ：function（）{return {}}:返回对应的模型数据。methods：{ }? 大括号中用于声明我们自定义的一些方法。

?3、编写视图：用v-model属性绑定return中返回的数据，名字要一样，然后用插值表达式{{数据名}}

vue.js下载网址：安装 — Vue.js

?

?点击开发版本就可以进行下载。

然后在webapp项目下的js包下新建一个vue.js的文件，打开该文件，然后把刚刚下载下来的文件复制粘贴到该文件中就可以了

?下面是代码的简单实现：

注意：别忘了用script标签把该vue.js文件引入！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input v-model="username">
    {{username}}
</div>

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


    //1.创建vue的核心对象
    new Vue({
        el: "#app",
        data(){
            return {
                username:""
            }
        }
        /*data: function () {
            return {
                username:""
            }
        }*/
    })
</script>
</body>
</html>

vue的一些指令：

?v-bind：为html标签绑定属性值，如设置href或者css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <a v-bind:href="url">onclick</a>
<!--    简化写法-->
    <a :href="url">onclick</a>

</div>

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


  //1.创建vue的核心对象
  new Vue({
    el: "#app",
    data(){
      return {
        username:"",
        url:"https://www.baidu.com"
      }
    }
  })
</script>

</body>
</html>

?v-model：在表单元素上创建双向数据绑定。

?v-on：为html标签绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <input type="button" value="button" v-on:click="show()"><br>
<!--  简化写法-->
  <input type="button" value="button" @click="show()">

</div>

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

  //1.创建vue的核心对象
  new Vue({
    el: "#app",
    methods:{
      show(){
        alert("onclick")
      }
    }
  })
</script>

</body>
</html>

?v-if、v-else、v-else-if：条件性的渲染某元素。判定为true时渲染，否则不渲染

?v-show：根据条件展示某元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

  <div v-if="count==3">div1</div>
  <div v-else-if="count==2">div2</div>
  <div v-else>div3</div>
  <hr>
  <div v-show="count==4">div v-show</div>
  <br>
  <input v-model="count">

</div>

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


  //1.创建vue的核心对象
  new Vue({
    el: "#app",
    data(){
      return {
        username:"",
        url:"https://www.baidu.com",
        count:3
      }
    }
  })
</script>

</body>
</html>

v-show与v-if区别：v-if如果不符合条件，在浏览器中打开，查看页面的html代码是没有不符合条件的代码的；而v-show不符合条件是把display属性设置为none，在浏览器页面中看不见，但查看页面的html代码是有该部分代码的

v-for：列表渲染，遍历容器的元素或者对象属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <div v-for="(addr,i) in addrs">
<!--        addr为addrs集合中单一元素的统称 i为自增长的序号，从0开始-->
        {{i+1}}--{{addr}}<br>
    </div>

</div>

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


  //1.创建vue的核心对象
  new Vue({
    el: "#app",
    data(){
      return {
        username:"",
        url:"https://www.baidu.com",
        count:3,
        addrs:["beijing","shanghai","xian"]
      }
    }
  })
</script>

</body>
</html>

?

文章来源:https://blog.csdn.net/hguhbh/article/details/135667126
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章