VUE.JS入门基础

Vue2 DAY01
课程介绍
Vue介绍(了解)
Vue准备工作(了解)
MVVM架构详解(了解)

Vue入门(了解)

Vue表达式(掌握)

Vue指令(掌握)

Vue过滤器(了解)

Vue计算属性(了解)

Vue介绍

1.1. Vue是什么

Vue(读音 /vjuː/, 类似于 view)是一个构建数据驱动的
web 界面的渐进式框架。采用自底向上增量开发的设计。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue只关注视图层。

Vue通过新的属性(自定义)和{{表达式}}扩展了 HTML。

Vue的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue学习起来非常简单。

<!doctype
html>

{{ message }}

   <input

v-model=’message’/>

1.2. Vue特性

l
轻量

Vue.js库的体积非常小的,并且不依赖其他基础库。

l
数据绑定

对于一些富交互、状态机类似的前端UI界面,数据绑定非常简单、方便。

l
指令

内置指令统一为(v-*),也可以自定义指令,通过对应表达值的变化就可以修改对应的DOM。

l
插件化

Vue.js核心不包含Router、AJAX、表单验证等功能,但是可以非常方便地根据需要加载对应插件。

l
组件化

组件可以扩展 HTML 元素,封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用

1.3. Vue的历史

Vue是比较新的技术,版本 1.0 是在 2014 年发布的。

Vue作者是
前Google 的员工尤雨溪,在2016年9月宣布以技术顾问的身份加盟阿里巴巴Weex团队。 实现Vue 和 Weex 的 JavaScript runtime 整合,目标是让Vue 的语法跨三端。

Vue准备工作

2.1. Vue准备工作

Vue是一个 JavaScript
框架。它是一个以
JavaScript 编写的库。

Vue是以一个
JavaScript 文件形式发布的,可通过
script 标签添加到网页中:

CDN:全称是Content
Delivery Network,即内容分发网络。CDN的通俗理解就是网站加速,可以让客户端以最快的速度访问资源。

也可以下载Vue文件到本地:http://vuejs.org/v2/guide/installation.html

2.2. 使用Vue

1、加入Vue库

1、拷贝vue.min.js到项目libs目录(如果没有请新建)中;

2、通过 script 标签添加到网页中,就可以使用Vue:

3、检查Vue是否可以用

Vue入门

3.1. 基本理论

Vue扩展了 HTML,为HTML增加了新的功能。

Vue通过 Vue-directive(指令)和 组件扩展了 HTML。其实就是通过自定义标签、属性来增强HTML功能。

常用指令:

v-model 指令把元素值(比如输入域的值)绑定到应用程序。

v-text指令把应用程序数据绑定到元素的更新元素的 textContent。 也可以通过{{表达式}}

v-bind 指令可以动态地绑定一个或多个属性到HTML元素上。

3.2. Hello应用

{{ message }}

网页加载完毕,Vue自动开启。

new Vue({配置})代表建立页面模板和数据间的关系。

v-model 指令把元素值(比如输入域的值)绑定到应用程序.

v-text指令把数据绑定到页面元素中。

3.3. Vue架构认识

Vue是一款开源的JavaScript MV*(MVVM、MVC)框架。

Vue 引入了MVVM (Model-View-ViewModel)模式,他不同于MVC架构.

MVC模式:

Model: 数据模型,一些JavaScript 对象,比如 {name : “小小强”,age : 16};

View: 视图,网页中的内容,一般由HTML模板生成。

Controller : 控制器(路由),视图和模型之间的胶水。

MV VM模式:

Model:它是与应用程序的业务逻辑相关的数据的封装载体,它是业务领域的对象,Model并不关心会被如何显示或操作,所以模型也不会包含任何界面显示相关的逻辑。在web页面中,大部分Model都是来自Ajax的服务端返回数据或者是全局的配置对象。

   View:它专注于界面的显示和渲染,在Vue中则是包含一堆声明式Directive和Component的视图模板。

ViewModel:它是View和Model的粘合体,负责View和Model的交互和协作,它负责给View提供显示的数据,以及提供了View中Command事件操作Model的途径;在vue中“Vue对象实例”充当了这个ViewModel的角色;

