Vue(发音为
/vjuː/
,与 view 类似)是一个用于构建用户界面的渐进式框架。与其他单片框架不同,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 你可能需要:
推荐阅读:
推荐手册:
推荐课程:
- Vue2入门课程
- 小白学前端:Vue.js 2.0进阶
- Vue.js三天学习实战教程
- Vue 3.0 新特性全面解析(走在技术前沿)
- 小白学前端:Vue.js实现电商后台管理系统(企业项目实战)
- 小白学前端:基于Vue3.0开发万年历(实战项目)
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。