<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript" src="../Js/vue.js"></script> <!-- <script type="text/javascript" src="../Js/vue.min.js"></script> --> </head> <body> <ul> <li>这是第1个li</li> <li>这是第2个li</li> <li>这是第3个li</li> <li>这是第4个li</li> <li>这是第5个li</li> <li>这是第6个li</li> <li>这是第7个li</li> <li>这是第8个li</li> <li>这是第9个li</li> </ul> <!-- id 容器 root --> <div id="root"> <h1>hello {{name}}</h1>
<h1>hello {{name.toUpperCase()}}</h1>
<h1>Vue {{time}}</h1> </div> <!-- class 容器 --> <!-- <div class="root2"> <h1>hello2 {{name}}</h1> <h1>Vue2 {{time}}</h1> </div> --> </body> </html> <script type="text/javascript"> const one = new Vue({ // 方式一:通过id选择器获取对象,也可理解为获取容器 el: '#root', // 方式二:通过累类选择器获取对象,也可理解为获取容器 // el: '.root2', //方式三:不建议 // el: document.getElementById('root'), // 使用data对象存储数据,数据拱el所指定的容器去使用 data: { name: 'vue', time: '学习第一天' }, }) </script>
代码结构:
运行效果:
总结:
- Vue使用,需实例化一个Vue对象实例,且需要传入一个配置对象
- root容器里的代码符合html规范,但混入了一些特殊的Vue语法
- root容器里的代码被称为——Vue模版
注意:容器和实例必须一一对应。。。。。。。
示例二:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript" src="../Js/vue.js"></script> <!-- <script type="text/javascript" src="../Js/vue.min.js"></script> --> </head> <body> <ul> <li>这是第1个li</li> <li>这是第2个li</li> <li>这是第3个li</li> <li>这是第4个li</li> <li>这是第5个li</li> <li>这是第6个li</li> <li>这是第7个li</li> <li>这是第8个li</li> <li>这是第9个li</li> </ul> <!-- id 容器 root --> <div id="root"> <h1>hello {{name}}</h1> <h1>Vue {{time}}</h1> </div> <!-- class 容器 --> <div class="root2"> <h1>hello2 {{name}}</h1> <h1>Vue2 {{time}}</h1> </div> </body> </html> <script type="text/javascript"> Vue.config.productionTip = false const one = new Vue({ // 方式一:通过id选择器获取对象,也可理解为获取容器 el: '#root', // 方式二:通过累类选择器获取对象,也可理解为获取容器 // el: '.root2', //方式三:不建议 // el: document.getElementById('root'), // 使用data对象存储数据,数据拱el所指定的容器去使用 data: { name: 'vue', time: '学习第一天' }, }) const two = new Vue({ // 方式一:通过id选择器获取对象,也可理解为获取容器 el: '.root2', // 使用data对象存储数据,数据拱el所指定的容器去使用 data: { name: 'vue 2', time: '学习第一天 2' }, }) </script>
博客内容主要用于日常学习记录,内容比较随意,如有问题,还需谅解!!!