浏览器正能量网站/互联网营销平台
Vuejs学习，从入门到精通
- 初步了解vuejs
- Vue基础语法
- 组件化开发
- Vue CLI详解
- Vue-router(前端路由)
- Vuex详解
- 网络封装
- 项目实战
(之前在跟着黑马的vue教程粗略过了一下vue基础，接下来这段时间对vue重新进行系统化学习，主要是跟着B站的coderwhy老师自学，一边更新记录笔记，一边敲代码学习加深理解)
- 初步了解vuejs
Vuejs是一个渐进式框架
- 渐进式意味着你可以将vue作为你应用的一部分嵌入其中
- 如果你希望将更多的业务逻辑用vue实现，那么vue的核心库以及其生态系统可以满足你的需求
Vue有很多特点和web中常见的高级开发功能
- 解耦视图和数据
- 可复用的组件
- 前端路由技术
- 状态管理
- 虚拟DOM
- vue.js安装
方式1：直接CDN引入
可以选中引入开发环境版本还是生产环境版本
方式2：下载和引入
方式3：NPM安装（建议学习阶段使用）
- Vue.js起步
每一个vue应用都需要使用实例化vue来实现
语法格式如下：
Var app = new Vue({
………
})
Vue构造器中包含el属性：该属性决定了这个Vue对象需要挂载到哪一个元素中
包含data属性：该属性中通常存储数据
下面是一个简单的vue测试实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 </title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="vue_det">
<h1>{{num}}</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_det',
data: {
num: 100
},
})
</script>
</body>
</html>
- Vue中的MVVM
- Vue的生命周期
BeforeCreate()
Create()
BeforeMount()
Mounted()
BeforeUpdate()
Update()
BeforeDestory
Destroyed()
- Vue基础语法
- 插值操作（Mustach语法）
就是 {{变量名或者简单的表达式 }}
- v-once指令，后面不用跟任何东西
该指令表示元素和组件只能渲染一次，不会随着数据的改变而改变
例如：<h2 v-once>{{message}}</h2>
(3)v-html指令 该指令后面往往跟上一个string类型变量
该指令会将变量的html解析出来并渲染
- v-text指令,作用类似于{{}}
- <h2>{{message}}</h2>
- <h2 v-text="message"></h2>
（5）V-pre指令，跳过元素的编译过程，用于显示原来的Mustach语法
- <h2 v-pre>{{message}}</h2> //输出{{message}}
- <h2 >{{message}}</h2> //输出message的值
- V-clock指令 （斗篷）基本不会使用了
- V-bind指令 作用：动态绑定属性
缩写：一个冒号：
<img v-bind:src="url" alt="">
data: {
url:图片地址
}
v-bind动态绑定Class（对象语法）可以通过判断，传入多个值
<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>
可以通过isActive,isLine的true或者false来动态控制class属性
v-bind绑定class （数组语法）
<h2 :class=“[‘active’, 'line']">Hello World</h2>
- 计算属性
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只触发一次默认行为