zoukankan      html  css  js  c++  java
  • vue渐进式开发的理解和指令

    1.vue渐进式开发

    vue是一个渐进式的框架,轻量,易于上手,为啥是渐进式那,我当时也很蒙,比如的官网是jquery写的,就可以通过script标签引入事先准备好的vue.min.js的压缩源代码或者是通过http引入官网的代码。如下,

     

     

     

     

     

     

     然后在body下面写个script或者单独写个js文件引导这个页面。el属性是这个页面的根节点,里面的data就可以随便定义了。

     

     

     使用vue里的数据就跟平常一样,{{变量名}},  v-for渲染数组或者对象就ok了。这就是最简单的vue的渐进式开发,不需要借助vue脚手架。并且一些静态数据比较多的话,

     还是比较适合的。这是我对vue渐进式开发的理解,后面如果项目大,就可以npm install vue vuex了。

    2.vue的一些基本指令,语法:v-指令名

    v-text 只能解析文本,解析出来的文本作为标签的内容展示 =={{}}

    v-html 解析标签

    v-bind :属性名 //绑定动态属性 简写 :属性名

    属性名=“变量名”按字符串解析

    :属性名=“变量名” 按变量解析

    v-for

    //循环对象

    (value,key,index) in obj 

    :key="唯一标识" 如index

    第一个value是对象里面的每一项value值,第二个是对象里面的每一项的key,第三项下标;

    //循环数组

    (item,index,key)in list

    第一个是数组里面的每一项 第二个是下标 第三个 没用

    //循环数字

    (item,index,key)in Number

    第一个是从1开始的一个整数,第二个是下标,第三个没用

    v-show ="true"展示或隐藏 ===>style="display:none;"或display:block;

    v-on:eventname=""//绑定事件 简写@eventname 

    eventname(click,keyup input change)

    @eventname.修饰符

    prevent 阻止默认事件的修饰符 @click.prevent

    stop 阻止冒泡行为

    self 只触发自身事件,不会触发其他元素 与冒泡类似

    captrue 捕获阶段触发的

    once 只触发一次

    left 左键触发

    rigth 鼠标右键触发

    middle鼠标中建触发

    keyCode/keyalias 键盘状态码/键盘别名

  • 相关阅读:
    Privilege(特权)
    Access Control Model(访问控制模型)
    nrm 常用命令
    nrm安装完成运行报错 环境变量配置问题
    nrm : 无法加载文件 C:Program Files odejs rm.ps1,因为在此系统上禁止运行脚本。
    ts 实现简单的video播放器 源码: https://github.com/yuhualiang/miProjectTwo
    ts 弹窗组件
    替换字符串中图片的src
    03-05 变量声明
    03-04 变量声明
  • 原文地址:https://www.cnblogs.com/xiaopeilin/p/12802277.html
Copyright © 2011-2022 走看看