欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

Vue.js 入门篇

程序员文章站 2022-06-23 08:28:08
一、Vue.js 官方网址二、安装 vue,js直接 CDN 引入（较慢）（1）开发版本：设计程序时使用（2）生产版本：发布后使用下载引入（推）（1） 下载地址（2）推荐初学者使用开发版本。NPM 安装三、基础知识ES6 定义变量 / 常量：（1）在 ES6 中使用 let 关键字定义变量，相比 ES5 中使用 var 声明的变量，使用 let 声明的变量有作用域，而使用 var 声明的变量没有作用域的概念。（2）在 ES6 中使用 const ....

一、Vue.js 官方网址

二、安装 vue,js

  1. 直接 CDN 引入（较慢）
    （1）开发版本：设计程序时使用
    （2）生产版本：发布后使用

  2. 下载引入（推）
    （1） 下载地址
    （2）推荐初学者使用开发版本。
    Vue.js 入门篇

  3. NPM 安装

三、基础知识

  1. ES6 定义变量 / 常量：
    （1）在 ES6 中使用 let 关键字定义变量，相比 ES5 中使用 var 声明的变量，使用 let 声明的变量有作用域，而使用 var 声明的变量没有作用域的概念。
    （2）在 ES6 中使用 const 声明常量。

  2. 使用原生 js 操作元素
    （1）创建元素，定义 id
    （2）定义一个变量，预存储元素数据。
    （3）将这个变量里的数据赋给元素。
    编程范式：命令式编程

  3. 使用 vue 操作元素
    （1）创建元素，定义id
    （2）创建 vue 实例
    （3）在 vue 实例中根据 id 获取元素，创建数据。
    （4）将数据渲染到元素中。
    （5）具体代码如下
    编程范式：声明式编程

    <body>

    <div id="div0">{{content}}</div>

    <!-- 引入 vue.js 文件 -->
    <script src="../js/vue.js"></script>

    <!-- 编写 vue 代码 -->
    <script>
        // 创建 vue 实例
        const app = new Vue({
            // 获取页面上要被操作的元素
            el:"#div0",

            // 将准备向页面中渲染的数据写到 data 中
            data:{
                content:"你好！Vue"
            }
        })
    </script>
</body>

    （6）页面效果如下图所示：

    Vue.js 入门篇

  4. Mustache 语法
    （1）别名：双大括号语法 {{}}
    （2）直接引入 data 中的数据：{{name}}
    （3）算数运算：{{a+b}} a 和 b 均为 data 中的数据。
    （4）作用范围：只能写在标签的内容部分，不能将其作为标签的属性值进行设置。
    （5）上面代码块中的 div 中使用这种语法将 data 中的 content 渲染到界面中。

  5. 在控制台中修改页面数据
    （1）在浏览器中打开控制器（一般浏览器的快捷键为 F12）
    （2）在 console 中输入 app.content = “SevenOne” 即可同步页面数据。
    （3）如下图所示：

    Vue.js 入门篇

本文地址：https://blog.csdn.net/Mr_peng13/article/details/109232555

相关标签： Vue 学习笔记 vue

上一篇： 明清两位孝烈皇后，她们有着怎样的人生经历？

下一篇： 明朝宦官汪直一生都经历过什么?他最后的结局如何

推荐阅读