#需要用到一个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. c#笔记2018-12-27

    using System; /*2018-12-27 c#学习笔记 * 1.c#判断if /else if /switch * 2.循环while/for/do-while * 3.循环实例: for ...

  2. x86保护模式-七中断和异常

    x86保护模式-七中断和异常 386相比较之前的cpu   增强了中断处理能力   并且引入了 异常概念 一 80386的中断和异常 为了支持多任务和虚拟存储器等功能,386把外部中断称为中断     ...

  3. Leetcode 354.俄罗斯套娃信封问题

    俄罗斯套娃信封问题 给定一些标记了宽度和高度的信封,宽度和高度以整数对形式 (w, h) 出现.当另一个信封的宽度和高度都比这个信封大的时候,这个信封就可以放进另一个信封里,如同俄罗斯套娃一样. 请计 ...

  4. 82. Spring Boot – 启动彩蛋【从零开始学Spring Boot】

    我们在[28. SpringBoot启动时的Banner设置 ] 这一小节介绍过设置Spring Boot的Banner,但是实际当中,我们希望做的更漂亮,所以也就有了这小节Spring Boot-启 ...

  5. PTA 07-图6 旅游规划 (25分)

    题目地址 https://pta.patest.cn/pta/test/15/exam/4/question/717 5-9 旅游规划   (25分) 有了一张自驾旅游路线图,你会知道城市间的高速公路 ...

  6. Ubuntu Flask安装与配置（待整理）

    工作中开发需要用到python的flask框架,无奈网络上的资源很少,连基本的安装和配置都不全,在这做一下整理,方便以后用到. ———————————————————————————— 由于比较繁琐, ...

  7. BZOJ 4810 [Ynoi2017]由乃的玉米田 ——Bitset 莫队算法

    加法和减法的操作都能想到Bitset. 然后发现乘法比较难办,反正复杂度已经是$O(n\log{n})$了 枚举因数也不能更差了,直接枚举就好了. #include <map> #incl ...

  8. 刷题总结——选课（ssoj树形dp+记忆化搜索+多叉树转二叉树）

    题目: 题目描述 学校实行学分制.每门的必修课都有固定的学分,同时还必须获得相应的选修课程学分.学校开设了 N(N<300)门的选修课程,每个学生可选课程的数量 M 是给定的.学生选修了这M门课 ...

  9. mybatis学习（四）——config全局配置文件解析

    在全集配置文件中引入dtd约束“http://mybatis.org/dtd/mybatis-3-config.dtd”,主要有以下几个标签,现在详细解释下这几个标签的使用 1.properties属 ...

  10. 【2018.10.20】CXM笔记（思维）

    1. 给你个环状字符串,问从哪个地方拆开能使它的字典序最小. 先预处理任意子串的哈希值. 然后枚举拆点,将它与当前最优的拆点比较谁更优(就是从哪拆的字典序更小),具体方法是二分+哈希找出两串最长的相同 ...