vue是什么？声明式渲染条件循环处理用户输入

╰+攻爆jí腚メ 2021-09-15 09:30 286阅读 0赞

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与[现代化的工具链][Link 1]以及各种[支持类库][Link 2]结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

![70][]

vue是声明式渲染 （1） var通过new一个新的vue对象通过html中的id获取 el获取\#id值app   date获取massage属性 这样就形成了一个简单的vue文本插入  （2）我们还可以绑定元素的方式来获取vue  也是通过var通过new一个新的vue对象  通过html获取id 在html中通过span v-bind：title=“massage”鼠标悬停查看动态绑定的提示信息最好通过date获取message中的new date ().tolocalestring获取时间 在绑定元素的方式中  我们应用了v-bind特殊指令

指令带有前缀 `v-`，以表示它们是 Vue 提供的特殊特性。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 `title` 特性和 Vue 实例的 `message` 属性保持一致”。

如果你再次打开浏览器的 JavaScript 控制台，输入 `app2.message = '新消息'`，就会再一次看到这个绑定了 `title` 特性的 HTML 已经进行了更新。

![70 1][]

条件循环

同样的方式 通过var生成新的vue 通过html获取  通过v-if创造属性 在通过el获取id值 date \{ 获取v-if中的属性判断true  flase\}

继续在控制台输入 `app3.seen = false`，你会发现之前显示的消息消失了。

这个例子演示了我们不仅可以把数据绑定到 DOM 文本或特性，还可以绑定到 DOM 结构。此外，Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入/更新/移除元素时自动应用[过渡效果][Link 3]。

![70 2][]

`v-for` 指令可以绑定数组的数据来渲染一个项目列表：

v-for  通过html列表标签tode in  todes\{ tode.text\}

![70 3][]

## [处理用户输入][Link 4] ##

为了让用户和你的应用进行交互，我们可以用 `v-on` 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：

<table style="width:600px;padding:0px;margin:0px;"> 
 <tbody> 
 <tr style="width:600px;border-collapse:collapse;padding:0px;margin:0px;"> 
 <td style="width:600px;border-collapse:collapse;padding:0px;margin:0px;"><pre style="color:rgb(82,82,82);font-family:'Roboto Mono', Monaco, courier, monospace;font-size:.8em;background-color:rgb(248,248,248);padding:1.2em 1.4em;line-height:1.5em;margin-bottom:0px;">&lt;div id="app-5"&gt;
 &lt;p&gt;{
 { message }}&lt;/p&gt;
 &lt;button v-on:click="reverseMessage"&gt;逆转消息&lt;/button&gt;
&lt;/div&gt;
</pre></td> 
 </tr> 
 </tbody> 
</table>

<table style="width:600px;padding:0px;margin:0px;"> 
 <tbody> 
 <tr style="width:600px;border-collapse:collapse;padding:0px;margin:0px;"> 
 <td style="width:600px;border-collapse:collapse;padding:0px;margin:0px;"><pre style="color:rgb(82,82,82);font-family:'Roboto Mono', Monaco, courier, monospace;font-size:.8em;background-color:rgb(248,248,248);padding:1.2em 1.4em;line-height:1.5em;margin-bottom:0px;">var app5 = new Vue({
 
 el: '#app-5',
 data: {
 
 message: 'Hello Vue.js!'
 },
 methods: {
 
 reverseMessage: function () {
 
 this.message = this.message.split('').reverse().join('')
 }
 }
})
</pre></td> 
 </tr> 
 </tbody> 
</table>

Hello Vue.js!

逆转消息

注意在 `reverseMessage` 方法中，我们更新了应用的状态，但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理，你编写的代码只需要关注逻辑层面即可。

Vue 还提供了 `v-model` 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

![70 4][]

[Link 1]: https://cn.vuejs.org/v2/guide/single-file-components.html
[Link 2]: https://github.com/vuejs/awesome-vue#libraries--plugins
[70]: /images/20210813/a20514d42345487ca46612af564717be.png
[70 1]: /images/20210813/e55ebc3c38724bc583ee577184dc74c8.png
[Link 3]: https://cn.vuejs.org/v2/guide/transitions.html
[70 2]: /images/20210813/47728033386740698847ea85367f64c0.png
[70 3]: /images/20210813/c4d45aa9463241fa8d573cb4d199ed0f.png
[Link 4]: https://cn.vuejs.org/v2/guide/#%E5%A4%84%E7%90%86%E7%94%A8%E6%88%B7%E8%BE%93%E5%85%A5
[70 4]: /images/20210813/d79d9e95af1b48038054da47f15ffef4.png