第一个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. Redis数据存储结构之String

    前言: 在Redis使用中,我们最常使用的操作是set key value,或 get key value .这里面包含了redis最基本的数据类型:String,字符串类型是redis中最基本的类型 ...

  2. 第二章linux网络基础设置总结！

    一:查看及测试网络 (1)查看活动的网络接头命令:ifconfig (2)查看所有网络接口命令:ifconfig -a (3)查看指定的网络接口(不论该网络接口是否处于激活状态)命令:ifconfig ...

  3. nyoj 11

    水题... #include <stdio.h> #include <algorithm> #include <iostream> int main() { int ...

  4. Python - 编程技巧，语法糖，黑魔法，pythonic

    参考,搬运 http://python-web-guide.readthedocs.io/zh/latest/idiom/idiom.html 待定 1. Python支持链式比较 # bad a = ...

  5. Steam 游戏 《The Vagrant（流浪者）》修改器制作-[先使用CE写，之后有时间的话改用CheatMaker]（2020年寒假小目标08）

    日期:2020.02.07 博客期:146 星期五 [温馨提示]: 只是想要修改器的网友,可以直接点击此链接下载: 只是想拿CT文件的网友,可以直接点击此链接下载: 没有博客园账号的网友,可以将页面下 ...

  6. HTML、HTML5重难点

    一.XHTML与HTML的区别 文档结构 XHTML DOCTYPE 是强制性的 <html>中的 XML namespace 属性是强制性的 <html>.<head& ...

  7. 陶陶摘苹果(0)<P2005_1>

    陶陶摘苹果 (apple.pas/c/cpp) [问题描述]  陶陶家的院子里有一棵苹果树,每到秋天树上就会结出10个苹果.苹果成熟的时候,陶陶就会跑去摘苹果.陶陶有个30厘米高的板凳,当她不能直接用 ...

  8. 夯实Java基础（二十三）——Java8新特征之Stream API

    1.Stream简介 Java8中除了引入了好用的Lambda表达式.Date API之外,另外还有一大亮点就是Stream API了,也是最值得所有Java开发人员学习的一个知识点,因为它的功能非常 ...

  9. Linux命令：netstat命令

    netstat功能:显示网络连接情况 netstat功能选项 -t:tcp协议的连接 -u:udp协议的链接 -l:监听状态的连接 -a:所有状态的连接 -p:连接相关的进程 -n:数字格式显示 -r ...

  10. FFmpeg——命令笔记

    1. 获取 dshow设备列表 ffmpeg -list_devices true -f dshow -i dummy 2. 通过UDP流推ts文件: ffmpeg.exe -re -i zhen.t ...