• vue学习


    1.
    实现双向数据绑定
    v-bind:href
    缩写 :href

    v-bind:class="{ active: isActive, 'text-danger': hasError }"
    v-bind:style 直接设置样式

    2.
    监听 DOM 事件
    v-on
    例:v-on:click="dosomething" 缩写 @click="dosomething"
    v-on:submit="onSubmit"

    v-on:submit.prevent="onSubmit"
    修饰符是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。
    例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():

    3.
    条件
    <p v-if="seen">现在你看到我了</p>
    seen:true/false

    div v-else-if="type === 'B'">

    <div v-else>

    4.
    v-show 指令来根据条件展示元素
    true/false

    5.
    循环使用 v-for 指令。

    v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名。

    迭代对象
    <li v-for="(value, key, index) in object">
    {{ index }}. {{ key }} : {{ value }}
    </li>

    new Vue({
    el: '#app',
    data: {
    object: {
    name: '菜鸟教程',
    url: 'http://www.runoob.com',
    slogan: '学的不仅是技术,更是梦想!'
    }
    }
    })

    6.
    Vue.js 计算属性
    computed vs methods
    效果上两个都是一样的,
    但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。
    而使用 methods ,在重新渲染的时候,函数总会重新调用执行。

    7.
    Vue.js 监听属性
    watch,我们可以通过 watch 来响应数据的变化。

    8.
    v-model 指令在表单控件元素上创建双向数据绑定。

    9.
    Vue.js 组件,组件可以扩展 HTML 元素,封装可重用的代码。
    // 注册
    Vue.component('runoob', {
    template: '<h1>自定义组件!</h1>'
    })
    <div id="app">
    <runoob></runoob>
    </div>

    10.
    vue生命周期:
    执行顺序:created->computed->mounted
    created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
    mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。

    如果错误,请指出,谢谢!

  • 相关阅读:
    el-form-item内容过多,及弹窗框宽度属性show-overflow-tooltip设置
    iview 的table组件,自带过滤功能
    elementUI 的el-pagination 分页功能
    “==” 和 equals()的区别
    算法
    SpringBoot环境下java实现文件的下载
    配置文件中,字符串占位符替换
    linux系统的一些常用命令
    Maven项目打包成war包并启动war包运行
    java实现文件压缩
  • 原文地址:https://www.cnblogs.com/liuyj-dev/p/9967701.html
Copyright © 2020-2023  润新知