第一个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. WLC HA模式下的注意事项

    管理控制器:1.控制器默认开启的是SSH (CLI),Secure Web/https (GUI)2.登录控制器的管理地址为Active设备所控制(主备的配置同步,所以管理地址一致)3.WLC HA状 ...

  2. 加载Properties配置文件

    /** * 加载Properties配置文件 * * @author ZhangHaiNing * @param file 要读取的文件 * @return */ public static Prop ...

  3. Jmeter_请求原件之参数化txt

    把数据存放在TXT上进行参数化,然后运行 用于注册,登录等不同的用例 1.登录接口地址: http://test.lemonban.com/futureloan/mvc/api/member/logi ...

  4. [原]greenplum安装详细过程

    今天又帮其他项目装了一遍GP,加上之前的两次,这是第三次了,虽然每次都有记录,但这次安装还是发现漏写了一些步骤,在此详细记录一下,需要的童鞋可以借鉴. 1.准备 这里准备了4台服务器,1台做maste ...

  5. 助力企业战疫提效保质，腾讯wetest远程办公工具包请查收！

    导语 疫情当前,减少个人的出行与聚集成为了抗击疫情的重要防线.不少企业为了员工的安全与战疫的目标,开始实行在家远程办公的措施.作为开发测试人员,对工作环境与设备软件的条件要求相对较高,当前在远程办公的 ...

  6. header头中 content-type的作用

  7. Caused by: java.lang.NoClassDefFoundError: org/apache/commons/pool2/impl/GenericObjectPoolConfig

    Caused by: java.lang.NoClassDefFoundError: org/apache/commons/pool2/impl/GenericObjectPoolConfig at ...

  8. idea修改项目编码

  9. Python实现一个LRU

    class Node: key = None value = None pre = None next = None def __init__(self, key, value): self.key ...

  10. js判断对象中是否存在某一项和判断是否是对象

    1.判断是否为对象 let str = { name: '第一', age: 12 } console.log(typeof str== "object") 2.判断对象中是否有某 ...