第一个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. Leading dimension

    Leading dimension 如果你用LAPACK解过矩阵本征值问题,你一定会接触到这样一个名词,"leading dimension",比如在函数zheev中.我想绝大部分 ...

  2. ResultSet指针回到初始位置的方法及ResultSet介绍

    原文地址: https://blog.csdn.net/walkerjong/article/details/7023872 仅供学习参考使用. 结果集(ResultSet)是数据中查询结果返回的一种 ...

  3. selected中第一项 请选择，隐藏

    如何做到selected 类似input的提示语  placeholder效果. <select class="wyj_dbfs"> <option style= ...

  4. Kali 2020.1 默认密码不是toor

    官方2020年一月28日的文章中指出root/toor is dead. Long live kali/kali. 登录用户名和密码是kali:kali 但是虚拟机镜像下载页面没有及时更新,仍然提示登 ...

  5. Python 中的类与对象 初认识

    一:类的声明 1类的关键字: 从第一天第一个项目起我们就接触过关键字,比如False True is not None return for while elif else import等等,这是语言 ...

  6. Do You Know These Plastic Bottle Processing Terms?

    The molding process of a plastic bottle refers to a process of making a final plastic article from a ...

  7. Selenium 页面加载慢

    Selenium 页面加载慢 问题描述: 使用Selenium获取网页,发现webdriver.get方法会阻塞直到网页全部加载完成,官方提供的三种wait方法仅对网页的ajax有比较明显的效果.对于 ...

  8. PAT A1103 Integer Factorization

    线性dfs,注意每次深搜完状态的维护~ #include<bits/stdc++.h> using namespace std; ; vector<int> v,tmp,pat ...

  9. php的弱类型比较

    1.==和=== ==为弱相等,也就是说12=="12" --> true,而且12=="12cdf" --> true,只取字符串中开头的整数部分 ...

  10. IDEA快捷键/本文仅供自己参考使用如有侵权立删

    好好来学习学习IDEA这款神器,让你的效率飞起!视频来自慕课网 本文转载 更多技巧 代码定位 跳转: 1.IDEA的左侧侧边栏有1:Project.7:Structure和2:Favorities a ...