Vue是一个渐进式的框架，渐进式指的是可以将Vue作为应用的一部分嵌入其中，带来更丰富的交互体验，比如一个项目是使用Jquery构建的，此时就可以通过Vue对部分网页进行重构，而不必重构全部的网页。
el属性决定了这个Vue对象挂载到哪一个元素上。data属性会存储一些和绑定对象上相关联的数据。
- assets文件夹
上述文件夹下面主要存放静态文件。
- components文件夹
这个文件夹主要存放自定义组件
- App.vue
这个文件是我们的根组件。
- main.js
上述文件是我们的入口文件。
方式1
方式2
方式1
方式2
下面是一个动态属性名的例子，其中的值是静态的。
下面的循环遍历是以v-for为基础进行的。
下面是需要二次遍历的情况
下面是循环遍历对象的情况
下面是事件方法的基本用法。
下面的这种写法也是可以的。
核心就是传递给目标函数一个$event。
需要传入多个参数的情况，将$event放在最后。
下面是html结构
下面是获取方法：通过e.srcElement.dataset.xxx;
方式一：通过preventDefault。
方式二：通过事件修饰符来阻止
按键修饰符主要是检测用户按了什么键，主要是通过@keyup实现。
实现输入的时候，不做操作，只有按回车的时候才执行函数。
- 原生JS获取DOM对象
- 通过this.$refs
MVVM就是我们常说的双向数据绑定，Vue就是一个MVVM框架，M表示model,V表示View，在MVVM框架中model改变会影响view，view视图改变反过来会影响model。
- 获取双向数据绑定的值（直接从this中拿即可）
- 对radio单选框进行双向数据绑定
- 对select选择框进行双向数据绑定
- 对checkbox进行双向数据绑定
- 对textarea进行双向数据绑定
所谓的插值操作，可以理解为双大括号语法。
v-once存在的意义是数据只渲染一次，当数据发生变化的时候，渲染的数据不随着变化。
v-html存在的意义是将字符串形式的html文本渲染为真正的HTML。
v-text能够实现类似双大括号插值的方法，但是这个指令不够灵活，一般不推荐使用。
v-pre指令存在的意义是显示原生的内容，指的是不从vue中提取数据，双大括号显示的还是双大括号。
v-cloak指令存在的意义是控制JS解析引擎还未解析到双大括号语法或卡顿的时候，显示的内容。这个指令需要结合css语法。
v-bind可以使用冒号进行缩写。
v-bind动态绑定class。
- 也可以通过下面的语法
- 对象语法
- 数组语法
不加单引号的情况
v-bind动态绑定style。
- 加单引号的情况。
此时的50px代表的是字面量并不是变量，但是如果不加单引号，此时的50px指的是一个变量，Vue会从data中寻找这个变量。
- 不加单引号的情况
调用计算属性的时候，后面不用加括号。
下面是使用计算属性的一个例子。
一般情况下，我们不适用计算属性的set方法，请看下面的例子。
计算属性是有缓存机制的，以下面的例子为例，如果是methods，调用多少次，函数就需要执行多少次，但是如果是计算属性，调用多次，函数只执行了一次，极大的提高了性能。
v-on的语法糖是@
v-on在调用的时候，是否加括号是一个指的我们探讨的问题。
- 加不加都行的情况
- 假如函数需要接受一个参数的情况，如果加括号传入的是undefined，不加则传入的是事件对象。
- 既需要event对象又需要自定义参数的情况
有些时候，我们拿到event的目的可能是进行一些事件处理，vue提供的这些修饰符就是来帮助我们方便的处理一些事件。
- .stop -阻止事件冒泡，调用event.stopPropagation()
- .prevent - 调用event.preventDefault() 阻止默认事件的触发
- keyup：键盘弹起触发事件
- keyup.enter：输入回车才会触发事件
- .once点击回调只会触发一次
v-if后面的条件为false的时候，对应的元素及其子元素不会渲染，v-else后面不用加条件。
-
- 不渲染时是否在DOM中
-
- v-if如果条件为false时，对应的元素就不会存在与DOM中。
- v-show如果条件为false的时候，仅仅是将元素的diplay属性置为none。
- 如何选择
-
- 如果需要频繁的进行显示和隐藏，使用v-show。
- 如果只有一次切换的情况，使用v-if。
-
- push
- pop
- shift
- unshift
- splice
- sort
- reverse
- 通过下标修改元素。
v-model主要用来实现双向数据绑定。
v-model其实是一个语法糖，背后的本质包含了两个操作。
-
- v-bind绑定一个value属性。
- v-on指令给当前元素绑定input事件。
单个checkbox
多个checkbox的情况
只能选择一个的情况。
可以选择多个的情况。
- lazy修饰符
lazy修饰符可以让数据在失去焦点或者回车时才会更新。
- number修饰符
number修饰符可以让输入框汇中的内容自动转换为数字类型。
- trim修饰符
trim修饰符可以过滤内容两边左右的空格。
- 创建组件构造器
- 注册组件
- 使用组件
如果使用驼峰命名法注册组件的时候，在使用组件的时候需要使用分割线进行分割，否则会报错。
-
- 全局组件：意味着可以在多个Vue实例下面使用
- 局部组件：只能在某个Vue实例中使用
- 注册全局组件的语法糖写法
- 注册局部组件的语法糖写法
- 通过script标签
- 通过template标签
组件中的data需要是一个函数通过return的形式返回。
组件data必须是函数主要是为了防止不同函数实例操作相同的数据，组件复用希望复用的是功能，而不是数据复用。
- 通过props
- 数组形式
- 对象形式（可以指定传入的类型，或指定默认值）
调用默认值的时机就是调用组件的时候没有传参，但是模板中却使用了这个参数，此时就会使用默认参数。如果默认参数是数组或者函数，default必须是一个函数的形式。
下面的写法是不支持的
但是支持下面的写法
比如props想使用的参数名是ChildMyMessage，在组件调用进行v-bind绑定的时候需要写成:child-my-message
主要是通过子组件中调用$emit方法将事件传递给父组件，父组件通过v-on监听这个事件并调用自己的函数。
- 父组件访问子组件
通过$children
通过$refs
- 子组件访问父组件
使用$parent
- 任意组件访问根组件
通过$root
在Vue中最好的封装方式就是将共性抽取到组件中，将不同暴露为插槽，一旦预留了插槽，就可以让使用者根据自己的需求来决定插槽中插入的什么内容。
插槽的基本用法
插槽的默认值：在调用组件的时候，如果不指定插槽内容的时候显示的结果
具名插槽slot的使用
vue中查找变量是往上查找。
主要是让父组件获取到子组件插槽对应的数据。
所谓的watch监听指的就是监听一个属性是否发生变化，如果发生变化则触发响应的函数。
- 安装插件
- 修改标签
这个生命周期函数是在页面加载的时候运行的。
scoped关键字可以让css样式只适用于局部vue组件。
主要是通过传递this。
所谓的props验证指的是对传入的props进行校验。
所有的prop都使得其父子prop之间形成了一个单向下行绑定：父级prop的更新会向下流动到子组件中，但是反过来则不行，这样会防止子组件意外变更父组件的状态，从而导致你的应用的数据流向难以理解。另外，每次父级组件发生变更的时候，子组件中所有的prop都将会更新为最新的值，这意味着不应该在一个子组件内部改变prop,如果这样做了，Vue会在浏览器的控制台发出警告。
-
- 调用子组件的时候传入一个ref属性。
- 通过this.$refs.xxx.属性 获取数据。
- 通过this.$refs.header.方法执行子组件中的方法。
-
- 子组件通过this.$parent.数据 获取父组件的数据。
- 子组件通过 this.$parent.方法 主动执行父组件中的方法。
实例分析
- 父组件中的自定义事件是fatherEvent，父组件中的方法是hello。
- 子组件通过$emit触发并进行传参。
- 首先安装emitt插件
- 定义函数并暴露对象
- 需要发送数据的组件，广播事件
- 需要接收数据的组件，监听事件
首先明确下组件之间的结构，Home组件中包含Input组件，Input组件时Home组件的子组件。keyword是Home组件中的数据。
- Home组件
- Input组件
所谓的非prop的Attribute属性继承指的是，如果传入的一个属性，在子组件中并未声明接收，这个属性将被子组件的根标签继承，让我们一起来看下下面的例子。
自定义Attribute继承，可以禁用默认继承，并指定哪些元素可以继承。
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/40140.html