<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--开发环境引入-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--声明式地将数据渲染进 DOM 的系统-->
<div id="app">
{{ message }}
</div>
<!--参数绑定-->
<div id="app-2">
<span v-bind=:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息!
</span>
</div>
<!--if判断-->
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
<!--循环-->
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
<!--v-on 指令添加一个事件监听器-->
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转消息</button>
</div>
<!--Vue 还提供了 v-model 指令,它能轻松实现表单输入和应用状态之间的双向绑定-->
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: '呆萌张亚娜,她说她脸大!'
}
});
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
});
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
});
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{text: '学习 JavaScript'},
{text: '学习 Vue'},
{text: '整个牛项目'}
]
}
});
var app5 = new Vue({
el: '#app-5',
data: {
message: '呆萌张亚娜,她说她脸大!!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
});
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
});
</script>
</body>
</html>
07-29
04-26
04-26
04-26
“相关推荐”对你有帮助么?
-
非常没帮助
-
没帮助
-
一般
-
有帮助
-
非常有帮助
提交