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 ...
随机推荐
- iOS 之 Swift 新特性
支持所有C和OC的基本类型 提供了Array 和Dictionary两个强劲的集合类型 元组 可选类型 闭包 脚本特性 类型安全
- C-Sharp网络编程案例解析(Socket类的使用)
Server端: using System; using System.Collections.Generic; using System.Text; using System.Net; using ...
- PHP文件夹文件拷贝/复制函数 dir_copy($src = '', $dst = '')
/* * 文件夹文件拷贝 * * @param string $src 来源文件夹 * @param string $dst 目的地文件夹 * @return bool */ function dir ...
- ora-04031
诊断并解决ORA-04031 错误 当我们在共享池中试图分配大片的连续内存失败的时候,Oracle首先清除池中当前没使用的所有对象,使空闲内存块合并.如果仍然没有足够大单个的大块内存满足请求,就会产生 ...
- window.open a.href打开窗口referer的问题
window.open a.href打开窗口referer的问题: JSP: <%@ page language="java" import="java.util. ...
- windows下安装php5.2.*,php5.3.*,php5.4.*版本的memcache扩展
注:如使用集成环境成功率低,请自行配置php apache,表示win7下wamp php5.4.3基础上配置拓展,成功率极低.费时. 拓展安装调试方法: 编写调试php文件 <?php me ...
- Bootstrap 导航 标题栏
Bootstrap 导航 标题栏: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- Spring @Aspect进行类的接口扩展
Spring @Aspect进行类的接口扩展: XML: <?xml version="1.0" encoding="UTF-8"?> <be ...
- 【.net 深呼吸】细说CodeDom(10):生成异常处理语句
写完这一篇,大概可以准备过年了,就算是这系列文章的收尾吧. 异常处理语句,就是常说的try...catch语句,有时候,也会带有finally子句.要生成异常处理语句,得用到CodeTryCatchF ...
- CSS 专业技巧
使用CSS复位 CSS复位可以在不同的浏览器上保持一致的样式风格.您可以使用CSS reset 库Normalize等,也可以使用一个更简化的复位方法: * { box-sizing: border- ...