Vue简介
- javascript框架
- 简化Dom操作
- 响应式数据驱动
Vue第一个程序
第一步：导入vue包
学习用
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
生产环境用
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
或者直接下载js文件然后导入
第二步：
//js
<script>
//window.onload()=function(){}在这里用于在页面完全载入后(包括图片、css文件等等)执行脚本代码。
window.onload=function()
{
var app=new Vue({
el:'#app',
data:{
message:'你好世界'
}
})
}
</script>
//html
<body>
<div id="app">
{{message}}
</div>
</body>
第三步运行就行了
运行结果截图：
关于el挂载点
通过css选择器操作元素内部的数据。
推荐使用id选择器（因为在开发时约定是唯一的，避免了class造成多个操作）。
vue不支持单标签的操作。
双标签在body，html中也不支持。
关于data数据
可以写复杂类型的数据
//js部分
**data:{
message:'你好世界',
school:{
name:"清华大学",
phone:"400-820-9090"
},
province:["北京","贵州","重庆","山西"]
}**
//html部分
<h2>{{school.name}}{{school.phone}}</h2>
<ul>
<li>{{province[0]}}</li>
<li>{{province[1]}}</li>
<li>{{province[2]}}</li>
</ul>
渲染复杂数据类型时，遵循js的语法即可。
31万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
