Vue cli相关知识
一、vue 简介
1- vue是什么
基于JavaScript开发的渐进式框架
2- vue的核心 -- MVVM
数据驱动与组件化
3- vue的优势
a、体积小
b、运行效率高、方便维护
c、双向数据绑定【数据响应式】
d、生态丰富、学习成本低
e、使用场景广泛
4- vue的特点
a、易用 -- 有html + css +JavaScript 基础即可
b、灵活 -- 可以在库与框架之间自如伸缩
c、高效 -- 文件小、快捷的虚拟DOM、优化方便
注意：库、组件、插件、框架的区别
库 :jquery、zepto --- 提供项目常用的方法、相当于工具包
组件:bootstrap、swiper --- 多个插件的集合体，提供js 结构 样式 可以快速构建页面
插件:iScroll --- 把项目中某一个功能进行封装
框架:angular（MVC）、vue（MVVM）、react、uni-app --- 库+组件的集合体
二、vue cli 脚手架搭建（安装）
1- 下载独立版本
2- npm 安装
npm install vue install 简写 i -- 安装
--save 简写 -S -- 保存
--global 简写 -g -- 全局
3- cmd
a、2.X
npm install -g vue-cli
-脚手架安装成功后
-创建项目vue create 项目名（）
vue init webpack vue_demo(自定义项目名称)
cd vue_demo 切换到项目目录中
npm run serve / npm run dev 启动项目
b、更高版本 版本升级后
解决问题方式1：
卸载原有的 vue-cli 2.9.6 npm uninstall vue-cli
安装高版本的 vue-cli 5.0.1 npm install @vue/cli
解决问题方式2：
直接升级vue-cli 版本 npm update -g @vue/cli
4- 项目结构说明(创建项目成功)
|---node_moudule == 项目中安装的依赖模块
|---src == 源码位置 开发目录
|---|---main.js == 打包编译的入口文件
|---|---App.vue == 项目页面入口文件、vue组件
|---|---components == 当前项目的公共子组件目录
|---|---views == 路由组件 -- 当前项目的其他组件
|---|---assets == 资源文件夹 一般放一些静态资源
|---|---router == 当前项目的路由文件
|---|---store == 当前项目的状态文件
|--- public == 纯静态资源
|---|---index.html == 入口模块文件
|--- babel.config.js == babel配置文件
|--- gitnore == 用来过滤一些版本控制的文件
|--- package.json == 项目文件，记载一些命令和依赖还有简要的项目描述信息
|--- README.md == 介绍自己项目 ，可参照github 中star多的项目
|--- vue.config.js == vue实例配置文件
附：
三、vue内置指令
1- 什么是指令？
带有v-的特殊属性，当用在表达式上时表达式的值会发生改变，将某些行为应用到dom上
2- 指令
特殊-{{}} -- 设置文本内容，将data数据展示到视图中 普通文本
v-text -- 设置文本内容，将data数据展示到视图中 纯文本
v-html -- 设置文本内容，将data数据展示到视图中 可以解析html元素
v-cloak -- 解决插值页面闪烁问题
v-on -- 事件监听
a、完整格式 v-on：事件名 = "事件处理函数" --- 简写： @事件名 = "事件处理函数"
b、事件修饰符
.stop -- 阻止事件传播 v-on:click.stop
.prevent -- 事件操作时不再重载页面 v-on:submit.prevent
.once -- 事件只触发一次 v-on:click.once
c、按键修饰符
.enter === keyup.13 回车 v-on:keyup.enter v-on:keyup.13
v-show -- 显示隐藏元素 -- 根据css样式中 display属性设置的 true --- none false --- block
v-if 条件渲染 -- 显示隐藏元素 -- 根据boolean值来进行渲染dom（true） 或者 不渲染dom操作（false）
v-else 条件返回false的时候执行此处
v-else-if 上一个条件为false的时候执行此处 如果此处为true 则不继续判断 为false则继续向下判断
v-for -- 列表渲染
以下名字除了in以为都是自定义
（item,index） in obj
item --- 元素 -- 值
index --- 键
obj --- 对象
需要绑定key
v-bind -- 强制绑定属性 【给子组件传递数据 <todoList :todos="todos"/>】
完整格式：v-bind:属性名 = "属性值" 简写：:属性名="属性值"
v-model -- 双向绑定 数据变视图变，视图变数据变
v-once -- 设置文本 只执行一次
v-pre -- 格式化
c-slot -- 插槽
3- v-text v-html {{}} 的区别
v-text 与 {{}} 区别
1- 相同点 设置文本
2- 不同点 插值存在页面闪烁问题 v-text 不存在闪烁
解决办法：
给设置插值的父标签 添加指令v-cloak 在样式中设置 [v-cloak]{display:none}
v-text 与 v-html 区别
1- 相同点 设置文本
2- 不同点 v-text 不能解析html元素，v-html可以
4- v-show 与 v-if 的区别
1- 操作
v-if：向DOM树添加或者删除DOM元素
v-show：控制css中display属性 进行元素的显示与隐藏
2- 编译过程
v-if:局部编译卸载的过程：在切换过程中，销毁或者重建 组件中的事件与子组件
v-show:执行css的切换
3- 编译条件
v-if:惰性，只有条件为true的时候才会编译解析组件
v-show:任何情况下都会自动加载，然后控制元素的显示与隐藏
4- 性能消耗
v-if:切换消耗高
v-show:只有初始渲染消耗
5- 使用场景
v-if:改变频率不频繁
v-show:频繁切换
5- 为什么列表渲染时要单独绑定key值
1- 唯一标识
2- 如果列表项自身有id区分（唯一的证明）则使用即可，如果不存在则依赖key值作为唯一标识
6- v-model双向绑定的原理7
【get 、set 此处留给你们课下分析】
1- 观察者模式：当属性发生改变时，使用该数据的地方也会发生改变
2- 数据劫持：object.defineproperty:给属性赋值时，程序可以感知到，从而改变属性值
四、实例对象的配置项(选项）
- el – 管理dom节点的入口
1.data：存放数据的地方（包含多个属性的对象 – 数据的存储（描述属性） 对象 - 函数）
data(){
return{
bool:true
}
},
2.methods:写使用方法的地方（包含多个方法的对象）
<div class="last" @click="qu">立即使用</div>
methods:{
qu(){
console.log(1)
//this.$emit("abc")
}
}
3- computed – 包含多个计算属性的对象
computed:{
xm1(){
// 执行计算属性中的观察者模式：get 将数据直接返回作为制定数据的值
//直接return返回数据即可
return this.xing+" "+this.ming
},
xm2:{
// 观察者模式
get(){
return this.xing+" "+this.ming
},
// 数据劫持
set(value){
console.log(value)
// 获取到修改后的数据 指定条件拆分数据成为数组
const names = value.split(" ")
console.log(names)
// 将对应的数组元素分别赋值给 姓 名
this.xing = names[0]
this.ming = names[1]
}
}
4- watch – 包含多个简体属性的方法的对象
<body>
<div id="app">
姓：<input type="text" placeholder="此处填写姓" v-model="xing">
名：<input type="text" placeholder="此处填写名" v-model="ming">
姓名1：<input type="text" placeholder="合成姓名1" v-model="xm1">
姓名2：<input type="text" placeholder="合成姓名2" v-model="xm2">
</div>
</body>
//（1）全局
<script type="text/javascript">
vm.$watch("ming",function(value){
console.log(value)
this.xm2 = this.xing+" "+value
})
</script>
//（2）局部
<script type="text/javascript">
let vm = new Vue({
el:"#app",
// 包含属性
data:{
xing:"张",
ming:"三",
xm1:"",
xm2:""
},
watch:{
// 当检测属性发生改变时 触发对应的处理函数
xing(value){
this.xm1 = value+" "+this.ming
}
}
})
</script>
5- 过滤器
a、全局过滤
Vue.filter(过滤器的名字，处理函数)
b、局部过滤 filters{}
filters:{
过滤器名字(value){}
}
c、如何使用
{{要过过滤的信息 | 过滤器名字}}
{{要过过滤的信息 | 过滤器名字（过滤条件）}}
注意：如果全局过滤器与局部过滤器重名的话，那么局部过滤器优先级高
d、组件中过滤器的全局配置
自定义过滤器模块 设置默认向外暴露的过滤方法
在入口模块main.js中引入过滤器模块 将接收到的过滤器模块 配置到vue实例对象中原型链的属性里即可所有的组件中都可以使用
注意：过滤器用于：v-bind 或者插值中
6- 自定义指令 – directive
a、全局定义
Vue.directive("指令名",function(el,binding){//配置指令功能})
b、局部定义
directives:{
"指令的名字"(el,binding){
el.textContent = binding.value.toLowerCase()
}
}
c、使用
v-自定义的指令名
注意：
el ：当前指令所在的元素
binding[对象]：当前指令所在的组件对象
name:指令名 ，不包括 v-
value:指定的绑定值
oldValue：老值
7- ref – 标记dom元素 – 给我当前的组件起小名
$refs : 获取被标记的dom元素 相当于 ref标记的组件本身
8- data在什么情况下是函数 在什么情况下是对象
1- 对象: 普通文件 .html
2- 函数: 组件中 .vue
为什么在组件中要是用 函数 ?
因为 多个组件数据交互时，可能会出现单个组件独立使用的数据，不需要被其他组件访问，且避免组件之间的冲突，或者重名 所以设置到函数中 指在当前组件生效 关闭此组件自动销毁
9- computed 与 watch 介绍
1- computed:计算属性
1- 自身需要依赖另一个值得改变而使当前所在DOM更新
2- 计算属性不可以与data中的数据重名
3- 计算属性的方法不需要加括号调用，方法需要单独加括号调用 因为 计算属性 不属于方法 属于属性
4- 计算属性具有缓存机制
当计算属性第一次获取到响应式数据时，会缓存，在后期渲染视图时，会观察响应式数据是否改变，如果改变会调用计算属性，如果没有改变会读取存储的数据，方法只用更新就会重新调用
5- 当获取计算属性时会触发getter ，当设置修改计算机属性是会触发setter
注意：计算属性不可以使用箭头函数，否则this不会指向这个组件的实例
2- watch:监听属性
1- 当检测的值发生改变时，那么对应的方法会自动执行
2- deep 开启深度监视
发现对象内部值得变化，可以在选项参数中指定deep：true 作为深度监视，但是监听数组的变更则不需要使用
3- immediate
在选项参数中指定immediate：true将立即以表达式的当前值触发回调
3- computed 与 watch 的区别
1- computed 中的属性不是data中的属性 而是依赖于data中的属性数据改变而改变
watch 监测data中某个属性数据的改变而执行某项操作
2- computed 数据具有缓存机制 watch没有
小结：vue的初始，知识是学不到尽头的，每天获取一点点，大家加油
3452
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
