第一个Vue.js案例

使用Vue有如下几步

  1. 引入文件头

  2. 加入数据输出框

  3. 创建Vue对象，定义数据

    案例：

    <!DOCTYPE html>
    
<html lang="en">
    
<head>
    
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <!-- 第一步：引入头文件 -->
    
    <script src="../vue-2.4.0.js"></script>
    
    <title>Document</title>
    
</head>
    
<body>
    
    <!-- 第二步：加入数据输出框 -->
    
    <div id="app">
    
        <div>{{msg + '---' + 123}}</div>
    
        <div>
    
         	{{1+2}}
    
        </div>
    
    </div>
    
    <script>
    
        // 第三步：创建Vue对象，定义数据
    
        var vm = new Vue({
    
            el : '#app',
    
            data : {
    
                msg : 'hello Vue!!!'
    
            }
    
        });
    
    </script>
    
</body>
    
</html>

案例分析

1、示例参数分析

​ el : 元素挂载位置（值可以是css选择器，或者DOM元素）

​ data：数据模型（值是一个对象）

2、插值表达式用法

​ 将值填充到HTML标签中

​ 插值表达式支持基本的计算操（符合js代码规范即可。）

3、Vue代码运行原理分析

​ 概述编译过程的概念（Vue语法->原生语法）

​ 例如：插值表达式就在内部将其解析为js代码

第一个Vue.js案例的更多相关文章

  1. 从零开始搭建一个vue.js的脚手架

    在谷歌工作的时候,我们要做很多界面的原型,要求快速上手,灵活运用,当时用的一些现有框架,比如angular,太笨重了——尤雨溪(Vue.js 作者) vue.js是现在一个很火的前端框架,官网描述其简 ...

  2. 创建Vue.js对象：我的第一个Vue.js输出信息

    <!DOCTYPE html><html><head><meta charset=”utf-8″><title>Vue第一条信息</t ...

  3. Windows10安装node.js，vue.js以及创建第一个vue.js项目

    [工具官网] Node.js : http://nodejs.cn/ 淘宝NPM: https://npm.taobao.org/ 一.安装环境 1.本机系统:Windows 10 Pro(64位)2 ...

  4. vue.js+web storm安装及第一个vue.js

    小白还是自己写一遍吧 1.下载node.js https://nodejs.org/en/download/ 2.安装淘宝镜像(类似于阿里云的maven中央仓库镜像) 安装时间有点长 安装命令:npm ...

  5. Vue的理解：Vue.js新手入门指南----转

    最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在 ...

  6. Vue.js 入门指南

    1.Vue.js是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注 ...

  7. Vue.js新手入门指南

    最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在 ...

  8. vue.js有什么用，是用来做什么的（整理）

    vue.js有什么用,是用来做什么的(整理) 一.总结 一句话总结:用数据绑定的思想,vue可以简单写单个页面,也可以写一个大的前端系统,也可以做手机app的界面. 1.Vue.js是什么? 渐进式框 ...

  9. 前端开发之走进Vue.js

    Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,了解Vue.js的开发流程,并进一步理解如何通过Vue.j ...

随机推荐

  1. 杭电2070 Fibbonacci Number

    Fibbonacci Number Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...

  2. php类的魔术方法也就是带下划线的类方法介绍及应用

    001 PHP把所有以__(两个下划线)开头的类方法当成魔术方法,并且这些魔术方法的参数都不能通过引用传递.php的魔术方法有: 002  __construct(), __destruct(), _ ...

  3. leetcode刷题-- 5. 动态规划

    动态规划思路 参考 状态转移方程: 明确「状态」-> 定义dp数组/函数的含义 -> 明确「选择」-> 明确 base case 试题 53最大子序和 题目描述 53 给定一个整数数 ...

  4. Balanced Lineup -POJ3264

    题意: 告诉你n头奶牛的高度,然后给你一个区间,你需要求出这个区间最高的奶牛与最矮的奶牛之间相差多少 链接:http://poj.org/problem?id=3264 思路: 线段树区间查询,用两个 ...

  5. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：缩写

    <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 缩写</title> <lin ...

  6. Windows对应的"Hello,world"程序

    <Windows程序设计>(第五版)(美Charles Petzold著) https://docs.microsoft.com/zh-cn/windows/desktop/apiinde ...

  7. UCOS-III API函数

    附录:UCOS-III API函数 任务管理 就绪列表 挂起队列 时间管理 信号量 消息队列 内存管理

  8. get方法和load方法的区别

    get方法的特点    get方法采用的是立即检索策略(查询):执行到这行的时候,马上发送SQL查询    get方法查询后返回的是真实对象的本身   load方法的特点    load方法采用的是延 ...

  9. Python 操作rabbitmq中的confirm模式的错误

    今天使用rabbitmq的confirm模式,书上介绍的是pika版本是0.9.6,但是我用的是别的版本,发现这样的错误 Traceback (most recent call last):  Fil ...

  10. 2020年digitalocean最新优惠码100美元奖励

    欧美免备案vps服务器digitalocean我用了四年,创建一台vps速度非常快. 由于中国用户扎堆购买Vultr和Linode线路,导致digitalocean中国用户少,反而更稳定.digita ...