美文网首页Vue2
Vue2要点(一)

Vue2要点(一)

作者: wsgdiv | 来源:发表于2020-12-04 21:38 被阅读0次

    安装

    1、CDN

    Staticfile CDN(国内) : https://cdn.staticfile.org/vue/2.2.2/vue.min.js

    unpkg:https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。

    cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
    还是建议下载到本地。

    2、npm

    最新稳定版

    $ npm install vue

    命令行工具

    $ npm install --global vue-cli

    创建一个基于 webpack 模板的新项目

    $ vue init webpack my-project

    安装依赖,走你

    cd my-project npm install
    $ npm run dev

    实例生命周期

    Vue 实例在被创建之前都要经过一系列的初始化过程。
    created
    mounted
    beforeDestroy

    指令

    v-cloak 解决初始化慢而导致的页面闪动,常与display:none搭配使用
    v-html 指令,输出真正的 HTML
    v-if
    v-else-if
    v-else
    v-show
    v-pre
    v-for 根据一组数组的选项列表进行渲染 :key
    v-bind等价于 :
    v-on等价于 @
    v-model
    知识点:
    过滤器,Vue.js 允许你自定义过滤器,被用作一些常见的文本格式化。过滤器应该被添加在 mustache 插值的尾部,由“管道符”指示:

    {{ message | capitalize }}
    {{ message | filterA | filterB }}
    {{ message | filterA('arg1', arg2) }}
    

    计算属性

    computed(缓存特性:所依赖数据发生变化,则重新取值)
    默认只有getter(读取),根据需要可有setter(写入)

    数组更新检测(改变数组)

    push()
    pop()
    shift()
    unshift()
    splice()
    sort()
    reverse()

    重塑数组(替换数组)

    filter(), concat(), slice()

    事件

    .stop
    .prevent
    .capture
    .self

    <!-- 阻止单击事件冒泡 -->
    <a v-on:click.stop="doThis"></a>
    <!-- 提交事件不再重载页面 -->
    <form v-on:submit.prevent="onSubmit"></form>
    <!-- 修饰符可以串联  -->
    <a v-on:click.stop.prevent="doThat"></a>
    <!-- 只有修饰符 -->
    <form v-on:submit.prevent></form>
    <!-- 添加事件侦听器时使用事件捕获模式 -->
    <div v-on:click.capture="doThis">...</div>
    <!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
    <div v-on:click.self="doThat">...</div>
    

    按键
    enter
    tab
    delete (捕获 “删除” 和 “退格” 键)
    esc
    space
    up
    down
    left
    right

    修饰符

    .lazy 转变为在 change 事件中同步
    .number 自动将用户的输入值转为 Number 类型
    .trim 自动过滤用户输入的首尾空格

    相关文章

      网友评论

        本文标题:Vue2要点(一)

        本文链接:https://www.haomeiwen.com/subject/kjfnwktx.html