#需要用到一个vue文件，还有一个自己的js文件main.js
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app">

    <div>

        <input type="text" v-model="name">

        <span v-show="name">你的名字是:{{name}}</span>

    </div>

    <div>

        <input type="text" v-model="age">

        <span v-show="age">你的年龄是:{{age}}</span>

    </div>

    <div>

        <input type="text" v-model="sex">

        <span v-show="sex">你的性别是:{{sex}}</span>

    </div>

</div>

<script src="../lib/vue.js"></script>

<script src="js/main.js"></script>

</body>

</html>

js代码：

var app = new Vue(

    {

        el:"#app",

        data:{

            name:"",

            age:"",

            sex:"",

        }

    }

)

vue的安装以及语法介绍的更多相关文章

  1. Vue.js 学习入门：介绍及安装

    Vue.js 是什么? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层 ...

  2. Vue.js模板语法介绍

    Vue.js模板.指令 模板语法概述 1.如何理解前端渲染? ​ 把数据填充到HTML标签中,一般我们使用Ajax将数据从后台查询出,结合模板() 2.前端渲染方式 2.1.原生js拼接字符串 ​ 使 ...

  3. 总结Vue第一天：简单介绍、基本常用知识、辅助函数

    总结Vue第一天:简单介绍.基本常用知识.辅助函数 中文官网:https://cn.vuejs.org/v2/guide/syntax.html 遇到不熟悉的可以先看一下官网,然后再看一下一些别人写的 ...

  4. Webstorm添加新建.vue文件功能并支持高亮vue语法和es6语法

    转载:https://blog.csdn.net/qq_33008701/article/details/56486893 Webstorm 添加新建.vue文件功能并支持高亮vue语法和es6语法 ...

  5. node服务的安装以及vue的安装

    相信很多朋友都在装node服务和安装vue的时候会遇到一些问题,下面为大家详细介绍node服务的安装以及vue的安装: 1.nodeJs官网下载版本(根据自己电脑的配置进行相应下载即可):默认安装路径 ...

  6. vue对比其他框架详细介绍

    vue对比其他框架详细介绍 对比其他框架 — Vue.jshttps://cn.vuejs.org/v2/guide/comparison.html React React 和 Vue 有许多相似之处 ...

  7. 01: vue.js安装

    1.1 vue.js安装与基本使用 官网:https://cn.vuejs.org/ 1.使用之前,我们先来掌握3个东西是用来干什么的 1. npm: Nodejs下的包管理器. 2. webpack ...

  8. Webstorm 添加新建.vue文件功能并支持高亮vue语法和es6语法

    添加新建.vue文件功能 ①Webstorm 右上角File-Plugins 搜索vue如果没有就去下载 点击serch in repositories ②点击安装vue.js ③安装成功后点击右下角 ...

  9. npm安装使用及vue脚手架安装

    公司在前端用vue开发项目,那就学习下啦,第一步,在安装vue-devtools过程中,npm作为官方manual installtion方式,肯定必不可少. NPM是随同NodeJS一起安装的包管理 ...

随机推荐

  1. jquery插件编写【转载】

    如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jq ...

  2. c#笔记2018-12-26

    using System; /*C#学习笔记2018-12-26 * 1.@逐字字符串 * 2.数据类型转换 * 3.变量声明和占位符使用 * 4.接收用户输入值 * 5.const 关键字 * 6. ...

  3. 学习笔记5——wp主题开发

    我觉得学习wordpress插件开发之前还是得先理解一下wp的主题开发,循序渐进才能学好wordpress开发,话不多说,接下来整理一下这两天学习的wordpress主题开发的一些心得和体会,与大家一 ...

  4. MySQL5.7 服务 crash 后无法启动

    事发背景 测试环境更换数据盘,直接采取在线将数据目录暴力拷贝到新盘,然后将原服务关闭,启用新盘. 服务是可以正常启动的,但是没多会开发就反应服务down了,错误日志输出 -- :: InnoDB: F ...

  5. 01-offsetWidth和offsetHeight

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. GTY's birthday gift【矩阵快速幂】

    题目大意:GTY的朋友ZZF的生日要来了,GTY问他的基友送什么礼物比较好,他的一个基友说送一个可重集吧!于是GTY找到了一个可重集S,GTY能使用神犇魔法k次,每次可以向可重集中加入一个数 a+b ...

  7. 常州模拟赛d4t1 立方体

    题目描述 立方体有 6 个面,每个面上有一只奶牛,每只奶牛都有一些干草.为了训练奶牛的合作精神,它 们在玩一个游戏,每轮:所有奶牛将自己的干草分成 4 等份,分给相邻的 4 个面上的奶牛. 游戏开始, ...

  8. bzoj 4401 块的计数 思想+模拟+贪心

    块的计数 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 455  Solved: 261[Submit][Status][Discuss] Descr ...

  9. ORACLE:除去回车符,换行符

    ORACLE:除去回车符,换行符 replace(fa,chr(),'') ; --- 除去回车符 replace(fa,chr(),'') ; --- 除去换行符  

  10. UVa1363 Joseph's Problem

    把整个序列进行拆分成[k,k/2),[k/2, k/3), [k/3,k/4)...k[k/a, k/b)的形式,对于k/i(整除)相同的项,k%i成等差数列. /*by SilverN*/ #inc ...