官网：Vue.js
一、vue介绍及优点
vue是渐进式的JavaScript框架
1、体积小，压缩后仅33k
2、更高的运行效率，基于虚拟dom
3、双向数据绑定，开发这不需要
4、生态丰富，学习易于入门
二、vue使用方式
1、<script>标签直接引入。（推荐初学者）
2、vue提供的官方命令行工具CLI
三、第一个vue程序
步骤：
1、导入开发版本的vue.js
2、创建vue实例对象，设置el属性和data属性
3、使用简洁的模版语法把数据渲染到页面上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--3、使用简洁的模版语法把数据渲染到页面上-->
<div id="app">
{{ message }}
</div>
<!--1、导入开发版本的vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--2、创建vue实例对象，设置el属性和data属性-->
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>运行页面
四、知识点
1、el：挂载点
a、el是用来设置vue实例挂载（管理）的元素
b、vue会管理el选项命中的元素及其内部的后代元素
c、可以使用其他的选择器，但是建议使用ID选择器
d、可以使用其他的双标签，不能使用HTML和BODY
2、data：数据对象
a、vue中用到的数据定义在data中
b、data中可以写复杂类型的数据
c、渲染复杂类型数据时，遵守js的语法即可
例：
<!--简单数据使用-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>data：数据对象</title>
</head>
<body>
<div id="app">
{{ message }}
<!-- json取值-->
<h2>{{school.name}},{{school.mobile}}</h2>
<!-- 数组取值-->
<ul>
<li>{{campus[0]}}</li>
<li>{{campus[1]}}</li>
<li>{{campus[2]}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
// json
data: {
school:{
name:"测试学校",
mobile:"100-100-1000"
},
// 数组
campus:["校区1","校区2","校区3","校区4"]
}
})
</script>
</body>
</html>运行结果：
774
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
