Vue.js系列之一初识Vue

在看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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏积累沉淀

JavaScript BOM浏览器对象模型

BOM  1.window对象 2.location对象 3.history对象 BOM也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能。BOM缺少...

26360
来自专栏偏前端工程师的驿站

前端魔法堂:onsubmit和submit事件处理函数怎么不生效呢?

前言  最近在用Polymer增强form,使其支持表单的异步提交,但发现明明订阅了onsubmit和submit事件,却怎么也触发不了。下面我们将一一道来。 ...

22770
来自专栏C语言及其他语言

【程序源码】C语言实现窗口抖动功能

程序源码 想必大家都知道QQ聊天对话框中,有一个窗口抖动的功能,相信大家也都用过,但能否用C语言做出来呢? 答案绝对是肯定的,但如何实...

415110
来自专栏娱乐心理测试

三种方式解决vue中v-html元素中标签样式

三.通过 >>> 可以使得在使用scoped属性的情况下,穿透scoped,修改其他组件的值

61120
来自专栏24K纯开源

Android Studio快捷键每日一练(5)

42、Enter键和Tab键补全 快捷键:Enter键或Tab键 用Enter键补全还是用Tab键补全之间,有一个有趣的差别:用Enter键补全的语句可能正是你...

22660
来自专栏中国白客联盟

js之键盘记录

javascript可以在处于当前浏览器窗口监控用户按下的所有键盘,包括账号密码。

22530
来自专栏web前端教室

重学javascript 红皮高程

最近的先行者计划的学习内容是JS高级程序设计,正好我也跟着再重过一遍JS基础的内容。 这行做到现在,我用JQ,写一般的应用,业务逻辑,插件、组件,只要逻辑清晰写...

20680
来自专栏前端小叙

Vue.js 2.0 学习重点记录

Vue.js兼容性 Vue.js.js 不支持 IE8 及其以下版本,因为 Vue.js.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。 V...

39850
来自专栏疯狂的小程序

微信小程序组件化编程和实践(下)

现在我们已经可以做到了两个组件之间的数据传递,那么如何在多个组件间传递数据呢?

55670
来自专栏前端侠2.0

table锁定列的一个方法.及琢磨思路

这是从http://stackoverflow.com找到一个一链接,删除多余的css,加上色就是上图。

43820

扫码关注云+社区

领取腾讯云代金券