认识vue

最新推荐文章于 2022-11-21 16:19:23 发布

玲玲酱

最新推荐文章于 2022-11-21 16:19:23 发布

阅读量157

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_45758587/article/details/109726850

版权

vue 专栏收录该内容

5 篇文章

订阅专栏

本文深入探讨Vue.js，一种轻量级的渐进式框架，对比了它与传统JS的DOM操作区别。介绍了Vue的MVVM模式，展示了Vue的生命周期，从beforeCreate到destroyed的各个阶段。同时，通过代码示例说明了如何在不同生命周期阶段操作数据和视图。此外，还讲解了Vue中的插值表达式和指令，如v-bind和v-on的使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue是一套用于构建用户界面的渐进式（轻量级）框架，可以构建出复杂的单页面应用程序，vue与原生js显著的区别就是不再对dom进行直接的操作，而是通过数据操作来改变视图,只关系底层逻辑，尽量减少dom操作。

1）mvc:适用于dom驱动

m:业务模型 model 事件

v:用户模型 view HTML

c:控制器 control JS

html-->model-->js

js-->model-->html

2）mvvm:是mvc的改良版,适用于

m : model js

v :view html

vm :viewModel v+m

html<-->vm<-->js

安装

与其他框架类似，在使用之前要先进行依赖的安装。

1）cdn 在cdn加速服务器中获取vue的库直接进行导入即可，这种方式更加便捷

2）npm 模块化安装，这种方式一般需要在node环境下进行开发，然后编译打包后才能应用到浏览器中 > npm install vue

3）vue-cli Vue脚手架，可用于快速搭建大型单页面应用，用于企业级开发。

生命周期

在一个项目中可以有多个模板，每个模板可以有自己的实例

//引入vue环境
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<div id=“app”>
     <div v-on:click=”foo">{{title}}</div>//模板渲染
</div>
<script>
  let vm = new Vue({		实例化vue对象，vm为实例，Vue为构造函数
	el:"#app",		指定模板
	data:{     保存数据，在根组件中是对象，如果是子组件是函数
	    title:"this is a vue"
	}
	methods:{
	    foo(){alert(this.title);}  方法，如果想要更新data数据，使用this.
	}
  });
</script>

首先要了解vue的生命周期：

https://i-blog.csdnimg.cn/blog_migrate/a3b6ff9704758a290a3f9432bb5c6483.webp?x-image-process=image/format,png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入链接 引入环境 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
    <!-- 引入线图 -->
    <script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
</head>
<body>
    <!-- 模板 -->
    <div id="app">
        <div id="one" v-on:click='changText' style="width: 400px;height: 400px;background-color: red;"></div>
        {{msg}}
    </div>
    <script>
        new Vue({
            el:'#app',//指定模板
            data:{
                msg:'hello'
            },
            //初始化之前 data,methods中数据还不能被使用
            beforeCreate(){
               console.log('beforeCreate----')
            },
            //数据初始化完成 data,methods中数据已经初始化完成可以进行访问使用
            //但是没有进行挂载
            created(){
            //    console.log(this.msg)
            // this.test()
            console.log('created')
            // console.log(document.getElementById('one'))
            // this.loadChart()//没有挂载 加载不出来图表效果
            },
            //挂载之前 判断当前的实例所绑定的模板是哪一个 但是仍然没有挂载
            beforeMount(){
                console.log('beforeMount')
            },
            //挂载完成
            mounted(){
                this.loadChart()
                console.log('mounted')
            },
            //更新之前
            beforeUpdate(){
                console.log(this.msg)
                console.log('beforeUpdate')
            },
            //更新完成
            update(){
                console.log('update')
                console.log(this.msg)
            },
            //组件销毁之前
            beforeDestroy(){
                console.log('beforeDestroy')
            },
            //销毁完成
            destroyed(){
                console.log('destroyed')
            },
            methods:{
                changText(){
                   if(this.msg=='hello'){
                       this.msg='你好'
                   }else if(this.msg=='你好'){
                       this.msg='hello'
                   }
                },
                test(){
                    console.log('test')
                },
                //加载图表
                loadChart(){
                // 图表配置
         var options = {
            chart: {
                type: 'bar'        //指定图表的类型，默认是折线图（line）
            },
            title: {
                text: '我的第一个图表'                 // 标题
            },
            xAxis: {
                categories: ['苹果', '香蕉', '橙子']   // x 轴分类
            },
            yAxis: {
                title: {
                    text: '吃水果个数'                // y 轴标题
                }
            },
            series: [{                              // 数据列
                name: '小明',                        // 数据列名
                data: [1, 0, 4]                     // 数据
            }, {
                name: '小红',
                data: [5, 7, 3]
            }]
        };
        // 图表初始化函数
        var chart = Highcharts.chart('one', options);
                }
            }
        })
    </script>
</body>
</html>

在上面的代码中：

beforeCreate 在初始化之前，只是声明了data中的属性和method中的方法，还不能访问，这时候打印属性undefined，方法未定义。

created 初始化完毕，完成了vue的数据注入及数据监听操作，该构造的执行意味着vue实例创建完毕，可以进行数据的访问操作，但是没有完成挂载，代码中插入了一个线图框架代码，这时候调用this.loadChart()，只会显示外框架，dom节点没有挂载，加载不出图表效果。

beforeMount 在created之后，vue会判断实例中是否含有el属性，如果没有会调用vm.$mount(el) ,接着会判断是否含有template属性，如果有将其解析为一个render function ，如果没有会将el指定的外部html进行解析。这里只是完成了模板的解析但是数据并没有绑定到模板中，并没有实现挂载。

mounted 创建vm.$el替换el，实际上这里完成的是数据绑定操作，在期间执行了render函数，将模板进行了解析，将数据进行了动态绑定，也就是实现了挂载。这时候调用this.loadChart()，dom节点实现了挂载，图表效果加载出来了。

截止到现在，vue已经将页面显示了出来。随着用户的操作会引起数据改变进而导致页面刷新

beforeUpdate 更新虚拟dom节点。

updated 完成了页面的重新渲染

beforeDestroy 销毁之前调用，此时还是可以访问vue实例的

destroyed 完成了监听器，子组件，事件监听等移除，销毁vue实例对象

插值

<body>
    <div id="app">
        <p>{{name+"hello"}}-{{age+20}}</p>
        <p v-html='str'>hello</p>
        <p v-bind:id="id" v-bind:title="title"></p>
        <p :id="id"></p>  //简写
        <p v-on:click="handler">click</p>
        <p @click='handler'>click----</p>  //简写
    </div>
</body>

Vue中有新的定义方式：带有 v- 前缀的被称为指令，以表示它们是 Vue 提供的特殊 attribute，它们会在渲染的 DOM 上应用特殊的响应式行为。

文本 {{}}	<span>Message: {{ msg }}</span>
v-text	<span v-text='msg'></span>	单纯的去识别渲染文本
v-html	<div v-html='msg'></div>	会解析html标签，然后再渲染文本
v-bind:属性名	<div v-bind:id="dynamicId"></div>	用于绑定数据和元素属性
事件 v-on	<a v-on:click="doSomething">...</a>	添加一个事件监听器，通过它调用在 Vue 实例中定义的方法