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

安装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>//类名