是什么： Vue是一套用于构建用户界面的渐进式框架。
HelloWorld
<html>
<div id="app">
{{ message }}
</div>
<!--引入Vue框架-->
<!-- <script src="C:\Users\49259\Downloads/vue.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!--创建一个Vue实例-->
<script>
var app = new Vue({
el: '#app',
data: {message: 'Hello World!'}
})
</script>
</html>打开网页之后显示 Hello World
响应式
打开控制台输入
app.message='Hello Vue';//不能有空格，千万不能有空格，不然就报错!
可以看到网页上的同时更新了
绑定元素特性
指令 v-bind :将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致
<div id="app-2">
<span v-bind:title="message"> Put the mouse here </span>
</div><script>
var app2 = new Vue({
el: '#app-2',
data: {message: 'time is ' + new Date().toLocaleString()}
})
</script>指令v-if
<div id="app-3">
<p v-if="seen">now,you can see me</p>
</div><script>
var app3 = new Vue({
el: '#app-3',
data: {seen: true}
})
</script>指令 v-for
ol 有序列表 li无序列表
app4.todos.push({ text: ‘xxx’ }); 可以新增
<div id="app-4">
<ol>
<li v-for="i in todos">{{ i.text }}</li>
</ol>
</div><script>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'study JavaScript' },
{ text: 'study Vue' },
{ text: 'newbee' }
]
}
})
</script>指令 v-on 监听器
v-on:click 监听点击
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">reverse</button>
</div> var app5 = new Vue({
el: '#app-5',
data: {message: 'Hello Vue.js!'},
methods: {
reverseMessage: function ()
{
this.message = this.message.split('').reverse().join('')
}
}
})指令 v-model :实现表单输入和应用状态之间的双向绑定。
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div> var app6 = new Vue({
el: '#app-6',
data: {message: 'Hello Vue!'}
})
扫一扫
1223
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
