vue-系统学习

Vuejs学习，从入门到精通

• 初步了解vuejs
• Vue基础语法
• 组件化开发
• Vue CLI详解
• Vue-router(前端路由)
• Vuex详解
• 网络封装
• 项目实战

(之前在跟着黑马的vue教程粗略过了一下vue基础，接下来这段时间对vue重新进行系统化学习，主要是跟着B站的coderwhy老师自学，一边更新记录笔记，一边敲代码学习加深理解)

• 初步了解vuejs

Vuejs是一个渐进式框架

1. 渐进式意味着你可以将vue作为你应用的一部分嵌入其中
2. 如果你希望将更多的业务逻辑用vue实现，那么vue的核心库以及其生态系统可以满足你的需求

Vue有很多特点和web中常见的高级开发功能

1. 解耦视图和数据
2. 可复用的组件
3. 前端路由技术
4. 状态管理
5. 虚拟DOM

• vue.js安装

方式1：直接CDN引入

       可以选中引入开发环境版本还是生产环境版本

方式2：下载和引入

方式3：NPM安装（建议学习阶段使用）

• Vue.js起步

每一个vue应用都需要使用实例化vue来实现

语法格式如下：

Var app = new Vue({

………

})

Vue构造器中包含el属性：该属性决定了这个Vue对象需要挂载到哪一个元素中

            包含data属性：该属性中通常存储数据

下面是一个简单的vue测试实例

      

      

      

      

             

{{num}}

      

      

• Vue中的MVVM

 

• Vue的生命周期

BeforeCreate()

Create()

BeforeMount()

Mounted()

BeforeUpdate()

Update()

BeforeDestory

Destroyed()

• Vue基础语法

1. 插值操作（Mustach语法）

就是 {{变量名或者简单的表达式 }}

1. v-once指令，后面不用跟任何东西  

该指令表示元素和组件只能渲染一次，不会随着数据的改变而改变

例如：<h2 v-once>{{message}}h2>

(3)v-html指令  该指令后面往往跟上一个string类型变量

   该指令会将变量的html解析出来并渲染

1. v-text指令,作用类似于{{}}
2. <h2>{{message}}h2>
3. <h2 v-text="message">h2>

（5）V-pre指令，跳过元素的编译过程，用于显示原来的Mustach语法

1. <h2 v-pre>{{message}}h2>    //输出{{message}}
2.     <h2 >{{message}}h2>         //输出message的值

1. V-clock指令  （斗篷）基本不会使用了

1. V-bind指令   作用：动态绑定属性

              缩写：一个冒号：

<img v-bind:src="url" alt="">

 data: {

                url:图片地址

            }

v-bind动态绑定Class（对象语法）可以通过判断，传入多个值

<h2 :class="{'active': isActive, 'line': isLine}">Hello Worldh2>

可以通过isActive,isLine的true或者false来动态控制class属性

v-bind绑定class （数组语法）

<h2 :class=“[‘active’, 'line']">Hello Worldh2>

• 计算属性

Computed :{ 计算属性（

Return 变化后的数据）}

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

• 事件监听

v-on指令

        作用：事件监听

        简写： @

1.简单实例（点击一次按钮sum数组自增1）

<button v-on:click="sum++">+button>

2.在事件定义时，如果写方法时省略了小括号没有传参，但是方法本身是需要传参的，这个时候vue会默认将浏览器生产的event对象作为参数传递给方法中

例：

methods: {

      sumAdd(event) {

            console.log(event)

      }

}

3.

定义方法时，我们既需要传递变量，又需要获取event

可以通过这样的方法实现（注意button里面不能直接写event,否则编译器会将event看成某个变量或者方法

<button v-on:click="sumAdd('abc',$event)">+button>

methods: {

      sumAdd('abc',event) {

            console.log(event)

      }

}

4.v-on的修饰附的使用

.stop修饰符，阻止冒泡行为

<button v-on:click.stop="sumAdd">+button>

.prevent修饰符组织默认行为

.once只触发一次默认行为