VUE基础篇

喜欢请关注 会不定时更新 ***

学习前VS使用的插件

插件1.jpg

MVC和MVVM的区别

MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

• VM层 实现了双向数据绑定的思想

一张图说明上述问题

MVC和MVVM.png

• 在VUE当中的对应关系

  
  对应关系.png

v-cloak 解决闪烁问题

• v-cloak 实现的原理，是 vm 创建好之后，动态 移除 v-cloak 属性，从而 显示 插值表达式的节点
• 应用场景：当网络比较卡的时候，我们可以为 最外层的 元素，添加 v-cloak ，防止用户看到 插值表达式

 <style>
    [v-cloak] {
      display: none;
    }
  </style>
<!-- v-cloak 实现的原理，是 vm 创建好之后
动态 移除 v-cloak 属性，从而 显示 插值表达式的节点 -->
  <div id="app" v-cloak>
    <h3>{{msg}}</h3>
    <h3>{{1+1}}</h3>
    <h3>{{boo ? '条件为真' : '条件为假' }}</h3>
    <h3>{{msg.length}}</h3>
    <!-- 注意：插值表达式，只能用在内容区域，不能用在属性节点中； -->
    <h3>{{arr[1]}}</h3>
  </div>
  <script src="./lib/vue-2.5.16.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello vue.js',
        boo: false,
        arr: [1, 2, 3]
      }
    })
  </script>

component 组件 实际就是自定义标签

<div id='app'>
    <my-com></my-com>
    <my-com1></my-com1>
</div>
<template id='myCom'>
        <div>
            <div v-text='msg'></div>
            <input type="button" :value="num" @click="plus"></input>
        </div>
</template>
<script>
  //全局组件
    Vue.component('my-com',{
              // 如果这里结构太麻烦  要有一个根元素 VUE支持template 见上面
        template:'<div>my first component</div>',
        data:function(){ // 注意这里是函数
            return {
               num:0   //注意这里是一个对象
            }
        },
        methods:{
          plus:function(){
            this.num++;
          }
        }
    })

  //局部组件
 var Com1 = {
   template:'<div style=“color:red;'>test</div>'
 }
  new Vue({
    el:"#app",
    components:{
      'my-com1':Com1
    }
  })
</script>

父子组件传值 - props & $emit

父组件向子组件传递数据：在子组件中使用props，值是数组

     <child-com msg='hellogirl'></child-com> // 这里也属于父组件
     <child-com :msg='gmsg'></child-com> //动态父组件
 </div>
<script>
  Vue.components('child-com',{
    props:['msg'],   // 通过props进行传值 ，记得加S哦
    template:'<div>{{msg}}</div>',
  })
  new Vue({
    "el":'#app',
     data:{
       gmsg:'父组件内容'
     }
  })
</script>

子组件向父组件传递数据 -- 通过$emit基于自定义事件 - 回忆JQ的trigger()事件

<div id='app'>
        <div>{{total}}</div>
        <child-com v-on:add='handle'></child-com>
        <child-com v-on:add='handle'></child-com>
 </div>
    <script>
        Vue.component('child-com',{
            template:'<input type="button" :value="num" @click="add"></input>',
            data:function(){
                return {
                    num:0
                }
            },
            methods:{
                add:function(){
                    this.num++;
                    //通知父组件发生变化
                    this.$emit('add'); //相当于jq中的trigger()方法
                }
            }
        })
        new Vue({
            'el':"#app",
            data:{
                total:0
            },
            methods:{
                handle:function(){
                    this.total++;
                }
            }
        })
    </script>

在页面中使用render函数渲染组件

<div id='app'></div>
<script>
    var login = {
            template: "<h1>这是一个登录组件</h1>"
       }
     var vm = new Vue({
           el:"#app",
           render:function(creatElements){
                //creatElements这是一个方法
                //调用它可以把指定的模板组件，渲染成HTML结构
                return creatElements(login)
                //这里return的结果，会替换页面中指定的el指定的容器
            }
      })
</script>