zoukankan      html  css  js  c++  java
  • VUE介绍

    安装

    vue的安装大体上分成三种方式,第一种是通过script标签引用的,第二种是通过npm(node package manager)来安装,第三种是通过vue-cli命令行来安装。作为初学者,建议直接通过第一种方式来安装,把心思集中在vue的学习上,而不是安装上。

    # 开发环境
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    # 或者是指定版本号
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    # 或者是下载代码保存到本地
    <script src="lib/vue.js"></script>
    
    
    # 生产环境,使用压缩后的文件
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>

    基本使用

    要使用Vue,首先需要创建一个Vue对象,并且在这个对象中传递el参数,el参数全称是element,用来找到一个给vue渲染的根元素。并且我们可以传递一个data参数,data中的所有值都可以直接在根元素下使用{{}}来使用。示例代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vuedemo</title>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    
    </head>
    <body>
    <div id="app">
        <p>{{name}}</p>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                "name": "博客园"
            }
        });
    </script>
    </body>
    </html>
    

    其中data中的数据,只能在vue的根元素下使用,在其他地方是不能被vue识别和渲染的。比如:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vuedemo</title>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    
    </head>
    <body>
    <div id="app">
    </div>
    <!-- 这里渲染不了,页面中展示{{name}} -->
    <p>{{name}}</p>
    
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                "name": "知了课堂"
            }
        });
    </script>
    </body>
    </html>

    另外也可以在vue对象中添加methods,这个属性中专门用来存储自己的函数。methods中的函数也可以在模板中使用,并且在methods中的函数来访问data中的值,只需要通过this.属性名就可以访问到了,不需要额外加this.data.属性名来访问。示例代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vuedemo</title>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    
    </head>
    <body>
    <div id="app">
        <p>{{greet()}}</p>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                "name": "博客园"
            },
            methods: {
                greet: function () {
                    return "HELLO !" + this.name
                }
            }
        });
    </script>
    </body>
    </html>
    

      

  • 相关阅读:
    [再寄小读者之数学篇](2014-10-27 无穷多个无穷小量相乘还是无穷小量么?)
    华中师范大学2012年数学分析考研试题参考解答
    本科时的课程与成绩
    2014 年第六届全国大学生数学竞赛预赛数学类试题参考答案
    [家里蹲大学数学杂志]第322期赣南师范学院数学竞赛培训第11套模拟试卷
    [再寄小读者之数学篇](2014-10-18 利用 Lagrange 中值定理求极限)
    和马有关的成语
    PL/pgSQL学习笔记之一
    PostgreSQL的 initdb 源代码分析之二十五
    PostgreSQL的 initdb 源代码分析之二十四
  • 原文地址:https://www.cnblogs.com/0bug/p/13042114.html
Copyright © 2011-2022 走看看