初识Vue

Vue是一个渐进式的javascript框架

渐进式 【 越学越难 】
Vue的作者是 尤雨溪
Vue是一个个人项目 【 React是facebook的团队项目 】
Vue是一个MVVM框架 【 MVVM是MVC的衍生架构 】
扩展： 司徒正美 avonlon.js 也是MVVM框架，也是个人项目
Vue是一个单项数据流的框架
Vue版本发布的时间

Vue 1.x 2014
Vue 2.x 2016 【 es6 vue 微信小程序 angular2.0 … 】
MVC

MVC是一个软件架构思维，它将一个软件分为三个部分
M Model 数据
V View 视图
C Controller 控制器
MVC衍生
mvc backbone 【 前端框架 】
mvp
mvvm Vue Angular.ts 【 Angular2.0】
ember
MVVM

M Model 数据
V View 视图
VM ViewModel 视图模型
V的变化会反应到VM上，反之同理，也就是vm的改变也会影响V
不刷新页面改变内容（二阶段中是ajax实现）

{{ this.msg }}

{{ this._data.msg }}

{{ this.$data.msg }}

{{ msg }}

*/
console.log( Vue )
// var vm = new Vue( options )

var vm = new Vue({ // vm 就是 VM 视图模型
el: ‘#app’, // V
data: { // M
msg: ‘Hello Vue.js’
}
})

console.log( vm )

console.log( vm.msg )

Vue源代码

行数： 11945 开发环境
Vue的源代码是通过匿名函数【 自调用函数 】来进行封装
匿名函数好处
解决了命名冲突
规定了一个独立的作用域
安全性高
xss 攻击脚本
CRSF 攻击脚本
格式
/*
第一个括号表示定义一个匿名函数
第二个括号表示调用这个函数

  参数： 第一个括号中的参数为 形式参数
        第二个括号中的参数为 实际参数

  this - 指的就是window对象
  factory - 工厂函数   返回值就是Vue构造函数
  el不能是body

  Vue是通过面向对象原型继承 + 工厂函数进行底层代码封装的 
 */
(function ( global,factory) {

})( this,function () {})

vue的源码
可以用ES5,ES6模块引入
可以用amd模块引入
可以用script标签引入，将vue构造函数挂载在window对象
Vue学习思路

Vue有指令和组件系统两个大功能
通过js想操作DOM - > Vue也想操作DOM
问题： Vue中不建议像二阶段一样直接去操作DOM
解决： 方案： 指令
指令–14个

使用形式：
绑定在dom的属性身上
为了区别自定义属性，vue提供的指令都携带 v-
数据展示
v-html 非转义输出 ， 可以解析 xml类型数据
v-text
条件渲染
对象是无序的，所以没有索引，但是vue中循环可以获取对象的索引
v-if
v-else-if
v-else
条件展示
v-show
v-if vs v-show
v-if是真正的控制dom的存在与否，v-show 是控制dom的display:none属性
如果初始条件都为false,v-if会惰性渲染【 不渲染 】，但是v-show不管条件是什么都会渲染，所以v-show的初始渲染开销较高
如果我们要频繁的切换flag,那么我们使用谁? 我们使用 v-show ， 反之，使用v-if

数据展示

{{ msg }}

---

条件渲染

条件渲染 - 单路分支

条件 - 单路分支

    <h4> 条件渲染 - 双路分支 </h4>
    <p v-if = "flag1"> 条件 - 双路 - 1 </p>
    <p v-else> 条件 - 双路 - 2 </p>

    <h4> 条件渲染 - 多路分支 </h4>
    <p v-if = " type === 'A'"> 条件 - A </p>
    <p v-else-if = "type === 'B'"> 条件 - B </p>
    <p v-else> 条件 - C </p>
  <hr>
  <h3> 条件展示 </h3>
    <p v-show = "flag2"> 条件 - 展示 </p>

  <hr>

  <h3> 列表渲染 </h3>
  <h4> 数组 </h4>
    <ul>
      <li v-for = " (item,index) in lists">
        {{ item }} -- {{ index }}
      </li>
    </ul>
  <h4> 对象 </h4>
    <ul>
      <li v-for = " (value,key,index) in obj ">
        {{ value }} --- {{ key }} --- {{ index }}
      </li>
    </ul>

  <h4> json  </h4>
    <ul>
      <li v-for = "(item,index) in json">
        <p> 商品名称： {{ item.shopName }} -- {{ index }} -- {{ item.id }} </p>
      </li>
    </ul>

  <h4> 列表渲染特殊数据 </h4>
    <ul>
      <li v-for = "item in 10">
        {{ item }}
      </li>
    </ul>

    <h4> 列表渲染嵌套 </h4>

    <ul>
      <li v-for = "item in banners">
        <p> {{ item.name }} </p>
        <ul>
          <li v-for = "val in item.child">
            {{ val.name }}
          </li>
        </ul>
      </li>
    </ul>
</div>