vue基础教程01_qvvue-优快云博客

本文链接：https://blog.youkuaiyun.com/panpanpanqvq/article/details/111355500

1.Vue.js 是什么

Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！
Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。(Vue有配套的第三方类库，可以整合起来做大型项目的开发)
前端的主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果的MVVM框架；

2.起步
vue中可以使用插值表达式,可以定义组件，组件是HTML元素的扩展，可自定义其数据与行为。例如通过一个bind操作将JS中的内容绑定在div标签内部

<body>
    <div id="app">{{content}}</div>
</body>
</html>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            content:'hellow world'
        }
    })
    console.log(app)
    setTimeout(function () {
        app.$data.content = 'im back';
    },2000)
</script>

在这里插入图片描述
这样，然后两秒后变成im back
这里app. $data.content = 'im back';是你当前app下的data里的content ,就是 data:{content:'hellow world' } 也可以用this.app.$ data.content = ‘im back’,这里的this指向的是winod

用原生的写法来试试

<body>
    <div id="app">{{content}}</div>
</body>
</html>
<script>
    var dom = document.getElementById('app');
    dom.innerHTML = 'hello world';
    setTimeout(function (){
        dom.innerHTML = 'im back';
    },2000)
</script>

效果是一样的

3，vue计算属性，方法，监听器

<body>
    <div id="app" style="font-size: 36px;">
            {{fullNmae}}
            {{age}}
    </div>
</body>
</html>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            fistName:'pan',
            lastName:'pan',
            //fullNmae:'pan pan ',
            age:23
        },
        //计算属性,初始化页面会计算一次，计算属性有缓存机制只会计算this.fistName + " " + this.lastName，当age修改不会触发
        computed:{
            fullNmae:function(){
                console.log('计算了一次')
              return  this.fistName + " " + this.lastName //姓+名，修改一次会出发一次计算属性
            }
        }

        //方法，当age修改会重新渲染，会触发计算一次，他的插值表达式是{{fullNmae()}}
        //  methods:{
        //     fullNmae:function(){
        //         console.log('计算了一次')
        //       return  this.fistName + " " + this.lastName //姓+名，修改一次会出发一次计算属性
        //     }
        // }

        //监听器,初始化页面不会触发，当fistName或者lastName被修改时会触发计算，也有缓存机制不会触发age
        // watch:{
        //     fistName:function(){
        //         console.log('计算了一次')
        //         this.fullNmae = this.fistName + " " + this.lastName
        //     },
        //     lastName:function(){
        //         console.log('计算了一次')
        //         this.fullNmae = this.fistName + " " + this.lastName
        //     }
        // }


    })
</script>

在这里插入图片描述
这里放了vue的computed计算属性，大家可以吧方法和watch监听器都试一下。

4.模板语法

<body>
    <div id="app">
        {{name + ' 你哦'}}
        <div v-text="name + ' 你哦'"></div>
        <div v-html="item"></div>
    </div>
</body>
</html>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            name:'淦!',
            item:'<h1>淦！</h1>'
        }
    })
</script>

在这里插入图片描述
5.vue生命周期
vue有八个生命周期，分别是beforeCreate实列创建前，created实例创建完成，beforeMount挂载前，mounted挂载完成，beforeUpdate更新前，updated更新完成，beforeDestroy实列销毁前，destroyed实列销毁。

<body>
    <div id="app"></div>
</body>
</html>
<script>

    var vm = new Vue({
        el:'#app',
        template:'<div>{{test}}</div>',
        data:{
            test:'hello world'
        },
        beforeCreate:function(){
            console.log("%c%s","color:red","实列创建前")
        },
        created:function(){
            console.log("实例创建完成")
        },
        beforeMount:function(){
            console.log("%c%s","color:red","挂载前")
            console.log(this.$el)
        },
        mounted:function(){
            console.log("挂载完成")
            console.log(this.$el)
        },
        beforeUpdate:function(){
            console.log("%c%s","color:red","更新前")
        },
        updated:function(){
            console.log("更新完成")
        },
        beforeDestroy:function(){
            console.log("%c%s","color:red",'实列销毁前')
        },
        destroyed:function(){
            console.log('实列销毁')
        }
    })
</script>

在这里插入图片描述
可以看到打印到了挂载完成的钩子函数，然后

在这里插入图片描述
可以看到再改变test里的值后，执行了更新前和更新完成的这个两个钩子函数
当执行 beforeDestroy 的时候，实例身上所有的 data 和所有的 methdos ，以过滤器、指令…
都处于可用状态，此时，还没有真正执行销毁的过程
当执行 destroyed 函数的时候，组件已经被完全销毁了，此时，组件中所有的数据，方法，指令，
过滤器… 都已经不可用了