一:什么是Vue?

vue是一个渐进式的JavaScript框架,采用的是MVVM模式。Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

二:vue的安装

1: 官网下载安装包 https://cn.vuejs.org/v2/guide/installation.html

  直接用 <script> 标签引入,Vue 会被注册为一个全局变量。

2:CDN链接到一个你可以手动更新的指定版本号

  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

  你可以在 cdn.jsdelivr.net/npm/vue 浏览 NPM 包的源代码。

3:在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如webpack或browserify模块打包器配合使用。

  $ npm install vue

4:使用官方提供的CLI工具,为单页面应用 (SPA) 快速搭建繁杂的脚手架

  npm install  -g @vue/cli

三:MVVM模式

四:创建一个Vue实例

1:每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的,当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。

:2:除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来,例如:

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

五:v-text和v-html

1:数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值;Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时,绑定的数据对象上 msg 属性发生了改变,插值处的内容都会更新。

2:v-text更新元素的 textContent。如果要更新部分的 textContent ,请使用 {{ Mustache }} 插值。

3:双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,你需要使用 v-html 指令,你的站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XSS攻击。请只对可信内容使用 HTML 插值,绝不要对用户提供的内容使用插值。

4:通过使用v-once指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定;

<span v-once>这个将不会改变: {{ msg }}</span>

六:v-bind绑定属性和v-on绑定事件

1:v-bind 指令可以用于接收一个“参数”,在指令名称之后以冒号表示,响应式地更新 HTML 特性,可以写js表达式。

2:v-on 指令,它用于监听 DOM 事件

七:小练习—跑马灯

实现前一个字走到头后跳转到最后一个字后面接着向左走,运用了事件绑定,数据获取和更改

八:事件修饰符

修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()。

提示:

事件冒泡,即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点

事件捕获:思想是不太具体的DOM节点应该更早接收到事件,而最具体的节点应该最后接收到事件

九:v-model双向数据绑定

原理是:

<input v-bind:value="sth" v-on:input="sth=$event.target.value">

自从html5开始input每次输入都会触发oninput事件,所以输入时input的内容会绑定到sth中,于是sth的值就被改变

<input v-model="message" placeholder="edit me"> 文本框
<textarea v-model="message" placeholder="add multiple lines"></textarea> 多行文本
<input type="checkbox" id="checkbox" v-model="checked"> 复选框
<input type="radio" id="one" value="One" v-model="picked"> 单选框
<select v-model="selected"> 
<option disabled value="">请选择</option> 选择框
<option>A</option>
</select>

十:类class和样式style使用

1:我们可以把一个数组传给 v-bind:class,以应用一个 class 列表

2:可以传给 v-bind:class 一个对象,以动态地切换 class

十一:for循环和key属性

1:我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名;

2:在 v-for 块中,我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引;

3:你也可以用 of 替代 in 作为分隔符,因为它是最接近 JavaScript 迭代器的语法;

4:可以用 v-for 通过一个对象的属性来迭代,注意,第一个参数是指值,第二个参数是键值,第三个是索引;

5:当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性

6:vue中数组数据操作注意事项

支持方法:push()  pop()  shift()  unshift()  reverse()  sort()  aplice()      filter()  concat()  slice()

特别注意:vue数组支持如下操作:

  1. 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue
  2. 当你修改数组的长度时,例如:vm.items.length = newLength

解决办法:

   1:Vue.set(vm.items, indexOfItem, newValue)   (数组,索引,新值)   

         vm.items.splice(indexOfItem, 1, newValue)    (从第几位截取那一个元素替换新值)

   2: vm.items.splice(newLength)

7:vue中对象操作注意事项

特别注意:vue数组支持如下操作:

   1:直接添加对象元素  vm.name='tom'

   2:合并两个对象  Object.assign(vm.userProfile, {age: 27, favoriteColor: 'Vue Green'})

解决办法:

   1:Vue.set(vm.userProfile, 'age', 27)   (对象,键值,值)

   2:vm.userProfile = Object.assign({}, vm.userProfile, {age: 27,favoriteColor: 'Vue Green'})    (返回一个新对象=(空对象,对象1,对象2))

8:类似于 v-if,你也可以利用带有 v-for 的 <template> 渲染多个元素

9:v-for 的优先级比 v-if 更高,这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你想为仅有的一些项渲染节点时,这种优先级的机制会十分有用。而如果你的目的是有条件地跳过循环的执行,那么可以将 v-if 置于外层元素 (或 <template>)上

十二:v-if和v-show

注意:

1:<template> 元素可以当做不可见的包裹元素在上面使用v-if,而v-show不可用;

2:类似于 v-else,v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后;

3:如果你允许用户在不同的登录方式之间切换: 

<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>
问题:那么在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素,<input> 不会被替换掉——仅仅是替换了它的 placeholder
解决:给input加key属性确定唯一性

十三:过滤器

1:Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示:

2:过滤器可以串联:{{ message | filterA | filterB }}

filterA 被定义为接收单个参数的过滤器函数,表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB,将 filterA 的结果传递到 filterB 中;

3:过滤器是 JavaScript 函数,因此可以接收参数:{{ message | filterA('arg1', arg2) }}

filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数,普通字符串 'arg1' 作为第二个参数,表达式 arg2 的值作为第三个参数。

十四:字符串模拟数据增删查思想

十五:键盘修饰符

全部的按键别名:.enter .tab .delete .esc .space .up .down .left .right

新增:ctrl .alt .shif .meta

十六:自定义指令

