前端技术发展很快，近日一个项目中想用Vue框架，对此对Vue基础进行了一些学习整理

何为Vue，官网 解释Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架

这里记录主要是关于Vue中基础渲染DOM的一些操作

<!DOCTYPE HTML>

<html>

<head>

    <meta charset="utf-8">

    <!-- moblile use -->

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">

    <title>vue测试</title>

    <script src="https://unpkg.com/vue/dist/vue.js"></script>

    <style type="text/css">

        *{font-size: 16px;}

    </style>

</head>

<body>

    <div class="wrap">

        <!-- 内容层 -->

        <div class="content">

            <h1 class="bannerPic">vue测试</h1>

        </div>

    </div>

    <div id="app">

          <p>{{ message }}</p>

          <input type="text" v-model="message"/>

          <h2 v-if="h2yes">显示这块内容</h2>

          <!-- if不会渲染DOM，show是设置display显隐 -->

          <h2 v-show="h2yes">显示这块内容</h2>

          <p v-if="age>5">年龄{{age}}岁</p>

          <p v-else >年龄小于5岁</p>

          <!-- 事件绑定 -->

          <button v-on:click="say('Hi')">Hi</button>

          <!--缩写语法-->

          <button @click="greet">Greet</button>

          <!--完整语法-->

        <div v-for="n in age">

            <a v-bind:class="now === n ? 'active' : ''">{{ n }}</a>

            <!--缩写语法-->

            <a :class="now === n ? 'active' : ''">{{ n }}</a>

        </div>

    </div>

    <!-- 遍历 -->

    <ul class="list">

        <li v-for="(item,index) in people">

            <p>{{index}} 姓名:{{item.name}} 年龄:{{item.age}} 性别:{{item.sex}}</p>

        </li>

    </ul>

    <script type="text/javascript">

        new Vue({

          el: '#app',

          data: {

            message: 'Hello Vue',

            h2yes:false,

            age: 5,

            now: 2

          },

          methods: {

              say: function(m){

                  alert(m);

              },

              greet: function(){

                  alert(this.message);

              }

          }

        });

        var listData = {people: [{

                    name: 'Jack',

                    age: 30,

                    sex: 'Male'

                }, {

                    name: 'Bill',

                    age: 26,

                    sex: 'Male'

                }, {

                    name: 'Tracy',

                    age: 22,

                    sex: 'Female'

                }, {

                    name: 'Chris',

                    age: 36,

                    sex: 'Male'

                }]};

        var v1 = new Vue({

            el:'.list',

            data:listData

        })

    </script>

</body>

</html>

学习参考链接：

http://www.cnblogs.com/rik28/p/6024425.html

快速入门Vue的更多相关文章

  1. python 全栈开发，Day88(csrf_exempt,ES6 快速入门,Vue)

    BBS项目内容回顾 1. 登陆页面 1. 验证码 1. PIL(Pillow) 2. io 2. ORM 1. 增删改查 3. AJAX $.ajax({ url: '', type: '', dat ...

  2. 08Vue.js快速入门-Vue综合实战项目

    8.1. 前置知识学习 npm 学习 官方文档 推荐资料 npm入门 npm介绍 需要了解的知识点 package.json 文件相关配置选项 npm 本地安装.全局安装.本地开发安装等区别及相关命令 ...

  3. 09Vue.js快速入门-Vue入门之Vuex实战

    9.1. 引言 Vue组件化做的确实非常彻底,它独有的vue单文件组件也是做的非常有特色.组件化的同时带来的是:组件之间的数据共享和通信的难题. 尤其Vue组件设计的就是,父组件通过子组件的prop进 ...

  4. 07Vue.js快速入门-Vue路由详解

    对于前端来说,其实浏览器配合超级连接就很好的实现了路由功能.但是对于单页面应用来说,浏览器和超级连接的跳转方式已经不能适用, 所以各大框架纷纷给出了单页面应用的解决路由跳转的方案. Vue框架的兼容性 ...

  5. 06Vue.js快速入门-Vue组件化开发

    组件其实就是一个拥有样式.动画.js逻辑.HTML结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue的组件和也做的非常彻底,而且有自己的特色.尤其是她 ...

  6. 10分钟快速入门vue.js

    Vue.js是一个轻巧.高性能.可组件化的MVVM库,一套用于构建用户界面的渐进式框架,上手简单,兼容强大. 官方文档:https://cn.vuejs.org/v2/guide/ 下面我们就直接来使 ...

  7. 不会几个框架，都不好意思说搞过前端： Vue.js - 60分钟快速入门

    Vue.js——60分钟快速入门   Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理 ...

  8. vue-element-admin框架快速入门

    年底了,最近公司也不是太忙,感觉今年互联网行业都遇到寒冬,不在是前两年像热的发烫的赛道.这几天完成公司项目系统的优化和升级,目前准备想开发一套前后端分离的系统.       现在java最新最火的技术 ...

  9. Vue.js 快速入门

    什么是Vue.js vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API.作者是尤雨溪,写下这篇文章时vue.js版本为1.0.7 准备 我推荐 ...

随机推荐

  1. 学习TestNG，乍暖还寒冷时

    时间:2019年2月23日,农历正月十九,星期六,天气晴,略有阳光,但下午三点多就不见阳光了. 地点:上海 昨夜雨疏风骤,浓睡不消残酒.试问卷帘人,却道海棠依旧.知否?知否?应是绿肥红瘦 是的,魔都上 ...

  2. OneHot编码

    One-Hot编码 What.Why And When? 一句话概括:one hot编码是将类别变量转换为机器学习算法易于利用的一种形式的过程. 目录: 前言: 通过例子可能更容易理解这个概念. 假设 ...

  3. 哈尔滨工程大学ACM预热赛(A,C,H,I)

    A: 链接:https://ac.nowcoder.com/acm/contest/554/A来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语言655 ...

  4. scrapy爬取58同城二手房问题与对策

    测试环境: win10,单机爬取,scrapy1.5.0,python3.6.4,mongodb,Robo 3T 其他准备: 代理池:测试环境就没有用搭建的flask抓代理,因为我找到的几个免费网站有 ...

  5. 贪吃蛇（简易版）Leslie5205912著

    # include <stdio.h># include <string.h># include <windows.h># include <stdlib.h ...

  6. centos7 安装部署gitlab

    Gitlab官网地址:https://about.gitlab.com/downloads/ Linux系统环境: Centos7 gitlab服务安装之前需要安装一些依赖包:yum install ...

  7. koa中间件

    koa是Express的下一代基于node的web框架  目前有1.x和2.0两个版本 1. Express Express是第一代最流行的web框架  它对node.js的http进行了封装 Exp ...

  8. Atomikos和GTS-Fescar和TCC-Transaction和TX-LCN分布式事物的比较

    什么是分布式事物 分布式系统中保证不同节点之间的数据一致性的事物,叫做分布式事物. 为什么要用分布式事物 微服务,SOA等服务架构模式,一个是service产生多个节点,另一个是resource产生多 ...

  9. centos 7 上Hive-2.1.1的安装与基本操作

    首先安装mysql 1.       在线安装mysql a)        yum install mysql b)        yum install mysql-devel c)        ...

  10. C运算符

    运算符是一种告诉编译器执行特定的数学或逻辑操作的符号. C 语言内置了丰富的运算符,并提供了以下类型的运算符: 算术运算符.关系运算符.逻辑运算符.位运算符.赋值运算符.杂项运算符 C 中的运算符优先 ...