1. 学习Vue之前你需要知道的
1.1 什么是Vue？
Vue是一个用于构建用户界面的渐进式JavaScript框架,Vue被设计为自底向上逐层应用。Vue的核心库只关心视图层，不仅易于上手，还便于与第三方库或既有项目整合。
Vue是由尤雨溪开发的，于2014年正式发布。
Vue2.0官方文档：https://v2.cn.vuejs.org/v2/guide/index.html
1.2 Vue的特点
- 采用组件化模式，提高代码复用率，且让代码更好维护
- 声明式编码，与传统的命令式编码对比，Vue无需直接操作dom，大大提高开发效率
- 使用虚拟dom+diff算法,尽量复用dom节点。
1.3 学习Vue之前要掌握哪些知识点？
- HTML5
- CSS3
- JavaScript
- ES6语法规范
- ES6模块化
- 包管理器（npm、cnpm、yarn）
- 原型、原型链
- 数组常用方法
- axios
- promise
……
2. 搭建开发环境
安装
新手建议在html中学习Vue，创建一个.html文件，在头部引入在线cdn
```html
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
使用：声明式渲染
创建一个容器，用以当做Vue的视图层
<div id="app"></div>
| key | key值意义 |
|---|---|
| el | 挂载Vue容器 ，用于指定Vue实例为哪个容器使用，有且只有一个 |
| data | 数据模型，只供el所指定的容器去使用 |
| methods | 声明函数、存放指令方法的地方 |
| 创建Vue实例,实例里传递一个对象，对象中只能有Vue指定的key |
<script>
let vm = new Vue({})
</script>
挂载容器：
<script>
let vm = new Vue({
el:"#app"
})
</script>
一个简单的Vue案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
</head>
<body>
<!-- Vue挂载容器，视图层 一个页面中只能有一个挂载容器 -->
<div id="app">
<!-- 插值语法：{{}} -->
{{msg}}
</div>
<script>
//创建一个Vue实例
let vm = new Vue({
// 挂载Vue容器
el:"#app",
//数据模型
data:{
msg:"Hello World"
}
})
</script>
</body>
</html>
3.Vue模板语法
- 插值语法
功能：用于解析标签体内容
写法：{{ 变量名 }}
变量名为在data中定义好的变量名，在html结构上，使用{{变量名}}将变量插在所需要出现的地方。
data中的数据发生改变，那么页面中用到该数据的地方也会自动更新
上述案例中，就用到了插值语法。
- 指令语法
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件）
常用指令语法：
- v-on：事件类型，可以简写为@事件类型，如@click
- v-bind：单向绑定事件，数据只能从data流向页面。可以简写为：
- v-model：双向绑定事件（只能用于表单元素）写法为v-model:value=“”，简写为v-model="’
- v-text：设置标签的文本值
- v-html：设置标签的innerHTML，解析html结构数据
- v-if：根据表达值的真假，切换元素的显示和隐藏
- v-show：：根据表达值的真假，切换元素的显示和隐藏
- v-for：循环遍历
- v-once:执行一次性插值
- ……
- {{js表达式}}，双花括号内写js表达式，如{{ Boolean(‘123’) }}
简单案例：
事件绑定：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入本地Vue文件-->
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h2>欢迎来到{{name}}学习</h2>
<!-- <button v-on:@click="showInfo1">点我提示信息</button>-->
<!-- 简写形式 -->
<button @click="showInfo1"></button>
</div>
<script>
const vm= new Vue({
el:"#app",
data:{
name:"学校"
},
methods:{
showInfo1(event){
alert("同学你好！");
},
}
})
</script>
</body>
</html>
数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 普通写法 -->
<!-- 单向绑定 -->
<input type="text" v-bind:value="name">名字
<br>
<!-- 双向绑定 -->
<input type="text" v-model:value="age">年龄
<br>
<!-- 简写 -->
<input type="text" :value="name">名字
<br>
<input type="text" v-model="age">年龄
</div>
<script>
var app=new Vue({
el:"#app",
data:{
name:"张三",
age:"18"
}
});
</script>
</body>
</html>
本文含有隐藏内容，请 开通VIP 后查看