View不能直接与Model交互,而是通过Vue实例这个ViewModel来实现与Model的交互。对于界面表单的交互,通过v-model指令来实现View和ViewModel的同步。对于View而言,ViewModel中的DOM Listeners工具会帮助我们监听页面上DOM元素的变化,一旦发生变化,Model中的数据也会发生改变;

对于Model而言,当我们添加或修改Model中的数据时,ViewModel中的Data Bindings工具会帮助我们更改View中的DOM元素。从而实现View和Model的分离,达到对前端逻辑MVVM的分层架构。

VueJS表达式(重点)

VueJS使用 表达式( {{表达式}} ) 把数据绑定到 HTML。

4.1.1.
表达式语法

VueJS表达式写在双大括号内:{{ expression }}。

VueJS表达式把数据绑定到 HTML,这与 v-html指令有异曲同工之妙。

VueJS将在表达式书写的位置"输出"数据。

VueJS表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量。

实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}。

4.1.2.
数字操作

表达式可以算数运算

{{ 10 * 3.123 }}

{{ num1* num2 }}

4.1.3.
字符串操作

表达式使用string属性或方法

字符串长度:{{‘ABCD’.length}
//4

字符串截取:{{‘ABCDEFG’.substring(1,3)}} //BC

字符串转小写:{{‘ABCDEFG’.toLowerCase()}} //BC

4.1.4.
对象操作

Vue中操作对象,就跟JavaScript操作对象一样

{{ person.firstName }}
{{person.sex}}

4.1.5.
数组操作

Vue中操作数组,就跟JavaScript操作数组一样

第三个值为 {{ ns[1] }},长度为:{{ns.length}}

VueJs指令(重点)

5.1. 什么是指令

VueJs通过被称为 指令 的新属性来扩展 HTML。

VueJs通过内置的指令来为应用添加功能。

VueJs允许你自定义指令。

5.2. 指令特征

所有指令都包含在Vue实例管理的范围内。

VueJs指令是扩展的 HTML 属性,带有前缀 v-。

v-model 指令把元素值(比如输入域的值)绑定到应用程序,存储值。

v-model通常用于表单组件的绑定,例如input,select等。它与v-text的区别在于它实现的表单组件的双向绑定

初始化vue应用,vm元素是 VueJs应用程序 的"所有者"

  <p>在输入框中尝试输入:</p>

  <p>姓名:<input type="text"

v-model=“username”>

  <p>你输入的为: {{ username}}</p>

5.3. v-bind指令(重点中的重点)

v-bind 指令告诉 VueJs动态地绑定一个或多个特性,或一个组件 prop 到表达式,因为 Mustache
不能在 HTML 属性中使用,应使用 v-bind 指令。

v-bind指令可以在其名称后面带一个参数,中间用一个冒号隔开。

语法结构:v-bind:argument=“js
expression”

这个参数通常是HTML元素的特性(attribute),比如:

v-bind:src=“imgSrc” 可以缩写: :src=“imgSrc”

:class="{ red: isRed }" 或 :class="[classA,
classB]" …

:style="{ fontSize: size + ‘px’
}" 或 :style="[styleObjectA, styleObjectB]" …

5.5. v-show指令

v-show根据表达式的值来显示HTML元素。当赋值给v-show指令的值为false时元素会被隐藏。

原理其实就是在style当中使用display:none来实现的.

 <script

type=“text/javascript”>

                 //定义应用模块

                 var

vm = new Vue({

              el:'#app',

              data: {

                      show:

true,

                       hide:

false,

                    score: 90

                }

       })

          </script>



         <div id="app">

            <p v-if="show">你能看见我!</p>

               <p v-if="hide">你不能看见我!</p>

               <p v-if="score >= 90">你真棒,考了{{score}}分</p>

</div>

5.6. v-if指令(重点中的重点)

使用v-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果赋值给v-if的表达式的值是false,那对应的元素将会从DOM中移除,否则对应元素的一个克隆将被重新插入DOM中。

vm.isVip=true;

          你是VIP客户,你可以享受VIP特权。

   </div>

5.7. v-for指令(重点中的重点)

v-for 动态遍历一个数组,类似程序的for循环,允许我们取出数组的每一项数据做相应的运算

