什么是 Vue.js？

编程狮(w3cschool.cn) 2021-09-06 17:13:24 浏览数 (3428)

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 你可能需要：

推荐阅读：

推荐手册：

推荐课程：

1 人点赞