Vue基础

渐进式JavaScript框架

通过对框架的了解与运用程度,来决定其在整个项目中的应用范围,最终可以独立以框架方式完成整个web前端项目

走进Vue

什么是Vue

渐进式JavaScript框架,可以独立完成前后端分离式web项目的JavaScript框架

渐进式:可以控制一个页面的一个标签,也可以控制一系列标签,也可以控制整个页面,甚至可以控制整个前台

为什么要学习VUE

三大主流框架之一:

  • Angular(脸书,庞大)
  • React(github,精通移动端)
  • Vue(吸取前两者优势,轻量级,文档是中文)

先进的前端设计模式:MVVM

可以完全脱离服务器端,以前端代码复用的方式渲染整个页面:组件化开发(前后端分离开发,节约开发成本)

特点

单页面web应用,在一个页面下,实现局部更换展示内容

数据驱动,通过修改数据,来修改视图(DOM)的内容

数据的双向绑定,一个地方变化,另一个地方也随着变化

虚拟DOM,加载在内存中,速度更快

优势:

有指令(分支结构,循环结构...),复用页面结构等

有实例成员(过滤器,监听),可以对渲染的数据做二次格式化

有组件(模块的复用或组合),快速搭建页面

如何使用Vue

  • 开发版本:vue.js
  • 生产版本:vue.min.js
<html>
...... <body>
<div id="app">
{{ num }}
</div>
</body> <!--CND网络导入-->
<script src="http://cn.vuejs.org/js/vue.js"></script>
<!--本地导入-->
<script src="js/vue.min.js"></script>
<script>
new Vue({
el: '#app', // 选择标签,和页面结构进行绑定
data: {
num: 10, // 页面中变量声明
}
})
</script>
</html>

挂载点el

  • el挂载点,一个挂载点只能控制一个页面结构(优先匹配到的结构)

  • 挂载点挂载的页面标签严格建议用id属性进行匹配(一般习惯用app)
<div id="app">
<div class="d1">
{{ num }}
</div>
<div class="d1">
{{ num }}
</div>
</div> <script>
var app = new Vue({
el: '#app',
data: {
num: 100
}
});
</script>
  • html标签与body标签不能作为挂载点(因为html和body标签不可以被替换,是页面必须的)
el: 'body'  // 不能选择整个body和html页面
  • 是否接受Vue对象,需要看外界是否需要使用Vue中的数据

插值表达式

用于渲染数据,以及简单的运算和和简单的逻辑

1、空插值表达式:{{ }}

空插值表达式并没有任何用,只是名字叫空插值表达式

2、插值表达式的变量在data中可以初始化

3、插值表达式可以进行简单的运算与简单的逻辑

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>{{ info }}</p>
<p>{{ num }}</p>
<p>{{ num + 10 * 2 }}</p> <!--对num进行简单的计算:10 + 10 * 2-->
<p>{{ msg.length + num }}</p> <!--先求出msg的长度,之后加上num(10)-->
<p>{{ msg[4] }}</p> <!--此处对msg进行索引取值-->
<p>{{ msg.split('') }}</p> <!--对msg进行切分,以空格进行切分-->
<p>{{ msg.split('')[4] }}</p> <!--切分后,按索引取值,取的是a-->
</div>
</body>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
info: '此数据将被渲染到info位置',
num: 10,
msg: 'message',
},
})
</script>
</html>

4、插值表达式符合冲突解决,用delimiters自定义(了解)

<div id="app">
<p>[{ num }]</p>
</div>
<script>
new Vue({
el: '#app',
data: {
info: '信息',
msg: 'message',
num: 10,
},
// 控制vue插值表达式符合
delimiters: ['[{', '}]'],
})
</script>

过滤器

过滤器的作用:二次处理数据

1、使用实例成员filters来定义过滤器

2、在页面结构中,用 | 来标识使用过滤器

3、过滤方法的返回值就是过滤器过滤后的结果

4、过滤器可以对1~n个变量进行过滤,同时还可传入辅助性的变量(过滤器方法接收参数是按照传入的位置先后)

<body>
<div id="app">
<!-- 简单使用:过滤的对象会作为参数传给过滤器 -->
<p>{{ num | add(20) }}</p>
<!-- 串联使用:将第一个过滤器结果作为参数给第二个过滤器 -->
<p>{{ num | add(100) | jump(2) }}</p>
<!-- 究极使用 -->
<p>{{ n1, n2 | fn(99, 77) }}</p>
<!-- 你品,你细品 -->
<p>{{ n1, n2 | fn(99, 77), n1, n2 | fn(100) }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
num: 10,
n1: 66,
n2: 88
},
filters: {
add: function (a, b) {
console.log(a, b);
return a + b;
},
jump: function (a, b) {
return a * b
},
fn: function (a, b, c, d) {
console.log(a, b, c, d);
return a + b + c + d;
}
}
})
</script>

