前端技术发展很快，近日一个项目中想用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. ES6学习笔记(字符串和数值)

    (一)字符串的扩展 1.字符串的遍历 for (let codePoint of 'foo') { console.log(codePoint) } // "f" // " ...

  2. python_Tkinter

    Tkinter相关 python支持多种图形界面的第三方库,包括:TKwxWidgetsQTGTK等等但是python自带的库是支持TK的TKinter,使用使用Tkinter,无需安装任何包,就可以 ...

  3. scikit_learn,NLTK导入分类器相关流程命令

  4. laravel 模型操作

    1. 简介 2. 创建模型 //模型文件默认创建在app目录下,也可以指定创建在某个文件夹下,如Model/Goods 1. php artisan make:model Goods 2. 这种方式会 ...

  5. linux环境下安装jmeter，启动执行脚本

    1.下载安装jmeter安装包 下载链接: https://pan.baidu.com/s/1KPhwNDsmTIAy41fEopHQEw 提取码: spwd 2.上传linux平台,解压jmeter ...

  6. 报错：The import android.support cannot be resolved

    下一个android-support-v7-appcompat.jar 然后导入即可 :

  7. pip升级后出现cannot import name 'main'

    运行pip install  --upgrade pip还有出现这个情况. cd /usr/bin/pip3 修改成: from pip import __main__ if __name__ == ...

  8. java_25.1字节转为字符OutputStreamWriter

    public class Demo { public static void main(String[] args){ try { FileOutputStream fos = new FileOut ...

  9. JMeter 通过JSON Extractor 插件来提取响应结果

    接口响应结果,通常为HTML.JSON格式的数据,对于HTML的响应结果的提取,可以通过正则表达式,也可以通过XPath 来提取. 对于JSON格式的数据,可以通过正则表达式.JSON Extract ...

  10. nio编程

    NIO主要有三大核心部分:Channel(通道),Buffer(缓冲区), Selector.传统IO基于字节流和字符流进行操作,而NIO基于Channel和Buffer(缓冲区)进行操作,数据总是从 ...