前端技术发展很快，近日一个项目中想用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. nginx+ flume

    nginx 作用: 做负载均衡  nginx和lvs的区别:nginx可以做反向代理 1.上传nginx安装包  tar -zxvf tengine-2.1.02.安装环境  依赖 gcc opens ...

  2. 利用ELK分析Nginx日志

    本文以api.mingongge.com.cn域名为测试对象进行统计,日志为crm.mingongge.com.cn和risk.mingongge.com.cn请求之和(此二者域名不具生产换环境统计意 ...

  3. ssh连接远程主机执行脚本的环境变量问题

    近日在使用ssh命令ssh user@remote ~/myscript.sh登陆到远程机器remote上执行脚本时,遇到一个奇怪的问题: ~/myscript.sh: line n: app: co ...

  4. mysql学习笔记--数据库视图

    一.视图 1. 概念 a. 视图是一张虚拟表,它表示一张表的部分或多张表的综合的结构 b. 视图仅仅是表结构,没有数据.视图的结构和数据建立在表的基础上 2. 创建视图 a. 语法: create [ ...

  5. web项目通过ajax提交数据太大报错

    通过ajax提交大数据 $.ajax({ url:"", data:{xx:xx} }) 这样子大大的字符串四五个一块提交.导致的提交的请求太大 idea报错 浏览器页面报错 解决 ...

  6. 词根：sol = sun（太阳） 词根：sol = alone/single, whole/entire （单独的）

    词根:sol = sun(太阳) sol 这个词根有的书上如刘毅字典,刘洪波英文字根词源精讲等上面说来自拉丁语的sol(=sun),有的书如赢在单词上面说sol 来自拉丁语的solari,但不管哪种说 ...

  7. 泛型List去除重复指定字段

    泛型List去除重复指定字段ID var list=listTemp.Distinct(new IDComparer ()).ToList(); 重写比较的方法: public class IDCom ...

  8. 监控服务器配置(五)-----Redis_exporter安装配置

    1.下载redis_exporter安装包(linux版)到 /opt/minitor/redis_exporter . 下载地址:https://download.csdn.net/download ...

  9. 【转】.NET程序员提高效率的70多个开发工具

    原文:.NET程序员提高效率的70多个开发工具 工欲善其事,必先利其器,没有好的工具,怎么能高效的开发出高质量的代码呢?本文为各ASP.NET 开发者介绍一些高效实用的工具,涉及SQL 管理,VS插件 ...

  10. mysql系列博客

    近期,打算开始我的sql之路了,计划写一些sql方面的博客,初步定的计划,先写mysql,如果有必要,再写oracle.mysql如下: 1.mysql的调优思路 2.mysql 的执行过程 http ...