1.使用方法
直接用<script>标签引入
直接下载并用 <script> 标签引入,vue会被注册为一个全局变量
示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../new.vue.js"></script> </head> <body> <div id="box"> <!-- view层 --> {{10+20}}<!-- 大括号语法 --> {{myName}} </div> <script> var vm = new Vue({ //MVVM框架 vm层 el: '#box', data: { //model层 myName: '玛卡巴卡', } }) </script> </body> </html>
重点
- 理解什么是MVVM。
- 学会使用html来写vue
- 表示动态[key] :key
- 重点 v-bind 绑定的意思 是一个vue的指令 v-bind:title的简写:title
2.vue绑定
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../new.vue.js"></script> </head> <body> <div id="box"> <!-- view层 --> <!-- {{10+20}}大括号语法 {{myName}} --> <p :title='message'>鼠标停留几秒查看绑定的信息</p> </div> <script> var vm = new Vue({ //MVVM框架 vm层 el: '#box', data: { //model层 message: `页面加载于${new Date().toLocaleString()}` } }) </script> </body> </html>
上面的代码实现了一个简单的鼠标悬停在文字上,显示页面加载时间的一个效果