#需要用到一个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. Service Broadcast简单音乐播放功能

    在Activity上有两个ImageButton,分别控制播放/暂停.停止. @Override    public void onCreate(Bundle savedInstanceState) ...

  2. PHP读取xlsx Excel 文件

    <?php require_once 'simplexlsx.class.php'; if ( $xlsx = SimpleXLSX::parse('pricelist.xlsx') ) { p ...

  3. pytorch保存模型等相关参数，利用torch.save()，以及读取保存之后的文件

    本文分为两部分,第一部分讲如何保存模型参数,优化器参数等等,第二部分则讲如何读取. 假设网络为model = Net(), optimizer = optim.Adam(model.parameter ...

  4. 在windows下安装flex和bison、GCC

    学习Stellar-core 需要依赖项flex .bison .gcc三个依赖项 下载得网址:链接: https://pan.baidu.com/s/1mitCLcs 密码: 3jaj   通过 w ...

  5. 【Luogu】P2324骑士精神（IDA*）

    题目链接 当guess>limit-deep的时候return就好了. guess是估价函数,值为不在自己地盘上的骑士个数.limit是本次迭代阈值.deep是已经走了多少步. 这个优化是显然的 ...

  6. Codevs 2801 LOL盖伦的蹲草计划

    题目描述 Description 众所周知,LOL这款伟大的游戏,有个叫盖伦的英雄.他的伟大之处在于他特别喜欢蹲草丛阴人(XL:蹲草阴人也算英雄?!CZQ:没办法,个个都是这么玩的).某日,德玛西亚与 ...

  7. Redis数据结构之链表

    Redis使用的链表是双向无环链表,链表节点可用于保存各种不同类型的值. 一.链表结构定义1. 链表节点结构定义: 2. 链表结构定义: 示例: 二.链表在Redis中的用途1. 作为列表键的底层实现 ...

  8. 在ScrollView添加一个ListView造成的滚动问题的简单解决办法（）

    正常来说,在ScrollView添加一个ListView后在真机上只会显示ListView的一行多一点,我也不理解为什么会这样,后来我把ListView的layout_height改成400dip,而 ...

  9. 测试开发系列之Python开发mock接口（三）

    于进入主题了,前面的准备工作都已经做好了,下面就开始写逻辑的代码了,代码我已经写好了,每行都加了注释,不明白的可以留言.   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 1 ...

  10. 2018 ICPC 徐州网络预赛 Features Track （STL map pair）

    [传送门]https://nanti.jisuanke.com/t/31458 [题目大意]有N个帧,每帧有K个动作特征,每个特征用一个向量表示(x,y).两个特征相同当且仅当他们在不同的帧中出现且向 ...