vue.js是一个前端框架，他与jquery不同，jquery是一个js库，而vue.js是js的前端框架。

vue.js对我们前端页面入侵比较大，而jquery则不然。那我们还为什么要使用vue.js呢，vue.js可以让我们不再关注前端的视图层，只要关注前端的业务逻辑即可；vue.js与jquery并不冲突，但vue.js不建议我们再进行手动的或者使用jquery操作dom元素。我们可以使用jquery进行ajax向后台请求数据或者进行动画操作。jquery可以和vue.js进行搭配使用。vue.js可以提高我们的开发效率，提高页面的渲染效率，双向数据绑定；

vue.js是一个mvvm的结构的

我们先来对比一下后端的mvc模式

做过后台的人很多都能理解上面的模式；

而什么是mvvm呢，Model-View-ViewModel

vm是一个调度者，负责将model与view之前的数据进行同步(渲染)

html对应的是view，后期我们使用vue.js创建出来的vm对象(new Vue)就是viewModel，而vm中的data则是model；

下面我们开始第一个demo；

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title></title>

 </head>

 <body>

     <div id="paraview">

         <!--网速过慢v-cloak有闪烁问题，但他可以插入文本-->

         <p v-cloak>pre {{title}} tail</p>

         <!-- 没有闪烁问题,前后无法插入文本-->

         <p v-text="title"></p>

         <!--可以渲染html-->

         <p v-html="title"></p>

         <input type="button" value="按钮" v-bind:title="buttonStr" />

         <p></p>

     </div>

 </body>

      <script type="text/javascript" src="libs/vue.js"></script>

     <script type="text/javascript">

         var vm = new Vue({

             el: '#paraview',

             data: {

                 title: '<p>parview software</p>',

                 buttonStr:'this is a button'

             }

         });

     </script>

 </html>

怎么样，是不是很容易；

以后的代码都会以这个为模板进行；

v-bind指令可以将属性的值解析为变量

如：<input type="text" v-bind:value="textStr" />

这里的textStr会被解析为变量，既然是变量，就可以写js表达式 如改写为v-bind:value="textStr+'123'"等，v-bind可以省略不写，只保留冒号

在new Vue对象中添加methods对象可以绑定事件；

<input type="button" value="按钮" v-bind:title="buttonStr" v-on:click="btnClick" />

data: {
                title: '<p>parview software</p>',
                buttonStr:'this is a button'
            },
            methods: {
                btnClick: function () {
                    alert('点击了');
                }
            }

v-on:可以简写为@，即@click="btnClick"

v-model是唯一的数据双向绑定指令；

<input type="text" v-bind:value="buttonStr" />
<input type="text" v-model="buttonStr" />

v-bind只能做到数据的单向绑定，而v-model才能做到双向绑定；

v-for可以做循环；

listData:['test1','test2','test3','test4'];

<p v-for='(item,i) in listData'>{{item}}</p>

上面的listData数组里面保存对象仍然是可以解析的，大家可以自行尝试；

同样可以循环对象；

person:{

name:'张飞',

age:56

}

<p v-for='(value,key) in person'>{{value}}------{{key}}</p>

<p v-for='i in 10'>{{i}}</p>

所有的指令中的代码都是解析执行的，所以，例如上面的v-for里面可以执行一个方动态查询出一个集合进行遍历；

如:<p v-for='item in search()'>{{item}}</p>

上面的代码是可行的；

