跳转到内容
aswind7
GitHub
Blog

Vue2 实用文档

原理

独立构建与运行时构建

vue 其实包含两步： 编译 模板字符串为render函数， render函数渲染界面。 独立构建 包含 编译器， 可以识别 template。 它也依赖浏览器 接口。运行时构建没有编译器，所以 只拿到 render函数，去渲染界面。

既没有template 也没有 render 则 需要从已有的dom结构 提取模板， 编译为render函数。

创建项目

在全局安装v-cli 的情况下 使用 vue init webpack my-project

会在当前路径生成一个基于webpack的名为my-project脚手架

插件

Vue2 一般使用vetur插件作为VSCODE开发的插件

"emmet.includeLanguages": {
        "vue-html": "html",
        "vue": "html"
    },
    "emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html"
    },

基本使用

转义输出: v-html=“msg"
只绑定一次:  v-once
v-for:  对象方式: val,key,index (本质是Object.keys())  数组方式: v-for = (val, index) in array  整数迭代：重复多次
data必须是函数，否则data会被多个实例共用;

事件

获取原生事件

<button @click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

methods: {
  warn: function (message, event) {
    // 现在我们可以访问原生事件对象
    if (event) {
      event.preventDefault()
    }
    alert(message)
  }
}

修饰符

.stop
.prevent
.capture
.self
.once
.passive
@keyup.enter

@submit.prevent = 'submit'
@click.prevent = 'submit'

自定义指令

v-directive(name, fn(){

this.el 是dom

})

组件

两种方式: 局部注册 和 全局注册

局部注册写在new Vue() 中

new Vue({ conponents: {} })

全局注册用Vue.Component

常见问题

v-cloak防止闪烁

http://www.csdn.net/article/1970-01-01/2825439 作者介绍

v-cloak防止数据请求慢时 {{}}这样的东西出现在用户视野中（防止闪烁,我遇到的问题）；

v-for中 有重复数据咋办?

track-by=“{{$hindex}}”

v-if vs v-show

v-show dom始终存在；

v-if 惰性渲染 为true时才存在。

当 v-if 与 v-for 配合

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

不推荐同时使用 v-if 和 v-for,因为每次遍历都需要if判断 费性能。

驼峰命名

组件中 模板里面 my-msg 则 配置(props)中需要驼峰命名 myMsg

练手项目

https://github.com/bailicangdu/vue2-happyfri

参考链接

Vue2 https://v2.cn.vuejs.org/

vue.js做交互： vue-resource.js https://github.com/pagekit/vue-resource

vue-devtools 调试工具

Tags: