VUE起步

day02(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的数据也自动被更新了。

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()，调用函数生成的副本，也是为了防止数据污染。

动态数据实现
1. 表达式 {{}}
  
  //页面中调用
  
  {{message}}
  
  //data中调用
  
  return{
  
  message:'hello world'
  
  }
2. v-bind、v-model
  1. v-bind：绑定
```
<a v-bind:href="url">点击跳转</a>
<img v-bind:src="img">
```

3. v-on

  是methods！！！

计算属性与监视
1. computed

computed的 getter/setter 实现对属性数据的显示和监视

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

3. 监听属性watch

  使用 `watch` 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

VUE起步day02

VUE起步

day02(1)