前端技术发展很快，近日一个项目中想用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. 云笔记项目-Spring事务学习-传播NEVER

    接下来测试事务传播属性NEVER Service层 Service层中设置事务传播属性都为NEVER. LayerT层代码 package LayerT; import javax.annotatio ...

  2. python中list操作方法

    1,创建一个列表 只要把逗号分隔的不同的数据项使用方括号括起来即可.如下所示:复制代码 代码如下:list1 = ['physics', 'chemistry', 1997, 2000];list2 ...

  3. Unity3d项目入门之虚拟摇杆

    Unity本身不提供摇杆的组件,开发者可以使用牛逼的EasyTouch插件或者应用NGUI实现相关的需求,下面本文通过Unity自身的UGUI属性,实现虚拟摇杆的功能. 主参考 <Unity:使 ...

  4. innodb 体系结构（后台进程）

    一.后台进程(innodb 1.0.x以前的) 1.master thread master thread具有最高的线程优先级别,其内部由多个循环(loop)组成:主循环(loop).后台循环(bac ...

  5. jemter聚合报告参数指标

    1.聚合报告指标含义 2.性能指标的名称与含义 1)并发:        所有用户在同一时刻对系统执行操作,一般指做同一件事情或操作.2)在线:        所有用户在一段时间内对系统执行操作.3) ...

  6. 我在Python学习中遇到的问题一

    开发工具:PyCharm 系统:macOs Serria 10.12.4 jetbrains出品,作为和idea一个公司的兄弟产品,延续了idea的易用性,并且操作按钮也基本一致 一. 执行环境问题 ...

  7. Windows学习"Network Analysis in Python"

    原代码仓库的地址为 Network Analysis in Python. 主要按照里面的README.md 进行操作,全部仓库有100MB以上.考虑到数据比较大,再加上我对原笔记文件有修改,建议从我 ...

  8. JAVA EE 环境配置——JAVA8 下载安装和 Eclipse EE的下载安装

    说明:我的电脑是win10 64位操作系统 步骤1:下载Java8 浏览器输入www.oracle.com,点击 Downloads,选择 Java ,选择 Java (JDK) for Develo ...

  9. dotnet run 提示System.Net.Sockets.SocketException (10049): 在其上下文中，该请求的地址无效。

    更换端口号试一下. 查看官方文档 PS: 使用帮助命令 -h,可以指定启动配置文件: dotnet run --launch-profile  xxx 例如下面的配置文件,假如我们要使用codes-t ...

  10. JavaScript获取扫码枪相关资料

    https://blog.csdn.net/jiongxian1/article/details/78906124 https://blog.csdn.net/jifengdalu/article/d ...