一个指令定义对象可以提供如下几个钩子函数 (均为可选):

  • bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

  • inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。

  • update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。

  • componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。

  • unbind:只调用一次,指令与元素解绑时调用。

指令钩子函数会被传入以下参数:

  • el:指令所绑定的元素,可以用来直接操作 DOM 。
  • binding:一个对象,包含以下属性:
    • name:指令名,不包括 v- 前缀。
    • value:指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2
    • oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
    • expression:字符串形式的指令表达式。例如 v-my-directive="1 + 1"中,表达式为 "1 + 1"
    • arg:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 "foo"
    • modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }
  • vnode:Vue 编译生成的虚拟节点。
  • oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。

注意:除了 el 之外,其它参数都应该是只读的,切勿进行修改。如果需要在钩子之间共享数据,建议通过元素的dataset来进行

十七:生命周期钩子函数

具体流程图参照:https://cn.vuejs.org/images/lifecycle.png

十八:vue-resource请求数据

十九:vue-resource使用中全局配置数据接口的根域名

二十:vue-resource使用中全局配置post发送格式

二十一:设置动画

二十二:使用第三方库设置动画

二十三:使用动画钩子函数设置半场动画

二十四:列表组合动画+位移过渡+appear+tag

二十五:全局和私有组件定义

二十六:组件中的data

二十七:组件中带动画切换

二十八:父子组件之间传值

二十九:localStorage存储

三十:ref引用

二十一:路由定义及跳转和高亮

三十二:路由传参

三十三:路由嵌套

三十四:一个页面多个组件

三十五:vue导出导入

三十六:路由组件和跟组件

三十七:scoped使用

Vue基础认识的更多相关文章

  1. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch

    回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...

  2. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期

    回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...

  3. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇:传值+组件+项目说明

    缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...

  4. python 全栈开发,Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)

    一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...

  5. Vue 基础精讲

    Vue 基础精讲 Vue 官方文档:https://cn.vuejs.org/v2/guide/ VUE 实例 每个组件都是一个 vue 的实例. 一个 vue 项目是由实例组成的. vue 实例上有 ...

  6. Vue基础以及指令

    Vue 基础篇一   一.Vue框架介绍 之前大家学过HTML,CSS,JS,JQuery,Bootstrap,现在我们要学一个新的框架Vue~ Vue是一个构建数据驱动的web界面的渐进式框架. 目 ...

  7. 2-5 vue基础语法

    一.vue基础语法 语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...

  8. Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例,vue基础语法

    一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...

  9. vue基础知识之vue-resource/axios

    Vue基础知识之vue-resource和axios(三)   vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...

  10. Vue基础及脚手架环境搭建

    From:http://www.jianshu.com/p/dc5057e7ad0d 一.vue基础 “Vue2.0”跟俺一起全面入坑 01 “Vue2.0”跟俺一起全面入坑 02 “Vue2.0”跟 ...

随机推荐

  1. 如何使用Curator监听zookeeper事件变化

    掌握zookeeper事件监听机制,非常重要,可以说是跨入了进阶的门槛,只有掌握了如何监听某个节点或路径,我们才能在节点变化后,做一些我们想做的事,包括: 1,配置文件同步 2,主从切换 3,分布式队 ...

  2. 《ucore lab1 exercise2》实验报告

    资源 ucore在线实验指导书 我的ucore实验代码 题目:使用qemu执行并调试lab1中的软件 为了熟悉使用qemu和gdb进行的调试工作,我们进行如下的小练习: 从CPU加电后执行的第一条指令 ...

  3. [CF369E]Valera and Queries_离线_树状数组

    Valera and Queries 题目链接:codeforces.com/problemset/problem/369/E 数据范围:略. 题解: 这种题,就单独考虑一次询问即可. 我们发现,包括 ...

  4. 路由器04--OPKG

    1.简介 https://oldwiki.archive.openwrt.org/doc/techref/opkg Opkg 是一个基于 ipkg 的轻量级的软件包管理系统,主要用于嵌入式系统,目前应 ...

  5. java中内存泄露有几种?如何分析泄露原因

    一.Java内存回收机制 不论哪种语言的内存分配方式,都需要返回所分配内存的真实地址,也就是返回一个指针到内存块的首地址.Java中对象是采用new或者反射的方法创建的,这些对象的创建都是在堆(Hea ...

  6. Java的设计模式(2)--单例模式

    保证一个类仅有一个实例,并提供一个访问它的全局访问点. 好处:    (1)频繁使用的对象,可以省略new操作花费的时间,这对于那些重量级对象而言,是非常客观的一笔开销.    (2)由于new的次数 ...

  7. Laravel安装和composer安装

    下载地址:https://getcomposer.org/download/ 他会自动找到你的php目录,如果没有记得手动修改  一直点下一步,即可. 如果安装不成功,可能是之前安装过composer ...

  8. Python turtle(介绍一)

    关于绘制图形库turtle # 画布上,默认有一个坐标原点为画布中心的坐标轴(0,0),默认"standard"模式坐标原点上有一只面朝x轴正方向小乌龟 一:海龟箭头Turtle相 ...

  9. 利用Python进行数据分析_Pandas_绘图和可视化_Matplotlib

    1 认识Figure和Subplot import matplotlib.pyplot as plt matplotlib的图像都位于Figure对象中 fg = plt.figure() 通过add ...

  10. Scrapy各部分运行机制?Xpath为None?多层Response如何编写?搞定Scrapy的坑

    前言 Scrapy那么多模块都是怎么结合的啊?明明在chrome上的xpath helper插件写好了xpath,为什么到程序就读取的是None?Scrapy可以直接写多层response么?难道必须 ...