<!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>
博客内容主要用于日常学习记录，内容比较随意，如有问题，还需谅解！！！
浙公网安备 33010602011771号