Vue 学习笔记

安装

• 地址：https://nodejs.org/zh-cn/download/
• 控制台 输入 node -v查看版本信息
• 更换npm仓库地址：
  安装切换镜像的工具 npm install nrm -g
  然后通过nrm ls命令查看npm的仓库列表,带*的就是当前选中的镜像仓库。
  nrm test 镜像名 测试连接 ，nrm use tao使用淘宝的镜像。

入门案例

• 安装vue
  在项目Terminal中输入vue-demo 进入当前model
  npm init -y 初始化npm
  npm install vue --save 安装vue ， save表示在当前项目安装
• 创建html，引入js <script src="node_modules/vue/dist/vue.js"></script>
  
  view 与model 的关联
  
  
  click方法
  其他自定义方法
  

生命周期

每一个红色的框都是一个方法。可以自己定义，比如：

指令

• 差值表达式，插值闪烁
  
  可用指令代替
  
• v-model 双向绑定，例如：对复选框操作
  
  事件修饰符
• @click = v-on
• 事件冒泡、事件委托 阻止事件冒泡：@click.stop。阻止默认事件发生（比如a标签的跳转）：@click.prevent
  
  循环
• 遍历数组
  
  
  
  
  key
  当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
  这个功能可以有效的提高渲染的效率。
  但是要实现这个功能，你需要给Vue一些提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。
  示例：

<ul>
    <li v-for="(item,index) in items" :key=index></li>
</ul>

v-if v-for

• v-if=“布尔表达式”，表达式为true的时候才显示
  
• v-show,与if类似，只不过v-if在页面中没有dom的源码，而show则是通过display：none来实现的。使用if 的改变会刷新页面，效率更低。一般在页面加载时的一次性的时候使用。
• v-bind，将原有属性与vue进行绑定，如class
  计算属性
  用于计算日期
  监控
  浅监控，无法监控到对象中值的变化，如pserson中的age
  
  深监控
  

组件化

组件之间的通信
父向子传递

子向父传递

解决方式：通过调用父类方法修改

WebPack