前端技术发展很快，近日一个项目中想用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. git 合并冲突 取消合并

    如果有冲突,会出现MERING 使用git merge  --abort命令解决冲突

  2. ECMAScript 6

    参考网上其他帖子,整理如下   ES6 就是ECMAScript 6是新版本JavaScript语言的标准. 增加了如下   Promises Promises是处理异步操作的对象,使用了 Promi ...

  3. Cpython解释器下实现并发编程

    一 背景知识 二 python并发编程之多进程 三 python并发编程之多线程 四 python并发编程之协程 五 python并发编程之IO模型 六 补充:paramiko模块 七 作业 一 背景 ...

  4. FM(Factorization Machines)模型详解

    优点 FM模型可以在非常稀疏的数据中进行合理的参数估计,而SVM做不到这点 在FM模型的复杂度是线性的,优化效果很好,而且不需要像SVM一样依赖于支持向量. FM是一个通用模型,它可以用于任何特征为实 ...

  5. PCA降维参数介绍

    https://www.cnblogs.com/pinard/p/6243025.html#undefined

  6. Laravel 5 速查表

    Artisan // 在版本 5.1.11 新添加,见 http://d.laravel-china.org/docs/5.1/authorization#creating-policiesphp a ...

  7. java实现单例模式

    1.饿汉模式 public class Singleton{ private static Singleton instance = new Singleton(); private Singleto ...

  8. git安装包解压后没有configure

    今天在linux上安装git客户端,解压了tar包后,发现没有configure,无法安装.经查,原来是要先执行autoconf命令,执行后出现configure

  9. java -关于包装类自动装箱与拆箱拓展+整形常量池

    关于自动装箱与拆箱 1.包装类与基本数据类型的自动转换,叫装箱和拆箱(类型自动转换) 2.自动装箱拆箱是在编译器,编译器自动配转换方法,实现装箱和拆箱.所以这个过程发生在编译期 3.只有需要相互类型转 ...

  10. 【转】TCP/UDP简易通信框架源码，支持轻松管理多个TCP服务端（客户端）、UDP客户端

    [转]TCP/UDP简易通信框架源码,支持轻松管理多个TCP服务端(客户端).UDP客户端 目录 说明 TCP/UDP通信主要结构 管理多个Socket的解决方案 框架中TCP部分的使用 框架中UDP ...