{{index+1 + ':' + score}}

5.8. v-on指令(重点中的重点)

v-on指令 动态地绑定一个或多个特性,或一个组件 prop 到表达式;其作用和v-bind类似。

  • 注意:如果用在普通元素上时,只能监听
    原生 DOM 事件;但是如果用在自定义元素组件上时,也可以监听子组件触发的自定义事件。

常用的修饰符包括:

.stop - 调用 event.stopPropagation();停止冒泡。



.prevent - 调用 event.preventDefault(); 停止监听原生事件。



.capture - 添加事件侦听器时使用 capture 模式。



.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。



.{keyCode | keyAlias} - 只当事件是从侦听器绑定的元素本身触发时才触发回调。



.once - 触发一次。

.left - (2.2.0) 只当点击鼠标左键时触发。

.right - (2.2.0) 只当点击鼠标右键时触发。

.middle - (2.2.0) 只当点击鼠标中键时触发。

  • 使用手法:

方法处理器 -->

   <button

v-on:click=“doThis”>

   <!--

内联语句 -->

   <button

v-on:click=“doThat(‘hello’, $event)”>

   <!--

缩写 -->

   <button

@click=“doThis”>

   <!--

停止冒泡 -->

   <button

@click.stop=“doThis”>

   <!--

阻止默认行为 -->

   <button

@click.prevent=“doThis”>

   <!--

阻止默认行为,没有表达式
–>

   <form

@submit.prevent>

   <!--  串联修饰符 -->

   <button

@click.stop.prevent=“doThis”>

   <!--

键修饰符,键别名
–>

   <input

@keyup.enter=“onEnter”>

   <!--

键修饰符,键代码
–>

   <input

@keyup.13=“onEnter”>

   <!--

the click event will be triggered at most once -->

   <button

v-on:click.once=“doThis”>

按键修饰符

在监听键盘事件时,我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:

<input
@keyup.enter=“submit”>

全部的按键别名:

.enter

.tab

.delete (捕获 “删除” 和 “退格” 键)

.esc

.space

.up

.down

.left

.right

过滤器

Vue.js 允许你自定义过滤器,可被用作一些常见的文本格式化。

之前自带许多自带的过滤器:

{{msg | currency}}

{{msg | json}}

现在2.0把内置的过滤器全部删除了。

过滤器可以用在两个地方:mustache 插值和 v-bind 表达式(从 2.1.0 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示:

{{ message |
capitalize }}

过滤器函数总接受表达式的值作为第一个参数。

new Vue({

// 创建一个首字母大写的过滤器

filters: {

capitalize:

function (value) {

  if (!value) return ''

  value = value.toString()

  return value.charAt(0).toUpperCase() +

value.slice(1)

}

}

})

过滤器可以串联

{{ message |
filterA | filterB }}

过滤器是 JavaScript 函数,因此可以接受参数:

{{ message |
filterA(‘arg1’, arg2) }}

字符串 ‘arg1’ 将传给过滤器作为第二个参数, arg2 表达式的值将被求值然后传给过滤器作为第三个参数

为了在其他指令中实现更复杂的数据变换,你应该使用计算属性。

计算属性

模板内的表达式是非常便利的,但是它们实际上只用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护。例如:

{{
message.split(’’).reverse().join(’’) }}

在这种情况下,模板不再简单和清晰。在意识到这是反向显示 message 之前,你不得不再次确认第二遍。当你想要在模板中多次反向显示 message 的时候,问题会变得更糟糕。

这就是对于任何复杂逻辑,你都应当使用计算属性的原因。

computed: {

// a

computed getter

reversedMessage: function () {

  //

this points to the vm instance

return this.message.split(’’).reverse().join(’’)

}

}

课程总结

8.1. 重点

Vue环境搭建与入门

Vue指令的使用

8.2. 如何掌握?

通过代码验证原理。

将常见的用法截图保存到文件夹中,时常回顾。

课后练习

1、使用计算属性,完成一个老外名称的拼装

firstName lastName

fullName

2、使用Vue完成一个户籍管理系统

面试题

简述MVVM架构模式

v-if 跟 v-show的区别有哪些??

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值