在看vue.js之前,可以先看这两篇文章,对于为什么要使用vue会有一定帮助

1、Vue.js !important

2、界面之下：还原真实的MV*模式 !important

3、web前端优化之reflow(减少页面的回流)

4、深度剖析：如何实现一个 Virtual DOM 算法

本系列文章是基于官方文档,整理的,旨在让新手快速上手.学习vue.js需要一定基础.

一、声明式渲染

1、实现Hello World的功能

还是熟悉的Hello World,下面用Vue.js的声明式渲染来实现

<body>

<div id="tDiv">

    {{message}}

</div>

</body>

<script type="text/javascript">

    var currentPage=new Vue({

        el:"#tDiv", //指定绑定的目标dom元素的Id

        //绑定数据源

        data:{

            message:"hello World By Vue!"

        }

    });

</script>

此时Vue已经将Dom和数据进行了绑定,所有的元素会随着数据的改变而改变,打开当前页面的控制台,在控制台中改变数据,如下图:

2、通过Vue给Html标签添加属性

<body>

    <div id="test" v-bind:title="message" v-bind:class="message" v-bind:id="message" v-bind:data-id="message" v-bind:src="message" v-bind:href="message" v-bind:align="message">

        {{message}}

    </div>

</body>

<script type="text/javascript">

    var  currentPage=new Vue({

        el:"#test",

        data:{

            message:"啦啦啦"

        }

    });

</script>

同样的,通过控制台修改数据的时候,dom元素也会发生相应的改变.自行实现

二、条件与循环(if语句和for语句在Vue中的使用方式)

1、使用vue的类if语句功能

通过v-if条件指令控制元素的显示隐藏,代码如下:

<body>

<div id="tDiv" v-if="seen">

    显示

</div>

</body>

<script type="text/javascript">

    var currentPage=new Vue({

        el:"#tDiv", //指定绑定的目标dom元素的Id

        //绑定数据源

        data:{

            message:'页面加载于 ' + new Date().toLocaleString(),

            seen:true

        }

    });

</script>

同样在控制台中修改对应的数据,如下图:

结论:上面的例子展示了Vue.Js不仅能将Dom文本绑定到数据,还能将Dom结构绑定到数据

2、使用vue的类for功能

通过v-for指令来遍历数据集合进行展示,代码如下:

<body>

<div id="tDiv">

    <ul v-for="model in list">

        <li>{{model.name}}</li>

    </ul>

</div>

</body>

<script>

    var currentPage=new Vue({

        el:"#tDiv", //指定绑定的目标dom元素的Id

        //绑定数据源

        data:{

                list:[

                    {id:1,name:"张三"},

                    {id:2,name:"李四"},

                    {id:3,name:"王五"}

                ]

            }

    });

</script>

在控制台中给list追加数据,如下图:

会发现ul列表中会多出一条数据,如下图:

三、事件监听

Vue提供了监听Js原生事件的机制,代码如下:

<body>

<div id="tDiv">

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

    <input type="button" v-on:click="resetPContent" value="点我有惊喜">

</div>

</body>

<script>

    var currentPage=new Vue({

        el:"#tDiv", //指定绑定的目标dom元素的Id

        //绑定数据源

        data:{

            message:"Hello World By Vue"

        },

        methods:{

            resetPContent:function(){

                this.message=this.message.split('').reverse().join(''); //reverse颠倒数据元素的顺序

            }

        }

    });

</script>

点击之后,如下图:

注意在resetPContent方法中,更改了数据,相当于改变了应用程序的状态,但是注意这里没有任何操作dom元素的代码,因为所有的dom操作都由vue来进行,这里我们主需要关心数据源.更新dom的操作都由vue来进行.

四、表单输入和应用状态之间的双向绑定

通过v-model指令来实现表单输入和应用状态之间的双向绑定,代码如下：

<body>

<div id="tDiv">

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

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

</div>

</body>

<script>

    var currentPage=new Vue({

        el:"#tDiv", //指定绑定的目标dom元素的Id

        //绑定数据源

        data:{

            message:"Hello World By Vue"

        }

    });

</script>

