工作中用了很久vue,但是都是我们这边前端经理封装好的组件,想要看到底部的原理还要从层层代码里面剥离出来,逻辑太复杂,还不如自己一点点整理一下,一步一步走下去.

github地址:https://github.com/manlili/vue_learn里面的lesson01

目录如下:

一 单向数据绑定

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>vue</title>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <script src="js/vue.js"></script>

    </head>

    <body>

        <div class="test">

            {{message}}

    </div>

        <script>

            var vue = new Vue({

                el: ".test",   //必须有el

                data:{

                    message:"这是个测试"

                }

            })

        </script>

    </body>

</html>

二 双向数据绑定

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>vue双向数据成功</title>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

        <script src="js/vue.js"></script>

    </head>

    <body>

        <div class="test">  <!--注意文本和input要在同一个el下面,要不然input输入改变不了p里面内容-->

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

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

    </div>

        <script>

            var vue = new Vue({

                el: ".test",   //必须有el

                data:{

                    message:"这是个测试"

                }

            })

        </script>

    </body>

</html>

三 访问数组数据

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>vue数组</title>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

        <script src="js/vue.js"></script>

    </head>

    <body>

        <ul class="test" v-for="item in message">

                <li>{{item}}</li>

        </ul>

        <script>

            var vue = new Vue({

                el: ".test",   //必须有el

                data:{

                    message:["aa","bb","cc"]

                }

            })

        </script>

    </body>

</html>

四 访问数组中对象数据

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>vue数组中对象</title>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

        <script src="js/vue.js"></script>

    </head>

    <body>

        <ul class="test" v-for="item in message">

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

        </ul>

        <script>

            var vue = new Vue({

                el: ".test",   //必须有el

                data:{

                    message:[{name:"lili"},{name:"haha"},{name:"kkkk"}], //注意此处name这个key值必须保持一致,要不然数组循环没法访问不同的key值

                }

            })

        </script>

    </body>

</html>

五 vue方法

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>vue方法</title>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

        <script src="js/vue.js"></script>

    </head>

    <body>

        <div class="test">

            <p class="pp">{{message}}</p>

            <button @click="changeColor">使用vue方法</button>

    </div>

        <script>

            var vue = new Vue({

                el: ".test",   //必须有el

                data:{

                    message:"这是个测试"

                },

                methods:{

                    changeColor:function () {

                        document.getElementsByClassName("pp")[0].style.color="#ff0000";

                    }

                }

            })

        </script>

    </body>

</html>

Vue入门演示的更多相关文章

  1. Vue入门（二）之数据绑定

    Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一)  http://www.cnblogs.com/gdsblog/p/78 ...

  2. Vue入门系列（三）之Vue列表渲染及条件渲染实战

    Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一)  http://www.cnblogs.com/gdsblog/p/78 ...

  3. Vue 入门之组件化开发

    Vue 入门之组件化开发 组件其实就是一个拥有样式.动画.js 逻辑.HTML 结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue 的组件和也做的非常 ...

  4. Vue 入门之数据绑定

    什么是双向绑定? Vue 框架很核心的功能就是双向的数据绑定. 双向是指:HTML 标签数据 绑定到 Vue 对象,另外反方向数据也是绑定的.通俗点说就是,Vue 对象的改变会直接影响到 HTML 的 ...

  5. Vue 入门之概念

    Vue 简介 Vue 是一个前端的双向绑定类的框架,发音[读音 /vjuː/, 类似于 [view].新的 Vue 版本参考了 React 的部分设计,当然也有自己独特的地方,比如 Vue 的单文件组 ...

  6. wepack+sass+vue 入门教程（三）

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  7. wepack+sass+vue 入门教程（二）

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  8. wepack+sass+vue 入门教程（一）

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  9. vue入门学习（基础篇）

    vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...

随机推荐

  1. unity自动保存项目

    原文来自于:http://wiki.unity3d.com/index.php?title=AutoSave#C.23_-_AutoSave.cs      (奋斗的菜鸟_1029633680) 很多 ...

  2. Go加密解密之RSA[转]

    安全总是很重要的,各个语言对于通用的加密算法都会有实现.前段时间,用Go实现了RSA和DES的加密解密,在这分享一下.(对于RSA和DES加密算法本身,请查阅相关资料) 在PHP中,很多功能经常是一个 ...

  3. Mac OS使用ll、la、l等ls的别名命令

    在linux下习惯使用ll.la.l等ls别名的童鞋到mac os可就郁闷了-- 其实只要在用户目录下建立一个脚本“.bash_profile”,并输入以下内容即可: alias ll='ls -al ...

  4. HandlerMethodArgumentResolver数据绑定无效

    因项目中action参数过多,并且是一些通用的查询参数,所以准备进行对参数统一封装为Map对象,然后由action中传入service中进行处理,查询spring的资料发现可以通过实现HandlerM ...

  5. mysql数据库事件调度(Event)

    mysql中的事件调度器可以定时对数据库增加,删除和执行操作,相当于数据库中的临时触发器,与Linux系统中的执行计划任务一样,这样就可以大大降低工作量. 1.开启事件调度器 [root@node1 ...

  6. 使用uploadify上传控件无法进入后台问题分析

    分别在.net mvc 和java struts2中使用到 uploadify上传 文件,遇到同样的问题,选中文件上传后,文件无法上传,打上断点后发现没有进入后台. 逐步断点发现 项目共同点是加入了 ...

  7. 充实你的素材库！10款免费的 PSD 素材下载

    由于网页设计师没有时间来自己从零开始设计,所以在设计项目中使用网络上已有的设计素材是常见的方式.这就是为什么我们经常会到网上搜索可以免费下载的素材. 今天,我们这里有几套不同的免费的 PSD 素材分享 ...

  8. Direct3D11学习：（二）基本绘图概念和基本类型

    转载请注明出处:http://www.cnblogs.com/Ray1024   一.概述 在正式开始学习D3D11之前,我们必需首先学习必要的基础知识. 在这篇文章中,我们将介绍一下Direct3D ...

  9. Week2 Bing词典Android客户端案例分析

    一.软件调研 运行平台:Android 4.4.4 必应版本:5.2.2 1.bug发现 1.1 bug标题:单词挑战无法加载和刷新 bug详细描述:学习界面中的单词挑战模块,点击后没有任何反映,并且 ...

  10. How to Convert Subversion Repo to Git

    用了比较长时间的 SVN,但现在新的项目都采用Git.之前的项目又不得不维护,那么能不能将项目从SVN迁移到Git呢.答案是肯定的,网上的方案是 git-svn,或者更高级的封装 svn2git. 方 ...