【博学谷学习记录】超强总结，用心分享 _ 前端开发 vue指令与组件

---

vue基础

vue 是一个渐进式的 javascript 框架！

渐进式：逐渐增强，可以学一点用一点
库：本质上是一些方法的集合。每次调用方法，实现一个特定的功能。
如：moment axios
框架：是一套完整的解决方案。框架实现了大部分的功能，我们需要按照框架的规则写代码。
如：vue react angular … (虽然需要遵循规则，但是带来了高效)

Vue是一个MVVM的框架 （MVVM：一种软件架构模式）

M：model数据模型（ajax获取到的数据）
V：view视图（页面）
VM：ViewModel 视图模型（操作视图）

MVVM通过 数据双向绑定 让数据自动地双向同步
V（修改视图） -> M（数据自动同步）
M（修改数据） -> V（视图自动同步）

之前的思想，原生 dom驱动。无论修改什么页面内容，先找对象，操作dom。
现在的思想，vue 数据驱动。想更新视图，直接操作数据即可。数据变化，视图自动更新

@vue/cli 脚手架的使用

@vue/cli 也叫 vue脚手架, @vue/cli 是vue官方提供的一个全局命令工具
这个命令可以帮助我们快速的创建一个vue项目的基础架子。

脚手架: 为了保证各施工过程顺利进行而搭设的工作平台（相当于建楼房时四周搭建的架子）（所以项目上线时就不用了）
vue脚手架的好处： 1. 开箱即用 2. 零配置（不用你配webpack） 3. 内置babel等工具

vue脚手架的基本使用：

1. 全局安装：

   npm i @vue/cli -g    或    yarn global add @vue/cli
   

2. 查看vue版本：

   vue --version
   

3. 找个目录，初始化一个vue项目：

   vue create 项目名（不能用中文）
   

4. cd 进入目录，启动项目, 打包项目：

   启动项目：yarn serve 或 npm run serve
   打包项目：yarn build 或 npm run build
   

---

vue指令

v-bind

作用： 动态的设置html的标签属性
语法： v-bind:属性名=“值”
简写： :属性名=“值”

用 v-bind 动态设置标签的 class类名
	语法： :class="对象/数组"
		对象：如果键值对的值为true，那么就有这个类，否则没有这个类
		数组：数组中所有的类，都会添加到盒子上
	v-bind 对于类名操作的增强, 注意点：class 不会影响到原来的 class 属性

用 v-bind 动态设置标签的 style 行内样式
语法： :style=“对象/数组”

v-on / @

作用：注册事件
语法：

1. v-on:事件名=“要执行的少量代码"
2. v-on:事件名=“methods中的函数名"
3. v-on:事件名=“methods中的函数名(实参)"

注意：事件处理函数在methods中提供
简写：v-on: 可以 简写 成 @

vue中获取事件对象：
(1) 没有传参, 通过形参接收 e
(2) 传参了, 通过$event指代事件对象e（$event 获取的事件的形参！并不是事件对象）

事件修饰符
vue提供事件修饰符，可以快速阻止默认行为或阻止冒泡
@事件名.prevent 阻止默认行为 @事件名.stop 阻止冒泡

按键修饰符
@keyup.enter 监听回车键
@keyup.esc 监听返回键

v-show 和 v-if

功能: 控制盒子的显示隐藏
1. v-show
语法：v-show=“布尔值” （true显示, false隐藏）
原理：实质是在控制元素的 css 样式，display: none；（通过css显示隐藏）
2. v-if
语法：v-if=“布尔值” （true显示, false隐藏）
原理：实质是在动态的创建或者删除元素节点 （直接删除或者创建）
应用场景：
1. 如果是频繁的切换显示隐藏, 用 v-show
(v-show, 只是控制css样式，而v-if, 频繁切换会大量的创建和删除元素, 消耗性能)
2. 如果是不用频繁切换, 要么显示, 要么隐藏的情况, 适合于用 v-if
(v-if 是惰性的, 如果初始值为 false, 那么这些元素就直接不创建了, 节省一些初始渲染开销)
3. 更加简单的场景可以直接用三元运算符实现 {{ isShow ? '收起' : '展开' }}

