【Vue】vue基础知识一（本地数据 *** 作）

javaScript 框架

简化Dom的 *** 作

响应式数据驱动

简单的vue程序：

1导入开发版本的vueis

2创建vue实例对象，设置el属性和data属性

3使用简介的模版语法把数据渲染到页面上

vue实例可以使用双标签挂载，不能使用HTML和BODy来进行

v-text 设置标签的文本值 (覆盖标签中全部的内容 {{}} el只会替换相应的值)

v-html (1内容中有html结构会被解析成标签 2设置元素的innerHTML)

注：解析文本使用 v-text 解析hml使用v-html

v-on(1为元素绑定事件，2事件名不需要写on,3指令可以简写@ 4绑定的方法定义在methods属性中5方法内部可以通过this关键字访问定义data中的数据)

计数器（创建实例v-on事件和方法绑定，实时更改数据）

v-show(1根据元素的真假切换元素的显示状态 2原理是修改元素的display实现元素的隐藏)

v-if(1根据表达式的真假切换元素的显示状态 2本质是 *** 作dom 3表达式的值是true时，元素存在于dom树中，为否是从dom树中移除)

注：v-show和v-if的区别：

v-show：只是改变了display属性的 *** 作

v-if：改变的是dom数

实际情况 频繁切换的使用v-show

v-bind (1为元素绑定属性 2完整写法v-bind:属性名 3简写的话可以只写:属性名)

切换（1用数组来存放元素 2用v-on来绑定事件 3用v-bing来修改元素的属性）

v-for(1根据数据生成列表 2v-for长和)

v-on (补充)（1时间绑定的方法写成函数调用的形式，可以传入自定义参数

2定义方法时定义形参数来接受传入的实参

3通过修饰符可以对事件进行限制）

例如：@keyupenter

v-model(1便捷的设置和获取表单元素的值

2绑定的数据会和表单元素值相关联

3 表单的 数据=绑定的数据)

记事本实战演练(1增加 2删除 3隐藏 4清空 )

注：shift()函数删除的是数组中的第一个元素 使用splice删除指定的某个元素

指令（Directives），是vue为开发者提供的 模板语法 ，用于辅助开发者渲染页面的基本结构

所用到的数据定义在实例的 data 中，事件定义在实例的 methods 中

只能渲染纯文本内容， 会覆盖 标签内部原本的内容

只能渲染纯文本内容， 不会覆盖 标签内部原本的内容

能将带标签的字符串渲染成html内容， 会覆盖 标签内部原本的内容

为元素的属性 动态 绑定属性值

注意： 插值表达式 和 v-bind 还支持javascript表达式的运算

为元素绑定事件

只要是事件，就能使用的修饰符，以下列举5个常用的

只能在触发键盘事件时，使用的修饰符，以下列举2个常用的

快速获取表单数据（只应用于表单元素，如：input、textarea、select）

只能给v-model使用的修饰符

控制DOM的显示与隐藏（值为true显示，值为false隐藏），其原理为 动态添加/移除display：none样式 ，一般用于需频繁切换

控制DOM的显示与隐藏（值为true显示，值为false隐藏），其原理为 动态创建/移除元素 ，一般用于默认不展示且展示较少

配合 v-if 指令一起使用，否则将不会被识别

基于一个数组来循环渲染一个列表结构，它有特定的语法结构 v-for="item in items"

注意：在vue文件中，只要用到 v-for指令 ，一定要绑定一个 :key 属性

作者：用户2031777005900

链接：>

现在没用过vue框架，都不好意思说自己是干前端呢，当然这句话并不是说干前端非得会vue,只是想说明他的火爆程度，现在连小程序都推出了mpvue，你确定你还不赶紧了解了解vue吗，我这篇文章的内容都是些很基础的vue知识，后续会补上

解析 ： 

-  beforecreate ：可以在这加个loading事件 

- created  ：在这结束loading，还做一些初始化，实现函数自执行 

- mounted  ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情 

- beforeDestory : 你确认删除XX吗？ destoryed ：当前组件已被删除，清空相关内容

其中key为对象里面的键，value为对象里面的值，其本意就是动态改变原来已经固定的值值，就需要使用vueset(‘想要改变的对象’，’要渲染的键‘，’要渲染的值‘)

解析  

遍历后{{parentname}}的已经固定了，这时候点击编辑按钮，改变里面的值，虽然后台数据已经发生了改变，但那时页面渲染的效果并不会发生改变，这时候要想改变页面上的值，就需要使用vueset(‘想要改变的对象’，’要渲染的键‘，’要渲染的值‘)， 

在空的数组中不能使用push传入数据，所以应当使用vm$set给数组添加

    使用v-bind动态给元素绑定

