Vue.js 入门提纲

最新推荐文章于 2024-04-24 09:27:42 发布

kuyzuli1234567890

最新推荐文章于 2024-04-24 09:27:42 发布

阅读量413

点赞数

分类专栏： html vue 文章标签： html vue-js

本文链接：https://blog.csdn.net/qq_17580465/article/details/73332193

版权

html 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

vue

1 篇文章 0 订阅

订阅专栏

模板语法

插值
- 文本 {{ }} (v-once)
- html v-html (xss攻击)
- 属性 v-bind
- javascipt表达式
指令
- v-if v-on v-for v-bind
- 参数 :参数=值
- 修饰符 .修饰符
过滤器
- mustache 插值和 v-bind 表达式
- {{ value | filterA | filterB(‘arg1’,arg2) }}
- filters
缩写
- v-bind:href (:href)
- v-on:click (@click)

计算属性

computed 属性
computed vs methods

计算属性是基于它们的依赖进行缓存的-计算属性只有在它的相关依赖发生改变时才会重新求值

computed vs watch

通常更好的想法是使用 computed 属性而不是命令式的 watch 回调.
计算 set
watch

当你想要在数据变化响应时，执行异步操作或开销较大的操作，这是很有用的
Class 与 Style 绑定

Class 绑定
- 对象绑定
```
 <div class="static" 
         v-bind:class="{ active: isActive, 'text-danger':hasError }">
 </div>
 <div v-bind:class="classObject"></div>
```
- 数组绑定
```
     <div v-bind:class="[activeClass, errorClass]">
```
- 组件
```
    <my-component v-bind:class="{ active: isActive }"></my-component>
```
style 绑定
- 对象绑定
```
    <div v-bind:style="styleObject"></div>
```
- 数组语法
```
      <div v-bind:style="[baseStyles, overridingStyles]">
```
- 自动添加前缀
- 多重值
条件渲染
- v-if
  - template 和 v-if 条件组
  - v-else
  - v-else-if
  - key 管理可复用元素
- v-show
  - 会保留在dom中
- v-if vs v-show
  
  v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
  如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。
- 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级
列表渲染
```
 <ul id="example-1">
        <li v-for="item in items">
            {{ item.message }}
        </li>
   </ul>
```
- 在 v-for 块中，我们拥有对父作用域属性的完全访问权限。 v-for 还支持一个可选的第二个参数为当前项的索引
```
<ul id="example-2">
        <li v-for="(item, index) in items">
            {{ parentMessage }} - {{ index }} - {{ item.message }}
        </li>
    </ul>
```
- 带v-for 的标签来渲染多个元素块
- 对象迭代 v-for
```
  <div v-for="(value, key, index) in object">
        {{ index }}. {{ key }} : {{ value }}
    </div>
```
- 整数迭代 v-for
  <span v-for="n in 10">{{ n }}</span>
- 组件和 v-for
```
   <my-component
            v-for="(item, index) in items"
            v-bind:item="item"
            v-bind:index="index">
        </my-component>
```
```
  <li
     is="todo-item"
     v-for="(todo, index) in todos"
     v-bind:title="todo"
     v-on:remove="todos.splice(index, 1)"
    ></li>
```
- v-for 和 v-if
  - key (建议尽可能使用 v-for 来提供 key )
- 数组更新检测
  - 变异方法
    - push()
    - pop()
    - shift()
    - unshift()
    - splice()
    - sort()
    - reverse()
  - 重塑数组
    -filter(), concat(), slice()
    -注意事项
    - example1.items.splice(newLength)
    - example1.items.splice(indexOfItem, 1, newValue)
  - 显示过滤/排序结果 (以创建返回过滤或排序数组的计算属性)
事件处理器
- 监听事件 v-on
- 方法事件处理器
- 内联处理器方法
- 事件修饰符
  - .stop 阻止单击事件冒泡
  - .prevent 提交事件不再重载页面
  - .capture 添加事件侦听器时使用事件捕获模式
  - .self 只当事件在该元素本身（而不是子元素）触发时触发回调
  - .once 点击事件将只会触发一次
- 案件修饰符
  - .enter
  - .tab
  - .delete (捕获 “删除” 和 “退格” 键)
  - .esc
  - .space
  - .up
  - .down
  - .left
  - .right
  - .ctrl
  - .alt
  - .shift
  - .meta
  - Vue.config.keyCodes.f1 = 112
  - <input @keyup.alt.67="clear">
表单控件绑定

基础用法
- 文本框
- 多行文本
- 复选框
- 单选按钮
- 单选列表
- 多选列表
绑定value
- 复选框
```
 <input
    type="checkbox"
    v-model="toggle"
    v-bind:true-value="a"
    v-bind:false-value="b"
  >
```
- 单选按钮
- 选择列表设置
修饰符
- .lazy change事件触发更新
- .number 转为数字
- .trim 去掉收尾空格
v-model 和组件

组件

使用组件
- 注册 Vue.component(tagName, options)
- 局部注册 components属性
- dom模板解析（特殊的 is 属性）
- data必须是函数
prop
- 使用prop传值
- 驼峰命名转为短横线命名
- 动态prop
- 字面量和动态语法
- 单向数据流（局部变量和计算属性）
- prop验证
  - String、Number、Boolean、Function、Object、Array
自定义事件
- v-on 绑定自定义事件
  - 使用 $on(eventName) 监听事件
  - 使用 $emit(eventName) 触发事件
  - 给组件绑定原生事件
- .sync 修饰符
- 非父子间的通信
使用slot分发内容
- 编译作用域
- 单个slot
- 具名slot
- 作用域插槽
动态组件
- keep-alive 保存在内存中
杂项
- 编写可复用组件
  - props,events,slots
- 子组件索引
- 异步组件
- 高级异步组件
- 内联模板 inline-template
- x-templates
- 静态组件 v-once缓存