什么是 Vue.js？
Vue.js 允许您使用称为指令的 HTML 属性扩展 HTML。
Vue.js 指令为 HTML 应用程序提供功能。
Vue.js 提供内置指令和用户定义指令。
有关完整的 Vue.js 教程
访问我们的 Vue.js 教程 ❯Vue.js 指令
Vue.js 使用双大括号 {{ }} 作为数据的占位符。
Vue.js 指令是带有前缀 v- 的 HTML 属性。
Vue 示例
在下面的示例中，使用new Vue()创建了一个新的 Vue 对象。
属性el:将新的 Vue 对象绑定到 HTML 元素，该元素的id="app"。
示例
<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 元素的“数组”。
示例
<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: '构建一些很棒的东西' }
]
}
})
</script>
