什么是Vue
- Vue是一个js的框架
- 简化了我们DOM操作
- 具有响应式数据驱动
Vue如何的使用
<script src="../kj/vue.js"></script>//这里我的vue在kj/vue.js里面
- 在script标签中创建new Vue({
…
}
})
el挂载点
- 1.el用来设置vue管理元素的
- 2.vue会管理el选中的元素及其内部元素
- 3.推荐使用id选择器,也可以用其他选择器
- 4.只能作用于双标签【但html和body标签除外】
<body>
<div>
{{message}}
<p>{{message}}</p>
</div>
<script>
new Vue({
el:"div",
data:{
message:'Hello world',
}
})
</script>
- 那么被el选中的元素(包括子元素),就会执行下面的代码
data数据对象
- 1.用到的数据都存在data对象中
- 2.data中可以写复杂的数据(数据对象)
- 3.遵循js语法
<div id="div">
<h1>
{{ message }}
</h1>
<ol>
<li>{{ pf[0] }}</li>
<li>{{ st.name }}</li>
<li>{{ st.qq }}</li>
</ol>
</div>
</body>
<script>
new Vue({
el:"#div",
data:{
message:'xxxx大学',
pf:["计算机","会计学"],
st:{
name:"cc",
qq:"148546",
}
}
})
</script>
</html>