Vue学习笔记-基础篇

Vue的重点：

组件通信，状态管理，复用，事件管理

• 减少不必要的DOM操作，提高渲染效率，双向绑定概念，只需要关心数据的业务逻辑。
• Vue实例中的都是配置对象
• Vue获取一个div之后，div中所有数据直接用{{ }} (插值符号)就可绑定，Vue实例控制的元素区域
  new出来的是Vue实例，也就是MVVM中的vm调度者，配置对象就是M，div视图就是V

Vue的基本属性的用法

• v-cloak：
  [v-cloak]{//属性可以这样选出来
  display:none;//可解决插值闪烁的问题，因为浏览器加载Vuejs文件需要时间
  }

• v-text:
  <h1 v-text="msg"> 原来 </h1> msg中的内容会直接替换掉原来的内容

• v-html:直接插入html标签进行解析
  自带的v-开头属性直接用，要用html原生属性时需要绑定
  在属性中不能用{{}}

• v-bind:，绑定属性，将属性值当成js表达式来解析，不能是语句

• v-on:绑定事件

• v-on:click =" "//这里面的值是一个变量，不能有原生js代码alert()之类

在vm实例中，使用this调用data中数据，this指向vm对象
function会改变作用域，可用es6函数语法代替，则不会改变
function (){}
//() => {}

事件修饰符

事件修饰符可以多个串联

• .stop 阻止冒泡
• .prevent 阻止默认行为
• .capture 变成捕获机制，即子元素会被父元素影响
• .self 只执行自己
• .once 只执行一次
  使用： @click.stop

事件冒泡：

父元素被子元素影响
v-model 双向数据绑定
只用于表单元素，通过用户输入的内容更改变量值
在Vue中使用class
1.class="[‘thin’,‘red’]"
2.[’’,flag?‘active’:’’]
3.[’’,{‘active’:flag}]
4.{thin:true, ‘font-weight’: }//属性有‘-’的必须用’'括起来

• v-for

    <p v-for = "item in list" :key="必需，保持数据统一性">{{item}}</p>
    <p v-for = "(item ,index)in list" :key="必需，保持数据统一性">{{item}}{{index}}</p>
  

item in 10,从1输出到10

可以循环：数组，对象数组，对象(val值 ,key键,index)
v-if，每次改变会重新删除或创建元素，切换性能消耗，涉及到频繁切换时不适用
v-show切换display，初始渲染消耗