Vue框架之初识
介绍
vue.js 是用来构建web应用接口的一个库
技术上,Vue.js 重点集中在MVVM模式的ViewModel层,它连接视图和数据绑定模型通过两种方式。实际的DOM操作和输出格式被抽象的方式到指令(Directives)和过滤器(Filters)
在哲学领域内,尽量让MVVM数据绑定API尽可能简单。模块化和可组合性也是重要的设计考虑。vue不是一个全面的框架,它被设计成简单的和灵活的。你可以用它快速原型,或混合和匹配与其他库定义前端堆栈。
Vue。js的API是参考了AngularJS、KnockoutJS Ractive.js Rivets.js。尽管有相似之处,我相信Vue.js提供一个有价值能够让你在现在的一些现有框架中舍取其价值
即使你已经熟悉其中的一些术语,建议您通过以下概念的概述,因为你的这些术语的概念可能在Vue.js的下文中有所不同。https://cn.vuejs.org/v2/guide/instance.html
在没有学习Vue之前 我们需要了解一下es6语法
es6语法基础介绍:
变量的用法:
<!--es6的变量的用法 -->
var a = [];
for (var i = 0;i < 10;i++ ){
a[i] = function () {
console.log(i)
}
}
a[2]();
// 打印结果是 10 ,var声明变量的时候,会使变量提升到最上面
for (let i = 0;i < 10;i++ ){
a[i] = function () {
console.log(i)
}
}
a[2]();
// 打印的结果是 2
箭头函数的使用:
function fv(x) {
return x
} let add = (x) => {
return x
}; let add2 = x => x;
console.log(add2(10)); console.log(fv(2));
console.log(add(2));
对象:
let person = {
name:'sado',
age:18,
hobby:function () {
console.log(this)
// 打印的是当前对象
}
};
person.hobby(); let person = {
name:'sado',
age:18,
hobby: () => {
console.log(this)
// 打印的是上一层对象
}
};
person.hobby();
let person = {
name:'sado',
age:18,
hobby () {
console.log(this)
// 打印的是当前对象
}
};
person.hobby();
类的用法:
class obj{
constructor(name,age){
//constructor等同于python中类的初始化方法__init__
this.name=name;
this.age = age;
// 与python中类的声明很相似
}
// 方法的声明
showname(){
console.log(this.name); } showage(){
console.log(this.age); }
}
// 实例化对象,注需要在类名前加 'new' 关键字
let sado = new obj('sado',18);
sado.showname();
sado.showage();
Vue框架之初识的更多相关文章
- VUE框架的初识
VUE框架的初识 初步了解Vue.js框架(渐进式前端框架) Vue.js是一种轻量级的前端MVVM框架.同时吸收了React(组件化)和Angular(灵活指令页面操作)的优点.是一套构建用户界面的 ...
- vue第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)
第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法) #课程目标 了解 vue 框架的特点 掌握创建 vue 实例 掌握 data ...
- VUE框架学习——脚手架的搭建
#我的VUE框架学习 题记:初识VUE,觉得VUE十分的不错,故决定去深入的了解学习它,工欲善其事,必先利其器,下面是我搭建vue环境的过程! #一.项目搭建及初始化 1.安装:node.js:去官网 ...
- Vue框架Element的事件传递broadcast和dispatch方法分析
前言 最近在学习饿了么的Vue前端框架Element,发现其源码中大量使用了$broadcast和$dispatch方法,而Element使用的是Vue2.0版本,众所周知在Vue 1.0升级到2.0 ...
- 使用vue框架运行npm run dev 时报错解决
使用使用vue框架运行npm run dev 时报错 如下: 原因: localhost:8080 有可能其他软件占用了,导致其他问题的出现 我们可以动态修改地址 解决: 进入项目文件的config文 ...
- Vue框架下的node.js安装教程
Vue框架下的node.js安装教程 python服务器.php ->aphche.java ->tomcat. iis -->它是一个可以运行JAVASCRIPTR 的运行环 ...
- Vue框架axios请求(类似于ajax请求)
Vue框架axios get请求(类似于ajax请求) 首先介绍下,这个axios请求最明显的地方,通过这个请求进行提交的时候页面不会刷新 <!DOCTYPE html> <html ...
- Vue框架之双向绑定事件
Vue框架之双向绑定事件 首先介绍下Vue框架的语法 vue通过 {{temp}} 来渲染变量 {{count+100}} # 求和 v-text # 为标签插入text文本 v-html # 为标签 ...
- Vue框架
Vue框架 环境: windows python3.6.2 Vue的cdn: <script src="https://cdn.jsdelivr.net/npm/vue"&g ...
随机推荐
- 报错:Error starting Jetty. JSON Metrics may not be available.java.net.BindException:地址已在使用
报错背景: 刚在CDH中集成Flume插件,启动报错 报错现象: Error starting Jetty. JSON Metrics may not be available. java.net.B ...
- 一份 Tomcat 和 JVM 的性能调优经验总结!拿走不谢
Tomcat性能调优 找到Tomcat根目录下的conf目录,修改server.xml文件的内容.对于这部分的调优,我所了解到的就是无非设置一下Tomcat服务器的最大并发数和Tomcat初始化时创建 ...
- ROW_NUMBER()函数使用详解
原文地址:https://blog.csdn.net/qq_30908543/article/details/74108348 注:mysql貌似不适用,本人测试未成功,mysql实现方式可参考:ht ...
- 说说Spring XML的头
部分内容截取自(http://blog.csdn.net/zhch152/article/details/8191377,http://iswift.iteye.com/blog/1657537) 在 ...
- windows下大数据开发环境搭建(4)——Spark环境搭建
一.所需环境 · Java 8 · Python 2.6+ · Scala · Hadoop 2.7+ 二.Spark下载与解压 http://spark.apache.org/downloads.h ...
- Meerkat软件
一.准备工作 meerkat 0.189版本和以前的版本相比,支持bwa mem 输出的bam文件,还支持全外显子数据count SV. meerkat原理 1.1 需要准备的软件 unix/Linu ...
- linux的fcntl函数
fcntl可实现对指定文件描述符的各种操作,例如获取/设置 文件的是否可以被读写的状态,等其他状态. int fcntl (int __fd, int __cmd, ...);The remainin ...
- GridView取不到值的问题总结
在ASP.NET开发过程中,使用GridView进行数据表现的时候遇到过两次取不到值的问题.分别是初学的时候与 用了一年多以后.出现的问题并不是身边么高深的技术,但是可能会经常遇到,所以这里我做一下总 ...
- [转帖]TPC-C解析系列01_TPC-C benchmark测试介绍
TPC-C解析系列01_TPC-C benchmark测试介绍 http://www.itpub.net/2019/10/08/3334/ 学习一下. 自从蚂蚁金服自研数据库OceanBase获得TP ...
- 别再裸奔了,你的项目代码安全吗,再不加密就out了
在工作中,有时候我们需要部署自己的Python代码 或进行私有化部署时,尤其现在都是通过docker镜像部署,我们并不希望别人能够看到自己的Python源程序. 加密Python源代码的方式,是将.p ...