vue data数据修改_vue 的介绍及简单运用 1

首先要了解一下vue，vue是前后端分离的，后端只提供数据，前端来进行将数据和页面整合，vue就是这个整合页面的一个前端框架，

使用vue首先先要引入vue，用<script src=></script>直接可以引入使用，

第一步就是new Vue得出一个Vue的实例对象，Vue一旦被引用，就会在全局中声明一个构造函数，名字就是Vue（这样大小写）

先new出来一个Vue实例对象，在Vue实例对象，用这个对象中的方法，

我们设置用的对象属性都是在Vue这个大的结构el中，所写入的方法都放在这个大的结构中，就是说如果我们一个方法中的值的时候，就直接用Vue.el那个方法，就可以直接取到方法中的值了，

el: " " ，在Vue中是获取节点用的，是一个固定好的关键字，不可以使用别人获取节点， data：，我们在上面的图中是直接看到adddtata的，就是说写在data中的数据意思直接汇入Vue这个大结构中的，在这里也是一个关键字不能改变。

{{内容}}，在两个大括号中写的内容，叫插式表达式，就是在data中写的方法，将方法中的内容替换过来，

指令 ：v-text , 它的意思是原样展示内容，和插式表达式类似，它俩的区别是，v-text是替换标签中的所有内容，插式表达式去替换局部的内容。 v-html , 它的意思是：可以将里面的html代码执行并展示执行过后的内容 v-bind：属性名、可以简写为 ： ,它的意思是：绑定属性值，并可以用数组/对象控制，Vue对象数据改变时，页面的数据会跟着改变（单向数据绑定），v-model: ，它的意思是：双向数据改变，只能用在用户能操作的元素上，用户能操作什么v-model代表的就是什么 。

data里kk的值真假，决定着v-if的判断，当kk在值为真的话，就显示该标签，如果kk的值为假，就会删除该标签。

看看v-text,v-html,{{}},插式表达式，的修改结果

看到 v-text是替换标签里的所有内容，还有 v-html 先解析标签里的html代码在显示内容，{{}}插式表达式是替换局部的数据，也不解析html代码，标签里原来的oooo也显示出来了，

v-bind：属性名、可以简写为 ： ,它的意思是：绑定属性值，并可以用数组/对象控制，Vue对象数据改变时，页面的数据会跟着改变（单向数据绑定），在这里帮的是一个a标签里的href属性，在超链接上拼接一个ids要用一个大引号将整个标签包起来，里面是原来的连接拼接是ids。

在网页的控制台可以看见修改过后的a标签里的href属性，id后面的值已经是ids的值1了。

v-text绑定class属性用对象控制这个class，对象的属性为g，值为isg，下面data的中定义了isg的方法里的值为false，将这个的false的值替换到对象象中，那么g:false那么class就没有值，

可以看见这个class还在那，但class没有值。

同上一样，但这次我们用数组来控制属性，数组中的第一个值为isg，就用到data的中的isg中的值为g，同理，【g，k】那么就用到了上面的css样式了

可以看见class中的值，为g,k的值，也能用css的样式。

这是我们的代码，什么叫单向数据绑定呢，

可以看到这个图，我们打印了app.t的值就是上面的345，我们在下面改了一下值，页面中的345在我敲下回车之后，就变成了999，叫单向数据绑定呢，看下图，

可以看见，我们也可以将，输入框的val的值，被我修改成了hhhh，页面中的输入框也显示了hhhh，但我们试一下，我们改输入框里的内容，Vue中的值会不会被修改，

我将输入框的内容改为了mmmm但看看下面app.val的值，显示的是它的值还是hhhh，这就是单向数据绑定，我Vue的值可以改变属性的值，但属性的值不可以改变Vue的值，顾名思义，单向数据绑定。

那有没有一个双向数据绑定的指令呢，有，一个叫v-model,是双向数据绑定，但也提到了，v-model只能用在用户能操作的元素上，向p标签，用户都不能操作，给帮上双向数据绑定不是多此一举吗，还有就是，用户能操作修改的是标签的哪一个属性，v-model就代码那一个属性，比如，图中的input输入框，用户可以修改文本框中的value属性，那么v-model就代表的是那一个属性，

看图中vlaue的属性已经被v-model给代替了，那么就是双向绑定数据，看图

可以看见我们将输入框的内容改了之后，测了一下app.val的值，可以看出来它的值现在已被修改为和文本框中的内容一样了，这样可以总结一下什么叫双向数据绑定，就是元素里的值可以影响到Vue里面的值，Vue对象中的值也可以影响到元素中的值。这就是双向的数据绑定。