码迷,mamicode.com
首页 > 其他好文 > 详细

关于VUE的安装和一些简单属性

时间:2017-11-20 13:16:46      阅读:131      评论:0      收藏:0      [点我收藏+]

标签:modules   手动   项目   source   cap   三元   表达式   pack   fine   

安装vue

  • 安装前初始化package.json 主要用来描述自己的项目,记录安装过得文件有哪些,在当前文件夹下生产json
  • 安装vue
    • --save(-S)代表项目依赖
    • --save-dev(-D)代表开发依赖
    npm info vue
    npm install vue --save
    npm install //跑环境,将package中的依赖全部安装
  • 安装后默认会生产node_modules文件夹
    • 上传到git上node_modules是忽略掉的,拉下代码后,需要重新npm install安装依赖

Vue属性

  • el
    • 指定的元素不能是html和body
    • 使用querySelector
  • data
    • 可以使用vm来代理data属性,vm是Vue的实例
    • 在html中使用的属性必须先声明,不能新增不存在的属性,使用Object.defineProperty,vue不兼容IE8以及下包括IE8
  • {{}}
    • 这是v-text的缩写,直接再标签上使用v-text可以避免出现大括号闪烁
    • 括号内可以使用三元表达式
    • 最终的结果需要有返回值,可以赋值,运算
    • 等待数据加载好后,将内容插入到div中
  • v-model
    • 只能绑定定变量,先将对应的数据放到输入框的value值上
    • 会监听输入框的输入事件 oninput,将值放回到数据中
  • v-once
    • 在标签中使用,变量在内容中调取
    • 被这个属性包住的属性,就不会再发生变化,只绑定一次
  • v-html
    • 包住的内容会被解析成htlm结果
  • method
    • 定义函数的一个对象,放所有函数
    • 函数中的this为vm,必须使用普通函数,箭头函数存在this指向问题
  • v-on
    • 事件绑定函数传参会丢失event事件源,可以手动传递属性$event
    • v-on可以简写成@
    • 修饰符,可以连续嵌套
      • ".stop",可以阻止默认事件的冒泡
      • ".capture",捕获阶段
      • ".self",自己,只在自己身上触发
      • ".once",只触发一次
      • ".prevent",阻止默认行为
      • ".13",".enter",点击回车时触发
        • 可以使用键盘修饰符,支持keyCode和名称,只能用于@keyup和@keydown
  • v-for
    • 写在要循环的子标签中
    • 数组中a in xxx,那么a的值是数组里的value
    • 对象中f in xxx,那么f的值是对象里的value
    • (value,key) in xxx,可以取到属性值,属性名
    <ul>
        <li v-for="(val,pIndex) in fruits">{{val.name}}
            <ul>
                <li v-for="(c,index) in val.color"> {{pIndex+1}}.{{index+1}} {{c}}</li>
            </ul>
        </li>
    </ul>
  • v-if/v-else-if/v-else
    • 在标签中使用
    • 判断结果为true的时候才增加,false删除操作的是DOM,会影响性能
    <div v-if=""></div>
    <div v-else-if=""></div>
    <div v-else=""></div>
  • v-show
    • 同样在标签中使用
    • 但不操作DOM,只操作样式,判断结果为true时,display:block,false时,display:none
    <div v-show=""></div>
    <div v-show=""></div>
    <div v-show=""></div>
    • 与v-if的使用情景需要判断
      • v-if有阻断作用,当外面的条件不满足是,内部代码不在执行
      • 频发显示隐藏,则选择v-show
  • 如果想要将内容绑定在标签上,绑定的是动态属性,需要使用":",不能使用{{}}
    • style和class可以使用绑定对象,或者数组的方式
    • 其他的样式直接使用":"+样式名="属性名"
    • class和原生的不冲突,冒号会覆盖普通的class
    <div :style="[s1,s2]"></div>//data中的属性名,支持字符串和对象属性
    <div :style="s1"></div>//data中的属性名,支持字符串和对象属性
    <div :class="[‘color‘,‘background‘]"></div>//类名
    <div :class="{‘color‘:true,‘background:true‘}"></div>//类名

关于VUE的安装和一些简单属性

标签:modules   手动   项目   source   cap   三元   表达式   pack   fine   

原文地址:http://www.cnblogs.com/Scar007/p/7865519.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!