v-else 和 v-else-if

v-model

作用：给表单元素使用，双向数据绑定
可以快速收集或设置表单信息
语法：v-model=‘值’
注意：v-model 会忽略掉表单元素原本的value, checked等初始值


v-model 修饰符：
语法：v-model.修饰符=“Vue数据变量”
.number 转数字，默认是以字符串呈现（如果转不了就不转了）
.trim 去除首尾空白字符
.lazy 在change时触发而非input时（input事件：实时触发；change事件：失去焦点或回车触发）

v-text 和 v-html

作用：更新元素的innerText/innerHTML
语法：   v-text="值"       不常用，用插值表达式代替
             v-html="值"
区别：   v-text 不解析标签     v-html 解析标签
注意：永远不要将用户的输入，直接作为v-html的值，容易造成xss攻击（跨站脚本攻击）
	用户的输入可能是一些script脚本 => v-html解析标签，解析script，执行js，容易有攻击漏洞

v-for

作用：可以遍历 数组 或者 对象，用于渲染结构
遍历数组语法:

v-for="item in 数组名"
v-for="(item, index) in 数组名"

遍历对象语法：

v-for = "(value, key) in 对象名"

遍历数字

v-for = "item in 数字"     //可以用于快速生成一堆div盒子

---

vue组件

组件是可复用的 Vue 实例，封装标签，样式和JS代码

组件的注册使用

根组件 App.vue 用于注册其他小组件

1、创建组件，封装要复用的标签，样式，JS代码（在src/components文件夹中）
2、引入组件（App.vue中）
3、注册组件   
	全局注册 – main.js中（同时在main.js中引入）
	局部注册 – 某.vue文件内
4、使用组件：组件名当成标签使用即可
	<组件名></组件名>

局部注册：

全局注册：

vue组件通信

父传子

1. 父组件通过给子组件添加标签属性传值 （比如App.vue中，定义了my-product组件）

   <my-product  title="棒棒糖"  price="12"  info="好吃"></my-product>
   

2. 子组件中, 通过props属性接收 （export default中） 只读属性

   props: [ 'title' , 'price' , 'info' ]
   

在vue中需要遵循单向数据流原则： （从父到子的单向数据流动, 叫单向数据流）
1. 父组件的数据变化了，会自动向下流动影响到子组件
2. 子组件不能直接修改父组件传递过来的 props， props是只读的

子传父

1. 子组件可以在修改数据的事件触发的同时触发事件，发出申请 this.$emit("自定义事件名", 参数1, 参数2);

   <script>
   export default {
     props: ["pid", "title", "price"],       //父传子，接收
     methods: {
       kj() {                  //子触发砍价事件
         console.log(this.price);
         this.$emit("sayPrice", 10, this.pid);      //向父发出申请，子传父
       },
     },
   };
   </script>
   

2. 父组件中给子组件加入对应的自定义事件属性，进行事件监听，处理触发的事件函数 @子组件中的事件名=“事件函数名”

   <product  @sayPrice="handleSayPrice"></product>
   
   <script>
   import product from "./components/my-product.vue";
   export default {
     data() {
       return {
         list: [             //后台数据
           { id: 1, title: "炸鸡腿", price1: "30" },
           { id: 2, title: "汉堡", price1: "40" },
           { id: 3, title: "冰淇淋", price1: "10" },
         ],
       };
     },
     components: {
       product,
     },
     methods: {
       handleSayPrice(price, pid) {          //在子组件标签中添加监听事件，监听名为handleSayPrice
         const x = this.list.find(item => item.id===pid)        //根据id找到这条数据
         x.price1 -= price         //修改数据，完成子传父操作
       },
     },
   };
   </script>