vue总结

1.windows下搭建vue开发环境

    1）安装node8    node  -v    npm -v   测试是否安装成功

     2）安装vue-cli@2.9.6      npm  install vue-cli@2.9.6 --global     vue --version   测试vue是否安装成功

   npm install -g cnpm --registry=https://registry.npm.taobao.org       npm不能用时，还可以安装cnpm

    至此环境搭建成功，创建vue项目

     1）初始化项目     vue  init  webpack  app01

      2）安装依赖      cd  app01     npm   install

       3）测试    npm  run   dev    

                          1.代码转换以及打包   2.启动静态服务器webpack-server     3.部署，将打包的代码部署到webpack-server上

       4)进行访问     localhost:8080

2.vue文件

    (.vue无法在浏览器上直接执行，vue-loader的作用就是将.vue转换为.html,.css,.js，然后通过webpack打包再在浏览器上运行)

    每个.vue文件都是一个vue组件（模块）vue文件组成

     1.模板  （html）  <template>  有且只有一个根标签div</template>

     2.js使用模块化编程，为了使别的模块可以调用，要通过export导出Vue构造函数参数，用于 new Vue()

    3.css

3.vue的原理

    js引用了mvvm思想的轻量级框架，与angularJS,React并称为前端三大框架，数据驱动。vue机制，数据渲染(能自动将值部署到页面)

  mvvm   ：m  model数据模型     v  view 视图  html  template     vm    viewmodel

Mvc,Mvp以及mvvp都是最常见的软件架构。

MVC分为视图层，控制器，模型：view传送指令到controller，Controller 完成业务逻辑后，要求 Model 改变状态，Model 将新的数据发送到 View，用户得到反馈

mvp模式将 Controller 改名为Presenter，同时改变了通信方向，各部分的通信都是双向的，View 与 Model 不发生联系，都通过 Presenter 传递。View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。

MVVM模式将 Presenter 改名为 ViewModel，基本上与 MVP 模式完全一致。

唯一的区别是，它采用双向绑定：View的变动，自动反映在 ViewModel

4.vue数据的简单绑定

   1）使用{{}}直接在模板中输入值

data(){
            return {
                msg:'',
                arr:[{
                    name:'terry'
                },{
                    name:'larry'
                }],
                user:{}
            }
        }

        <h2>{{msg}}</h2>

    2) 循环渲染
        <ul>
            <li v-for="a in arr">
                {{a.name}}
            </li>
        </ul>
    3) 双向数据绑定
        一般用于表单
        <input type="text" v-model="name">
    4) 条件渲染

 

    1) 简单绑定
        {{msg}}

    2) 表达式绑定
        data:{
            user:{
                name:'terry',
                age:12,
                gender:'male'
            }
        }
        性别：{{ user.gender=='male'?'男':'女' }}
        年龄：{{ user.age+1 }}
    3) html绑定
        data:{
            a:"<h2>hello</h2>"
        }
        <div v-html='a'></div>
        =>
        a中h2标签才会被浏览器解析
    4) 属性绑定
        data:{
            b:'this is b'
        }
        <div v-bind:title='b'>one</div>
    5) 事件绑定
        methods:{
            foo(){

            }
        }
        <div v-on:click='foo'>one</div>

    6) 指令简写
        v-bind:title
        =>
        :title

        v-on:click
        =>
        @click

5.vue实例的生命周期

     

new Vue({
            data:{
                msg:'hello',
                users:[]
            },
            create(){
                this.users = data;
            }
            methods:{
                foo(){

                }
            }
        })
        <h2>{{msg}}</h2>

     1.  vue实例对象创建 （model）
        beforeCreate（创建前）
            Vue实例对象没有完全创建，还不能访问data,methods
        created（创建后）
            Vue实例对象完全创建，可以直接访问data,methos

     2. 初次挂载 (view)
        beforeMount       模块加载完成    （载入前）
        mounted    数据才得到渲染   （载入后）
   3. 数据监听
        当data中值发生改变，模块会跟着改变（只有在发生改变的时候才会触发）
        beforeUpdate   更新前
        updated          更新后

  4. 销毁
        beforeDestroy   销毁前
        destroyed   销毁后