Vue.js系列之一初识Vue的更多相关文章

  1. Vue.js系列(一)：Vue项目创建详解

    引言 Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,并详细介绍使用vue-cli脚手架工具快速的构建Vu ...

  2. Vue学习系列(一)——初识Vue.js核心

    前言 vue.js是一套构建用户界面的渐进式框架,vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件. vue通过DOM事件操作和指令来进行视图层和模型层的相互通讯,会为每一 ...

  3. vue.js随笔记---初识Vue.js

    1.基础要求: 1.1 HTML CSS JAVASCRIPT 1.2 模块化基础 1.3 Es6初步了解 2.vue.js 轻量级的MVVM模式框架,他同时吸收了recat和angular的优点,他 ...

  4. Vue.js实战：初识Vue.js

    一.Vue.js是什么 简单小巧的核心,渐进式技术栈,足以应付任何规模的应用. 简单小巧指的是Vue.js 压缩后大小仅有17KB 所谓渐进式(Progressive)就是你一步一步,有阶段性地来使用 ...

  5. Vue.js系列之二Vue实例

    每个Vue应用都是通过Vue函数创建一个新的Vue实例开始,代码如下: var vm=new Vue({}); {}是创建Vue应用时的参数对象 1.Vue实例的data属性 当一个Vue对象被创建时 ...

  6. Vue.js系列之三模板语法

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...

  7. 前端框架vue.js系列（9）：Vue.extend、Vue.component与new Vue

    前端框架vue.js系列(9):Vue.extend.Vue.component与new Vue 本文链接:https://blog.csdn.net/zeping891103/article/det ...

  8. Vue.js是什么，vue介绍

    Vue.js是什么,vue介绍 Vue.js 是什么Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用. ...

  9. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

随机推荐

  1. 破解Unity5.3.4f1

    破解的目的是将受限的个人版变为全功能的Pro版,破解后就可以使用所有功能了,界面也变成了黑色的主题. 破解网址(支持最新版的5.3.4f1): http://www.ceeger.com/forum/ ...

  2. s28 LNMP架构服务搭建

    nginx-location使用 location语法 location使用的语法例子为: location [=|~|~*|^~] uri{ 对location语法列表说明. |1ocation | ...

  3. IntelliJ IDEA 2017版 SpringBoot的web项目补充

    一.注解        @SpringBootApplication:Spring Boot项目的核心注解,主要目的是开启自动配置.        @Configuration:这是一个配置Sprin ...

  4. 进度条ProgressBar

    在本节中,作者只写出了进度条的各种样式,包括圆形.条形,还有自定义的条形,我想如果能让条形进度条走满后再继续从零开始,于是我加入了一个条件语句.作者的代码中需要学习的是handler在主线程和子线程中 ...

  5. Python 插件（add-in）基础知识

    1)  Python插件为何物 一个插件(add-in)就是一个客户化,比如嵌入到ArcGIS应用程序中的工具条上的一系列工具,这些工具作为ArcGIS标准程序的补充可以为客户完成特殊任务. ArcG ...

  6. （动态规划 01背包 打印路径） CD --UVA --624

    链接: http://acm.hust.edu.cn/vjudge/contest/view.action?cid=87813#problem/G 每个CD的时间不超过 20没有哪个CD的时间是超过N ...

  7. Android Studio生成get,set,tostring,构造方法

    如何在AndroidStudio开发Android应用程序的时候,在对象模型中生成快捷方式生成get,set,tostring,构造方法等: 有两种方式: 第一种方式:Code –> Gener ...

  8. nodejs+express安装配置（Linux版本）

    在ubuntu下面,直接从源里面安装nodejs的话,此版本还行,但是相关的express等,会比较老. 采用源码安装,先下载nodejs的源码,然后三步: ./configure make make ...

  9. jenkins调用本地搭建sendmail邮件服务器发送邮件

    应用jenkins发送邮件的邮件服务器 SMTP server 可以是本地的,也可以是远程,远程的就不多说了,在此说一下如何在jenkins本地服务器上搭建邮件服务器,并用jenkins发送邮件,详细 ...

  10. QuartzNet3.0实现作业调度

    Quartz是一个完全由JAVA编写的开源作业调度框架. Quartz.NET是Quartz的.NET移植,它用C#写成,可用于.Net以及.Net Core的应用中. 目前最新的quartz.net ...