小白学前端----------------Vue基础(1)

一.VUE框架

Vue介绍

vue以数据驱动的web渐进式框架

三大主流框架:Angular React Vue

设计模式:MVVM

1.数据驱动=>不直接操作DOM
2.单页面web应用=>构建的网站其实只有一个页面
3.数据的双向绑定
4.虚拟DOM

文件后缀: .vue =>组件 =>Vue实例

组件化开发

1.vue与jquery区别

• jquery任然是操作DOM的思想,主要jQuery用来写页面特效
• Vue是前端框架(MVVM),对项目进行分层.主要用来处理数据

2.前端框架

• angular google
• react facebook
• vue 全世界

3.单页面应用

4.MVVM

• M 模型层 Model
• V 视图层 View
• VM 控制层 VIE-MODEL

二.Vue实例

2.1挂载元素

<!--挂载元素-->
<div id="app">
    <h1>{{title}}</h1>
    <hr>
    <input type="text" v-model="message">
    <hr>
    <p>{{message}}</p>

    <!--不建议这么做,视图层不需要有逻辑计算-->
    <p>{{reverseMessage}}</p> <!--不加括号就是一个function-->

</div>

<script src="../Vue/vue.js"></script>

<script>
    //创建实例
    let app  = new Vue({
        el:'#app',
        data:{
            title:'vue实例',
            message:'同志你辛苦了',
        },
        //方法
        methods:{

        },
        //计算属性,依赖于普通属性,例如reverseMessage对message的依赖
        computed: {
            //reverseMessage 是个属性,属性的值是function的返回值
        reverseMessage:function () {
            return this.message.split('').reverse().join('')
        }
        },
    });


    console.log(app);
    console.log(app.title);  //获取title的内容
    console.log(app.$el);    //获取原生dom
    console.log(app.$data.title); //获取title的内容
    // app.$watch('title',function () {
    //    alert('啊,你改变了我')
    // }); //监听属性变化,一旦有变化触发回调函数
    console.log('')

2.2数据 data

let app  = new Vue({
        el:'#app',
        data:{
            title:'vue实例',
            message:'同志你辛苦了',
        }
    })

2.3 方法 methods

let app  = new Vue({
        el:'#app',
        data:{
           ...
        },
        methods:{
            ...
        }
     })   

2.4 计算属性 computed

一个属性变化依赖多个属性变化

let app  = new Vue({
        el:'#app',
        data:{
           ...
        },
        methods:{
            ...
        },
         //计算属性,依赖于普通属性,例如reverseMessage对message的依赖
        computed: {
            //reverseMessage 是个属性,属性的值是function的返回值
        reverseMessage:function () {
            return this.message.split('').reverse().join('')
        }
     })   

2.5 监听器 watch

一个属性变化引起其他多个属性变化

let app  = new Vue({
        el:'#app',
        data:{
           ...
        },
        methods:{
            ...
        },
      
        computed: {
       
        },
        //监听器,监听属性的变化
        watch:{
          message: function () {
              console.log('改变')
          },
          title:function () {
              this.reverseTitle = this.title.split('').reverse().join('');
          },  
        }
     })   

监听属性与计算属性的区别

计算属性:适合一个属性受到多个属性的影响

监听属性:多个属性依赖一个属性

2.6 生命周期的钩子函数

beforeCreate
created			此时,vue实例的方法,属性都已经创建,可以再这里获取后端数据
beforeMount
mounted			此时,vue实例已经挂载到元素上,如需操作DOM,在这里使用原生JS操作
beforeUpdate
updated
activated
deactivated
beforeDestory
destoryed