1、 显示hello
<html> <head> <meta charset="utf-8"> <title>大胡子biu</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <p>{{ message }}</p> </div> <script> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }) </script> </body> </html>
2、显示提示框
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息!
</span>
</div>
<script>
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
</script>
v-bind的被称为指令,这里将元素的title与app2绑定起来,如果在控制台输入app2.message='123',title就会变成123。v-bind后共有两个元素,元素1title是指当前标签的元素,元素2message是指vue对象的值。
v-if
控制是否可见,如下图代码可以通过v-if控制元素是否可见。如果在控制台输入app2.s = true;则元素就会显示出来
<div id="app-2"> <span v-if="s" title="123"> 鼠标悬停几秒钟查看此处动态绑定的提示信息! </span> </div> <script> var app2 = new Vue({ el: '#app-2', data: { s:false } }) </script>
v-for
可以通过数组来构建元素。为前后台提供了很大遍历,不用不知道。
<div id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> </div> <script> var app4 = new Vue({ el: '#app-4', data: { todos: [ { text: '学习 JavaScript' }, { text: '学习 Vue' }, { text: '整个牛项目' } ] } }) </script>
v-on
v-on是处理用户输入的指令,如v-on:click="" 里面的方法不需要加括号,和普通标签里的不一样
这里代码值算出来了,但是赋值操作并不用编码完成
<div id="app-5"> <p>{{ message }}</p> <button v-on:click="reverseMessage">逆转消息</button> </div> <script> var app5 = new Vue({ el: '#app-5', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } }) </script>
v-model
可以实现同步刷新,输入框输入的时候p也在同步刷新
<div id="app-6"> <p>{{ message }}</p> <input v-model="message"> </div> <script> var app6 = new Vue({ el: '#app-6', data: { message: 'Hello Vue!' } }) </script>