vue.js学习第一天，了解vue.js的更多相关文章

  1. Vue学习第一天：Vue.js指令系统

    1. 如何使用Vue.js? 1.1 直接引入 - <script src="./statics/vue.min.js"></script> - 引入之后在 ...

  2. Vue入门学习总结一：Vue定义

    Vue的功能是为视图提供响应的数据绑定及视图组件,Vue是数据驱动式的,不直接修改DOM而是直接操作数据实现对界面进行修改. 首先我们需要在script中定义一个Vue实例,定义方法如下: var v ...

  3. node.js学习（二）--Node.js控制台（REPL）&&Node.js的基础和语法

    1.1.2 Node.js控制台(REPL) Node.js也有自己的虚拟的运行环境:REPL. 我们可以使用它来执行任何的Node.js或者javascript代码.还可以引入模块和使用文件系统. ...

  4. vue.js学习第一节

    <div id="app" class="app"> <p>{{ message }}</p> <p>{{ in ...

  5. Vue.js 学习笔记之四：Vue 组件基础

    到目前为止,这个系列的笔记所展示的都是一些极为简单的单页面 Web 应用程序,并且页面上通常只有几个简单的交互元素.但在实际生产环境中,Web 应用程序的用户界面往往是由多个复杂的页面共同组成的.这时 ...

  6. Vue语法学习第一课——插值

    学习关于Vue的插值语法 ① 文本值 : "Mustache"语法,即双大括号 <span>Message:{{msg}}</span> 注:双大括号中的m ...

  7. Three.Js学习第一天

    因为工作需求,最近接触到了ThreeJs库,国内学习文档的确少,所以在这里写下bolgs记录学习史,并且给后面学习的人尽一份微博之力. 3D场景依靠WebGL技术.目前支持比较好的浏览器,谷歌.火狐. ...

  8. JS学习第一课

    1.js 按照编写顺序执行 2.输出使用document.write. 3.申明数组 var array = [1,2,3,5] ;  var arrStr = ["sgsg",& ...

  9. JS学习第一天

    JS的三种引入方式: 内联:在标签属性中引入javascript:js代码    <a href="javascript:("helloworld")"& ...

随机推荐

  1. vmware克隆虚拟机后进行网络配置

    1.首先将虚拟机网络模式选为NAT模式 2.点击高级,查看MAC地址 然后编辑:/etc/udev/rules.d/70-persistent-net.rules 其中teh是网卡的名称,每一次克隆新 ...

  2. EFCore Lazy Loading + Inheritance = 干净的数据表 （一） 【献给处女座的DB First程序猿】

    前言 α角 与 β角 关于α角 与 β角的介绍,请见上文 如何用EFCore Lazy Loading实现Entity Split. 本篇会继续有关于β角的彩蛋在等着大家去发掘./斜眼笑 其他 本篇的 ...

  3. R语言实战基本方法

    R语言的主要功能包括数据统计分析方法和数据可视化,数据分析在这一章中主要学习创建基本图形和基本数据分析 一 基本图形 1条形图 barplot(height)  //添加一个条形图,height是一个 ...

  4. Oracle角色，权限，表空间基础语句

    控制台: -sqlplus         -----连接数据库 -conn sys/123456@orcl as sysdba        -----登录sys -create tablespac ...

  5. 根据要求写SQL 语句

    Student(S#,Sname,Sage,Ssex) 学生表 Course(C#,Cname,T#) 课程表 SC(S#,C#,score) 成绩表 Teacher(T#,Tname) 教师表  ...

  6. mybatis分页查询的万能模板

    分页查询项目里太多了,而这种分页查询,在mybatis里面的配置几乎一模一样,今天就整理一个比较好和实用的模板,供以后直接Ctrl+C <select id="queryMember& ...

  7. 记一次msyql导入导致的问题

    公司有个项目要导入150M大小的sql文件,但是导入时报错,去网上找答案,很多人说是因为保留字什么什么的,所以就按照sql文件里面的mysql版本又去下载了一份mysql5.6安装好,但是登陆不了,又 ...

  8. web语言发展史

    引用自CSDN,地址:https://blog.csdn.net/moshenglv/article/details/51590830 提到Web,不得不提一个词就是“互联网”.Web是World W ...

  9. pdf.js使用总结#如何在网页读取并显示PDF格式文档

    pdf.js可以实现在html下直接浏览pdf文档,是一款开源的pdf文档读取解析插件 pdf.js主要包含两个库文件,一个pdf.js和一个pdf.worker.js,一个负责API解析,一个负责核 ...

  10. Python第一章（北理国家精品课 嵩天等）

    1.1程序设计基本方法 IPO 分析问题,划分边界,设计算法: 编写程序,调试测试,升级维护. 1.2Python开发环境配置 1.3实例1:温度转换 1.4Python程序语法元素分析 缩进,#添加 ...