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   销毁后

 

 

   

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值