VUE起步

day02(1)

1. Vue的MVVM

   1. 概念

      M-模型层，负责业务数据；

      V-视图层，即html、css；

      VM-viewmodel，v与m的桥梁，监听m或者v的修改。

      从M到V的Data Binding（数据绑定）；

      从 V 到 M 的DOM Listeners（DOM事件监听）。

   2. 补充

      v-bind是一个单向数据绑定，映射关系：Model**->**View，我们不需要进行额外的DOM操作，只需要进行Model的操作就可以实现视图的联动更新。

      v-model是一个双向数据绑定，映射关系：View接受的数据,传给model,model的数据再传给view。把Model绑定到View的同时也将View绑定到Model上，这样就既可以通过更新Model来实现View的自动更新，也可以通过更新View来实现Model数据的更新。所以，当我们用JavaScript代码更新Model时，View就会自动更新，反之，如果用户更新了View，Model的数据也自动被更新了。

2. vue文件的结构

   <template>
       <h1>welcome Vue</h1>
       <h2 @click="change">{{msg}}</h2>
       <my-menu></my-menu>　　<!-- 引用的其他组件，然后在html中运用 -->
   </template>
   <script>
       import Menu from './components/Menu.vue'　　//在此引入其他子组件
   
       export default{　　// 这个导出的模块和vue中的component的方式一模一样，这里面可以直接给数据data，定义方法methods等等
           data(){
               return {
                   msg:'welcome Vue ^_^'
               }
           },
           methods:{
               change(){
                   this.msg='wahaha'
               }
           },
           components:{
               'my-menu':Menu　　//引入其他子组件，在此定义赋值
           }    
       }
   </script>
   <style>
       body{
           background: #ccc
       }
   </style>
   复制代码

   其中注意：无需声明id，在main.js中已经声明过

总结为以下：

1) 模板页面 
<template> 页面模板 </template> 
2) JS 模块对象 
<script> 
	export default{
    	data() {return {}}, 
    	methods: {}, 
    	computed: {}, 
    	components: {} 
    } 
 </script> 
 3) 样式 <style></style>
复制代码

和html文件不同，其中的data要调用return：

答：不使用return包裹的数据会在项目的全局可见，会造成变量污染；使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。将data封装成一个函数data()，调用函数生成的副本，也是为了防止数据污染。

3. 动态数据实现

   1. 表达式 {{}}

      //页面中调用

      {{message}}

      //data中调用

      return{

      ​ message:’hello world’

      }

   2. v-bind、v-model

      1. v-bind：绑定

         <a v-bind:href="https://juejin.cn/post/url">点击跳转</a>
         <img v-bind:src="https://juejin.cn/post/img">
         复制代码

      2. v-model：input会用到

      
      

   
   

   
   

  是methods！！！      
复制代码

  一般情况下，**我们只是使用了computer中的gettter属性，默认只有 getter**
复制代码