一、Vue.js安装
方式一：直接CDN引入
<!-- 开发环境版本，包含了有帮助的命令行警告-->
<script src ="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度，上架产品的时候需要-->
<script src ="https://cdn.jsdelivr.net/npm/vue"></script>
方式二：下载和引入
方式三：NPM安装
二、HelloVuejs初体验
编程范式：声明式编程，优点：数据与界面进行了分离
创建了一个Vue对象时，传入了一些options属性：{}
- {}中包含了el属性：该属性决定了这个Vue对象挂载在哪一个元素上，很明显，以下是挂载到了id为app的元素上
- {}中包含了data属性：该属性中通常会存储一些数据
这些数据可以是我们直接定义出来的，比如下边的
也可能是来自网络，从服务器加载的
- {}中包含了data属性：该属性中通常会存储一些数据
<body>
<div id="app">{
{message}}</div>
<!--引入Vuejs-->
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',// 用于挂载要管理的元素
data:{
// 定义数据
message:"你好啊！我的家人"
}
})
</script>
</body>
1、Vue列表展示
使用 v-for="item in 列表"
往列表中添加数据
2、案例：计数器实现点击事件
v-on:click的语法糖写法为：@click
v-on:click="counter++"监听事件
<div id="app">
<h2>当前计数:{
{counter}}</h2>
<button v-on:click="counter++">+</button>
<button v-on:click="counter--">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
counter:0
},
})
</script>
</body>
</html>
使用函数实现：
3、Vue中的MVVM
4、Vue的生命周期
4.1、生命周期：事物从诞生到消亡的整个过程
Vue的生命周期： new Vue()
1 -- 9 为挂载流程，10 -- 12 为更新流程
- new Vue()
- 初始化：生命周期、事件，但数据代理还未开始
beforeCreate(){}此时：无法通过vm访问到data中的数据、methods中的方法- 初始化：数据监测、数据代理
created(){}此时：可以通过vm访问到data中的数据、methods中配置的方法- Vue开始解析模板。生成虚拟DOM（内存中），页面不能显示解析好的内容
beforeMount:{}此时：- 页面呈现的是未经Vue编译的DOM结构
- 所有对DOM的操作，最终都不奏效
- 将内存中的虚拟DOM转为真实DOM插入页面。
mounted:{}此时：- 页面中呈现的是经过Vue编译的DOM。
- 对DOM的操作均有效（尽可能避免）。至此初始化过程结束，一般在此进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件、等初始化操作
beforeUpdate(){}此时：数据是新的，但页面时旧的，即页面尚未和数据保持同步- 根据新数据，生成新的虚拟DOM，随后与旧的虚拟DOM进行比较，最终完成页面更新，即完成了 Model ——> View 的更新
updated(){}此时：数据是新的，页面也是新的，即页面和数据保持同步beforeDestroy()}此时：vm中所有的：data、methods、指令等等，都处于可用状态，马上要执行销毁过程，一般在此阶段：关闭定时器、取消订阅消息、解绑自定义事件等收尾操作destroyed(){}此时Vue彻底消失
4.2、生命周期的八个（四对）
- 补充：GitHub中
Branch——分支
dev——开发中，开发中的版本叫debug版本
tag——稳定版，准备发布的版本叫release
5、钩子事件
定义在Vue类中的函数
const app = new Vue({
el:"#app",
data:obj,
methods:{
add:function (){
console.log('add被执行');
this.counter++;
},
sub:function (){
console.log('sub被执行');
this.counter--;
}
},
// 创建实例之前执行的钩子事件
beforeCreate: function (){},
// 实例创建完成后执行的钩子
created:function (){},
// 将编译完成的HTML挂载到对应虚拟Dom时触发的钩子，此时页面并没有内容
beforeMount:function (){},
// 编译好的HTML挂载到页面完成后执行的钩子，此钩子函数中一般会做一些ajax请求获取数据进行数据初始化
// 注意：mounted在某个实例中只执行一次
mounted:function (){}
6、代码规范：
- 缩进方式，使用两个空格
7、设置模板
设置方式 - 复制script标签的自定义模板
- File -- Settings -- Editor -- Live Templates -- Vue -- ‘+’ -- Live Template -- 填写缩写与描述并粘贴自定义模板 -- 点击Define勾选HTML -- 在文中输入vue回车即可出现模板
三、插值操作【模板语法】
1、插值操作_Mustache语法
mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式
2、插值操作_其他指令
在某些情况下，我们可能不希望界面随意的跟随改变，这个时候，我们就可以使用一个Vue的指令2.1、
v-once - 该指令后面不需跟任何表达式（比如之前的v-for后面是有跟表达式的）
- 该指令表示元素和组件只渲染一次，不会随着数据的 改变而改变
- 代码如下
响应式：当页面中的数据发生改变时，页面显示的数据会自动改变。
2.2、v-html
2.3、v-text
- v-text作用和Mustache比较相似：都适用于将数据显示在界面中
- 缺点：不灵活，当 {
{}} 中有数据时，
v-text会将该数据覆盖掉
2.4、
v-pre - 不去解析
{ {message}}，只原封不动的展示出来 - v-pre 用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法
- 代码如下：第一个h2元素的内容会被编译解析出来对应的内容，而第二个h2元素中会直接显示{
{message}}
2.4、
v-cloak - cloak：斗篷，用在div中
- 效果：当解析到div时，会设置v-cloak为none，使用完毕后就会删除v-cloak，再将 { {}} 中的数据解析出来
- 在某些情况下，我们浏览器会直接显示出未编译的Mustache标签
代码如下：
2.5 、
v-ifv-if是条件渲染指令，它根据表达式的真假来删除和插入元素，它的基本语法如下：v-if="expression"，expression是一个返回bool值的表达式，表达式可以是一个bool属性，也可以是一个返回bool的运算式
四、自定义指令
1、函数式
添加 directives:{}，但是定义的directives:{}中的函数切记没有返回值
函数中传入的两个参数，一个是绑定使用所在的HTML标签，另一个参数是绑定的元素
需求：定义一个 v-big 指令，和 v-text 功能类似，但会把绑定的数值放大10倍
2、对象式
需求：定义一个 v-fbind 指令，和 v-bind 功能类似，但可以让其所绑定的 input 元素默认获取焦点
一般自动获取焦点的方法式：
接下来使用对象式解决
3、总结
自定义指令directives中的this指的是全局windows
