Vue学习之路---No.1(分享心得,欢迎批评指正)
首先为了打消大家对Vue.js存在的顾虑,先通过大家所熟知的JQ作为对比。
都知道JQ的语法相对简单、清楚、使用方便、功能齐全;
那么Vue.js呢,同样的,Vue.js与JQ在很多地方都是相同之处,JQ能处理的事情,Vue.js同样能处理
但是,令人兴奋的就在于,Vue.js在处理某些需求,完成某些功能的时候,比JQ更简单,更快捷,更方便。
那么,我们首先来了解一下Vue.js的关键句 --- --- --- “数据驱动视图”。
按照通俗一点的解释就是,视图随着数据的改变而改变。
我们再次拿众所周知的 JQ 作一个对比,比如说,我们用JQ创建了一个列表,那么列表的数据,我们是从Laravel获取的
于是,当我们要加上某个数据的时候,我们需要遍历所有数据,再把需要的数据加入到相应数据加入到dom节点中去
那如果我们要删除一行表格,我们就需要在这个列表中找到这个DOM节点的位置,再删除这一个节点。这样一想,其实绕了很多圈子
于是一大堆大牛就一起写了Vue.js这个框架,我们如果用Vue.js来处理这个问题,那就很简单,数据+1,列表+1;数据-1,列表-1
没有中间商赚差价。
废话了这么多,我们进入到代码环节。
首先,我们看一下,Vue的基础语法 如下:
new Vue({
el : ' #surprise ',
data{
bigSurprise : 'Hello world !'
}
})
注: 1. el ,一个新鲜的东西,其实很好理解,我们可以把它当作JQ的节点选择器,通过 el:'', 来获取你想拿到的东西
2. data{} 而它,就是我们会经常用到的东西,通常我们在这个花括号里定义某项东西,如上面的代码,我们定义了一个键值对。
3.{{}}里面为数据变量,vue会自动将其解析为HTML
数据定义好了之后,我们开始“驱动”视图,如下:
<div id="surprise" >{{ bigSurprise }}</div>
上述代码就会输出 Hello world!
很简单?好的, 我们进入到下一个环节。
我们给上面的代码添加一个事件,就用我们最常用的点击事件吧;
在添加事件之前,我有必要大致介绍一下,Vue.js最常用的两个基本语法:

Vue学习之路---No.1(分享心得,欢迎批评指正)的更多相关文章
- vue学习之路 - 4.基本操作(下)
vue学习之路 - 4.基本操作(下) 简述:本章节主要介绍 vue 的一些其他常用指令. Vue 指令 这里将 vue 的指令分为系统内部指令(vue 自带指令)和用户自定义指令两种. 系统内部指令 ...
- Vue学习之路之登录注册实例代码
Vue学习之路之登录注册实例代码:https://www.jb51.net/article/118003.htm vue项目中路由验证和相应拦截的使用:https://blog.csdn.net/wa ...
- Vue学习之路---No.4(分享心得,欢迎批评指正)
这里说声抱歉,周末因为有其他事,没有更新博客,那么我们今天继续上周5的说. 老规矩,先回顾一下上一次的重点: 1.利用V-if和v-else来提到show()和hide(),同时要记住,v-else一 ...
- JAVA学习之路与大家分享
这是我四年以前总结的JAVA学习之路,希望对初学者或想从事JAVA开发的人有帮助. 本人是软件工程专业出身,先后学过C.C++.JAVA.VB.delphi等等开发语言以及网络相关管理技术.哎,好久不 ...
- Vue学习之路第一篇(学习准备)
1.开发工具的选择 这个和个人的开发习惯有关,并不做强求,厉害的话用记事本也可以.但是我还是建议用人气比较高的编辑工具,毕竟功能比较全面,开发起来效率比较高. 我之前写前端一直用的是sublimete ...
- Vue学习之路---No.2(分享心得,欢迎批评指正)
昨天我们大致了解了有关Vue的基础知识和语法:今天我们继续在大V这条路上前进. 首先,我们回忆一下昨天提到的相关知识点: 1.了解Vue的核心理念------"数据驱动视图" 2. ...
- Vue学习之路---No.6(分享心得,欢迎批评指正)
我们还是先回顾一下上一次的重点: 1.事件绑定,我们可以对分别用方法和js表达式对事件进行处理 2.当方法名带括号的时候,在方法中一定要传参:而不带括号的时候,vm会自动配置默认event 3.各类事 ...
- Vue学习之路---No.7(分享心得,欢迎批评指正)
老规矩,先回顾一下上回的重点: 1.对于input框,若为单选框,如果没有对其设置value,那么其checked的值将在true Or false之间切换:如果设置了value,那么将会切换valu ...
- Vue学习之路---No.3(分享心得,欢迎批评指正)
同样的,我们先来回顾一下昨天学习的内容: 1.利用v-once来组织双向绑定 2.filter{}过滤器的使用(详情请看上一章) 3.computed(计算属性),利用computed属性实现filt ...
随机推荐
- 读【10问PHP程序员】 有感
http://bbs.phpchina.com/thread-174331-1-1.html 看到前人的文章,总结自己的学习心得,颇有感悟,下面是自己的总结,平时就拿出来多问问自己.1.上了十几年的学 ...
- javascript的页面加载及性能优化(兼容IE7)
通常来说,window.onload就够用了,如果想加载多个事件,我们可以采取以下方式: window.onload = function(){ func1(); func ...
- CentOS 7 部署、连接 数据库mariadb
1.安装mariadb yum -y install mariadb* 2.开启/停止 systemctl start mariadb #启动MariaDB systemctl stop maria ...
- magento1.x 运行在 php7 优惠券的问题
diff --git app/code/core/Mage/Sales/etc/config.xml index 5bb43d7..7db62ca 100644 --- app/code/core/M ...
- CSS继承性和层叠性
一. 继承性 1. 含义:从自己开始直到所包裹的最小的元素,都可以继承一些特有的属性. 2. 作用范围: a. color.text-开头的.line-开头的.font-开头的,均可以继 ...
- 关于ClassLoader
http://blog.csdn.net/zztp01/article/details/6409355 http://blog.sina.com.cn/s/blog_6ec6be0e01011xof. ...
- 【.net 深呼吸】细说CodeDom(10):生成异常处理语句
写完这一篇,大概可以准备过年了,就算是这系列文章的收尾吧. 异常处理语句,就是常说的try...catch语句,有时候,也会带有finally子句.要生成异常处理语句,得用到CodeTryCatchF ...
- 触摸滑动插件 Swiper
Swiper Swiper 是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper中文网里已有详细的使用介绍,我就不多做介绍了. http://www.swiper ...
- Neutron Router 工作原理 - 每天5分钟玩转 OpenStack(142)
上一节我们创建了 router 连通了 vlan100 和 vlan101, 今天分析router是如何工作的.首先查看控制节点的网络结构发生了什么变化: br-int 上多了两个 port: 1. ...
- Node v0.12.5 稳定版发布
Node v0.12.5 稳定版发布了,该版本改进记录主要包括: openssl: upgrade to 1.0.1o (Addressing multiple CVEs) npm: upgrade ...