什么是 Vue.js？

2021-09-06 17:13:24 浏览数 (3447)

Vue（发音为 ​/vjuː/​，与 view 类似）是一个用于构建用户界面的渐进式框架。与其他单片框架不同，Vue 从一开始就设计为可增量采用。核心库只关注于视图层，并且易于拾取并与其他库或现有项目集成。 

vue

  • Vue.js 允许您使用称为指令的 HTML 属性扩展 HTML；
  • Vue.js 指令为 HTML 应用程序提供功能；
  • Vue.js 提供内置指令和用户定义指令。


Vue.js 指令

  • Vue.js 使用双大括号​{{ }}​作为数据的占位符；
  • Vue.js 指令是带有前缀的 HTML 属性 ​v-​。

Vue 示例

在下面的示例中，使用​new Vue()​创建了一个新的 Vue 对象。

属性​el:​将新的 Vue 对象绑定到​id="app"​的 HTML 元素。

<div id="app">
<h1>{{ message }}</h1>
</div>

<script>
var myObject = new Vue({
    el: '#app',
    data: {message: 'Hello Vue!'}
})
</script>
尝试一下 »


Vue.js 绑定

当 Vue 对象绑定到 HTML 元素时，当 Vue 对象发生变化时，HTML 元素也会发生变化：

<div id="app">
{{ message }}
</div>

<script>
var myObject = new Vue({
    el: '#app',
    data: {message: 'Hello Vue!'}
})

function myFunction() {
    myObject.message = "John Doe";
}
</script>

尝试一下 »


Vue.js 双向绑定

该​v-model​指令将 HTML 元素的值绑定到应用程序数据。

这称为双向绑定：

<div id="app">
  <p>{{ message }}</p>
  <p><input v-model="message"></p>
</div>

<script>
var myObject = new Vue({
    el: '#app',
    data: {message: 'Hello Vue!'}
})
</script>

尝试一下 »


Vue.js 循环绑定

使用​v-for​指令将 Vue 对象数组绑定到 HTML 元素的“数组(array)”：

<div id="app">
 <ul>
   <li v-for="x in todos">
   {{ x.text }}
   </li>
  </ul>
</div>

<script>
myObject = new Vue({
    el: '#app',
    data: {
    todos: [
        { text: '学习 JavaScript' },
        { text: '学习 Vue.js' },
        { text: '学编程从W3Cschool开始' }
        ]
    }
})
</script>

尝试一下 »


以上就是编程狮(w3cscool.cn)为您整理的关于《什么是 Vue.js？》的全部内容，简单介绍了 Vue 定义、核心最基本的功能和实例体验，如果想要深入学习和了解 Vue 你可能需要： 


推荐阅读：


推荐手册：


推荐课程：