一、Vue介绍
- Vue(读音/vjuː/，类似于view) 是一套用于构建前后端分离的框架。刚开始是由国内优秀选手尤雨溪开发出来的，目前是全球“最”流行的前端框架。使用vue开发网页很简单，并且技术生态环境完善，社区活跃，是前后端找工作必备技能！
二、Vue安装和使用
- vue的安装大体上分成三种方式，第一种是通过script标签引用的，第二种是通过npm(node package manager)来安装，第三种是通过vue-cli命令行来安装。作为初学者，建议直接通过第一种方式来安装。
# 开发环境
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
# 或者是指定版本号
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
# 或者是下载代码保存到本地(下面是保存在lib目录下，可改为你保存的目录即可)
<script src="lib/vue.js"></script>
# 生产环境，使用压缩后的文件
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
- 注：将vue.js 保存到当前代码工作区的lib目录下
- 安装详见vue官网
三、基本使用
1、创建vue 对象
- 要使用Vue，首先需要创建一个Vue对象，并且在这个对象中传递el参数，el参数全称是element，用来找到一个给vue渲染的根元素。
2、定义参数(变量)
- 可以传递一个data参数，data中的所有值都可以直接在根元素下使用{ {}}来使用。
<div id="app">
<p>{
{
username}}</p>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
"username": "逻辑教育"
}
});
</script>
- 其中data中的数据，只能在vue的根元素下使用，在其他地方是不能被vue识别和渲染的
<div id="app">
</div>
<!-- 这里渲染不了 -->
<p>{
{
username}}</p>
<script>
let vm = new Vue({
el: "#app",
data: {
"username": "逻辑教育"
}
});
</script>
3、定义方法(函数)
- 另外也可以在vue对象中添加methods，这个属性中专门用来存储自己的函数。methods中的函数也可以在模板中使用，并且在methods中的函数来访问data中的值，只需要通过this.属性名就可以访问到了，不需要额外加this.data.属性名来访问
<div id="app">
<p>{
{
greet()}}</p>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
"username": "逻辑教育"
},
methods: {
greet: function(){
return "晚上好！" + this.username
}
}
});
</script>
-
注:
- 如果用class时，会出现多个标签，每个标签内都可能生效，代码更难控制，建议用id
- 不建议定义多个vue