这样可以在遍历的时候给不同的元素动态绑定不同id

在下次dom更新循结束之后延迟回调，在修改数据之后立即使用这个方法，获取更新后的dom

在vue中获取当前点击的元素对象，在点击的方法里 传 入$event,然后在methods方法里面接受传过来的值，具体如 下

这个指令保持在元素上直到关联实例结束编译 /，可隐藏为编译的标签直到实例准备完毕

computer也是一个对象，类似于methods,在里面也可以定义很多方法。计算属性的结果会被缓存，写法如下：

前一兄弟元素必须有v-if 或v-else-if

前一兄弟必须有v-if或v-else-if

vue包含一组观察数组的变异方法，所以它们也会出发视图更新

由于javascript的限制，Vue不能检测一下变动的数组

对于已经创建实例，vue不能动态添加根级别的响应式属性，但是可以使用Vueset( object, key, value )方法嵌套对象添加响应式属性

props可以是数组或对象，用于接收来父组件的数据，或者使用对象作为替代

1axiospost('url', {data} )

axios发送跨域请求

  var headers ={

'headers':{

'Content-Type':' application/x-$>

用 v-for 指令根据一组数组的选项列表进行渲染。

通过数组的索引获取数组的数据

这种写法在数据很多的时候或者数据发生更新的时候处理就会很繁琐,

因此我们可以使用v-for指令来循环数组

基本数组的循环

v-for 还支持一个可选的第二个参数为当前项的索引。

数组项为对象的循环

使用索引

同时我们也可以用 of 替代 in 作为分割符

语法

示例:

也可以用 v-for 指令来循环对象。

第一个参数是训练遍历对象的属性值:

第二个的参数为对象的属性(键名)：

还可以通过第三个参数来获取索引值：

使用 v-for 更新已渲染的元素列表时,默认用 就地复用 策略;列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素; 我们在使用的使用经常会使用 index (即数组的下标)来作为 key ,但其实这是不推荐的一种使用方法;

key值的使用其实是和vue响应式已经虚拟DOM有关, 那么我们通过下面的例子来了解一下

例子:

数据

页面渲染

但是数据发生了变化,

如果数据是这一种变化的话, 那么index没什么问题

数据前后变化的结果

这样vue就会分析到 其他的数据 都不需要改变,只需要在新增一个DOM节点,然后添加新增的数据就可以了

可以输入我们是在数组中间插入的数据就会不一样为了

这时数据的对比

通过上面清晰的对比,发现除了第一个数据可以复用之前的之外,另外三条数据都需要重新渲染;

是不是很惊奇,我明明只是插入了一条数据,怎么三条数据都要重新渲染而我想要的只是新增的那一条数据新渲染出来就行了

最好的办法是使用数组中不会变化的那一项作为 key 值,对应到项目中,即每条数据都有一个唯一的 id ,来标识这条数据的唯一性;使用 id 作为 key 值,我们再来对比一下向中间插入一条数据,此时会怎么去渲染

此时数据的变化

现在对比发现只有一条数据变化了,就是 id 为4的那条数据,因此只要新渲染这一条数据就可以了,其他都是就复用之前的;

为什么需要key属性: 虚拟DOM的diff算法,

当某一层有很多相同的节点时，也就是列表节点时，Diff算法的更新过程

我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的：

即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率？

所以我们需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。

所以一句话，key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。

建议尽可能在使用 v-for 时提供 key ，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

v-if和v-for一起使用，v-for的优先级要高于v-if

可能会想到v-if和v-for是用的两种情况

那么接下来好好看看这两种情况

第一种情况: 为了过滤一个列表中的项目

为了过滤项目内容,我们可能会如下调用:

在这种情况下，请将 users 替换为一个计算属性（比如 activeUsers ），让其返回过滤后的列表。

示例详解:

如果现在只想显示价格在22元以上的水果,我们可能会这么写

这么写固然会得到你想要的效果, 但是因为v-for和v-if优先级的关系, 所以将会经过如下的运算

因此，哪怕我们只渲染出一小部分内容，也得在每次重新渲染的时候遍历整个列表，无论价格是否满足我们的条件

随意我们推荐使用计算属性, 在计算属性中处理过滤事宜, 计算属性会在计算完毕后缓存内容,提高遍历的效率

这样我们得到的结果是一样的,但是我们获得了如下的好处

第二种情况: 为了避免渲染本应该被隐藏的列表

也就是根据条件类判断列表的显示我们也后可能会使用下面的方法调用

实例详解:

原理是一样的, 就是如果这么写, 还是会循环遍历每一个数据,然后判断是不是显示 一样浪费

所以我们将 v-if 移动到容器元素，这样我们就不用对每一个元素都进行判断是否显示, 取而代之的是，我们只检查判断一次，且不会在 isShow 为假的时候还循环运算 v-for。

有时，我们想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。在这种情况下，可以使用计算属性和方法来过滤数据

我们上面讲过了计算属性,下面来看看方法的使用

总结示例:

通常情况下，在构建 JavaScript 应用程序时，您希望从远程源或从API获取数据。我最近研究了一些公开的API，发现可以使用这些数据源完成很多很酷的东西。

更多来自作者的提示

快速提示：如何在JavaScript中排序对象数组

使用Vuejs，可以逐步地构建围绕其中一个服务的应用程序，并在几分钟内就可以开始向用户提供内容服务。

我将演示如何构建一个简单的新闻应用程序，它可以显示当天的热门新闻文章，并允许用户按照他们的兴趣类别进行过滤，从纽约时报API获取数据。您可以在这里找到本教程的完整代码。

下面是最终应用的外观：

要学习本教程，您将需要一些非常基本的Vuejs的知识。 您可以在这里找到一个很棒的“入门指南”。 我还将使用ES6语法，您可以到这里进一步学习：

项目结构

为了保持简单，我们只使用2个文件:

/appjs /indexhtml

appjs将包含我们应用程序的所有逻辑，indexhtml 文件将包含我们应用程序的主视图。

我们先在 indexhtml 中写一些基本的标记:

<!DOCTYPE html> <html>   <head>     <meta charset="utf-8">     <title>The greatest news app ever</title>   </head>   <body>     <div id="app">       <h3>VueNews</h3>      </div>   </body> </html>

然后，在indexhtml的底部导入 Vuejs和appjs，就在</body>标签之前：

<script src="/vue"></script> <script src="appjs"></script>

可选的，我们还可以导入Foundation，以利用一些预先创建的样式，来使我们的视图看起来更好一点。

<link rel="stylesheet" ajax/libs/foundation/631/css/foundationmincss">

创建一个简单的 Vue App

首先，我们将在div#app 元素上创建一个新的 Vue 实例，并使用一些测试数据来模拟新闻API的响应：

// /appjs const vm = new Vue({   el: '#app',   data: {     results: [       {title: "the very first post", abstract: "lorem ipsum some test dimpsum"},       {title: "and then there was the second", abstract: "lorem ipsum some test dimsum"},       {title: "third time's a charm", abstract: "lorem ipsum some test dimsum"},       {title: "four the last time", abstract: "lorem ipsum some test dimsum"}     ]   } });

我们通过el选项告诉 Vue 要挂载的目标元素，并通过data选项指定我们的应用程序用到的数据。

要在我们的应用程序视图中显示这些模拟数据，我们可以在#app元素中写入下面的标记：

<!-- /indexhtml --> <div class="columns medium-3" v-for="result in results">   <div>     <div>       {{ resulttitle }}     </div>     <div>       <p>{{ resultabstract }}</p>     </div>   </div> </div>

v-for 指令用于渲染我们的 results 列表。 我们使用双花括号来显示每一项的内容。

您可以在 Vue 模板语法 这里阅读更多内容

我们现在已经完成了基本的布局工作：

从 API 获取数据

要使用 纽约时报API，您需要获得一个API密钥。所以如果你还没有，注册并获取一个热点事件API的API密钥。

创建ajax请求和处理响应

Axios是一个基于 Promise 的>

以前，vue-resource 通常用于Vue项目，但现在已经退休了。

直接在标签中添加click事件（@click＝fn），然后在vue实例中的（methods）配置项里添加方法fn，实现你的功能。这样不行吗？vue框架不是不能用原生js获取dom元素，只是用框架就是为了避免 *** 作dom元素

etarget 指的是 p 标签这个 dom 元素；p 元素本身并没有 name 属性，所以你给标签上加的这个 name 不能这么获取；

var dom = etarget;

var name = domgetAttribute('name'); // name = "沙龙 - 陈奕迅";这是通用的方式，获取绑定在标签上的数据，同样的，number 也可以这么取

var number = domgetAttribute('number'); // number = 0

第步创建静态HTML5页面vmodelhtml并引入vueminjs文件

第二步body元素内插入div并div引入input输入框label标签

第三步调用初始化Vuejs并给输入框赋值

第四步预览该静态页面页面显示默认显示值

第五步减少输入框字符发现面内容跟着减少

第六步添加输入框字符面内容随增加展示数据双向绑定

以上就是关于【Vue】vue基础知识一（本地数据 *** 作）全部的内容，包括:【Vue】vue基础知识一（本地数据 *** 作）、入门：Vue六大常用内置指令、vue项目中常用到哦，不看看吗等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！