VUE使用总结

新建vue项目

1. 这篇有详解vue新建项目

模板语法

1. 文本–两种表达方式
   • Message: {{ msg }}
   • 123 msg在data中定义, 注意此时的123不再显示
2. 通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。这个将不会改变: {{ msg }}
3. v-html(下面组件例子中有比较)
   • 不加v-html则显示源码
   • 加了v-html显示编译后的
4. v-bind
5. v-on 会调用methods中相应的方法

...

...

6. 计算属性和侦听器
   • 计算属性会调用computed中的函数。我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
   • 计算属性的setter
   • 侦听器vue官方解释
7. 条件渲染v-if, v-else-if, v-else。 v-show
   • v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
8. v-for
9. v-model双向绑定。包括单选框、复选框、文本、文本域等

组件

1. 组件就是一个可复用的vue的实例
2. 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝
3. 组件包含的内容

4. 组件传值组件传值方式
   • prop采用驼峰命名法。
   • prop传递数字、文本、布尔值、数组、对象
   • prop验证
5. 插槽: 没有插槽的情况下在组件标签内些一些内容是不起任何作用的，当我在组件中声明了slot元素后，在组件元素内写的内容插槽详解
   就会跑到它这里了！
6. 过滤器

{{ message | capitalize }}



filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

8. 单文件组件
9. 问题:
   • 问题1:为什么在项目中data需要使用return返回数据呢？ 答:不使用return包裹的数据会在项目的全局可见，会造成变量污染；使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。

Vue Router

1. 将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们

声明式
 
 Go to Foo
 
编程式
// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

2. 动态路由匹配
   • /user/:username /user/evan { username: 'evan' }
   • /user/:username/post/:post_id /user/evan/post/123 { username: 'evan', post_id: '123' }
   • 取值:$route.params $route.params.id
3. 嵌套路由
4. 命名视图

Vue权限

权限描述

ref的使用

ref使用

@映射到src目录下