第一篇:Vue基础的更多相关文章

  1. LWJGL3的内存管理,第一篇,基础知识

    LWJGL3的内存管理,第一篇,基础知识 为了讨论LWJGL在内存分配方面的设计,我将会分为数篇随笔分开介绍,本篇将主要介绍一些大方向的问题和一些必备的知识. 何为"绑定(binding)& ...

  2. 第一篇:Django基础

    Django框架第一篇基础 一个小问题: 什么是根目录:就是没有路径,只有域名..url(r'^$') 补充一张关于wsgiref模块的图片 一.MTV模型 Django的MTV分别代表: Model ...

  3. oracle系列--第一篇 数据库基础

    第一章 数据库基础 1.1 数据管理概述 1.1.1 什么是数据管理 与我们人类相比,计算机的最大优势就是能够高速.精准地运行,其运行的过程就是执行程序代码和操作指令.处理数据的过程.可以说,数据处理 ...

  4. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  5. Python【第一篇】基础介绍

    一.本节主要内容 Python介绍 发展史 Python 2 or 3? 安装 Hello World程序 变量 用户输入 模块初识 .pyc文件 数据类型初识 数据运算 表达式if ...else语 ...

  6. 第一篇 Flask基础篇之(配置文件,路由系统,模板,请求响应,session&cookie)

    Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架,对于Werkzeug本质是Socket服务端,其用于接收http请求并对请求进行预处理,然后 ...

  7. 第一篇:python基础

    python基础   python基础 本节内容 python起源 python的发展史 为什么选择python3 第一个python程序 变量定义 表达式和运算符 用户输入 流程控制 判断 流程控制 ...

  8. 【Python之路】第一篇--Linux基础命令

    pwd 命令 查看”当前工作目录“的完整路径 pwd -P # 显示出实际路径,而非使用连接(link)路径:pwd显示的是连接路径 .   表示当前目录 ..  表示上级目录 /  表示根目录 ls ...

  9. vue学习指南:第一篇 - vue的介绍

    三大主流框架: 1. Vue.js 是目前最火的一个前端框架,react是最流行的前端框架 (react除了开发网站,还可以开发手机app,Vue语法也是可以用于手机App开发的,需要借助于wexx) ...

  10. 第一篇 -- XML基础

    一.XML简介 XML是一种标记语言,用于描述数据,它提供一种标准化的方式来来表示文本数据.XML文档以.xml为后缀.需要彻底注意的是XML是区分大小写的. 先从一个简单的XML例子来了解下xml基 ...

随机推荐

  1. 【题解】CTS2019珍珠(二项式反演+卷积)

    [题解]CTS2019珍珠 题目就是要满足这样一个条件\(c_i\)代表出现次数 \[ \sum {[\dfrac {c_i } 2]} \ge 2m \] 显然\(\sum c_i=n\)所以,而且 ...

  2. Theia架构

    上一篇:Theia——云端和桌面版的IDE 架构概述 本节描述了Theia的整体架构. Theia被设计为一个可以在本地运行的桌面应用程序,也可以在浏览器和远程服务器之间工作.为了支持这两种工作方式, ...

  3. 小白学 Python 爬虫(33):爬虫框架 Scrapy 入门基础(一)

    人生苦短,我用 Python 前文传送门: 小白学 Python 爬虫(1):开篇 小白学 Python 爬虫(2):前置准备(一)基本类库的安装 小白学 Python 爬虫(3):前置准备(二)Li ...

  4. 变量内容的删除、取代与替换(optional)

    这部分内容非常繁琐且不易记忆且枯燥,用到来查询即可. 1.变量内容的删除 这一部分比较细枝末节,就不再一一手打了,贴范例图片 #:符合取代文字的最短的一个 ##:符合取代文字的最长的一个 2.变量内容 ...

  5. 「newbee-mall新蜂商城开源啦」1000 Star Get !仓库Star数破千!记录一下

    新蜂商城已经开源了 3 个多月左右的时间,在 2019 年的年末,仓库的 Star 数量冲破了 1000,整理本篇文章的时间是 2020 年 1 月 12 日,目前的 Star 数量是 1180 左右 ...

  6. rabbitmq系列(一)初识rabbitmq

    为什么要使用消息中间件 案例:假如我们开发了一个商品抢购网站.这个网站的目的就是在某一时间点进行抢购商品,同时要求用户注册,在注册的时候会同时给用户电话和邮箱中发送验证码,以便完成信息注册.传统做法应 ...

  7. 【转】分布式服务框架 Zookeeper -- 管理分布式环境中的数据

    Zookeeper 分布式服务框架是 Apache Hadoop 的一个子项目,它主要是用来解决分布式应用中经常遇到的一些数据管理问题,如:统一命名服务.状态同步服务.集群管理.分布式应用配置项的管理 ...

  8. Java Calendar类(java.util包)

    Date 类最主要的作用就是获得当前时间,同时这个类里面也具有设置时间以及一些其他的功能,但是由于本身设计的问题,这些方法却遭到众多批评,不建议使用,更推荐使用 Calendar 类进行时间和日期的处 ...

  9. Java类成员之构造器

    构造器含义: 是指使得JVM在构造对象的时候,帮助进行成员变量的初始化的方法. 构造器(构造方法)格式: 1.对于构造方法而言,方法的名称是固定的,和类名相同. 2.对于构造方法而言,它没有返回值,而 ...

  10. python方法的重写

    方法的重写: 在子类中重写定义一个父类拥有的方法, 调用时使用子类中重写定义的方法. 效果图: 代码: class Animal: def run(self): print('动物会跑~~~') de ...