vue框架入门

最新推荐文章于 2024-06-28 19:52:17 发布

冯文超

最新推荐文章于 2024-06-28 19:52:17 发布

阅读量154

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/our_h5/article/details/112667907

版权

本文介绍了前端框架Vue的基础知识，包括它的定义、特点和主要组件。Vue是一个轻量级、数据驱动的渐进式框架，提供便捷的数据绑定和组件化功能。通过实例化Vue，可以实现数据与视图的同步。文章详细讲解了Vue的el、data和methods选项，展示了如何创建Vue实例并绑定数据、触发事件。此外，还回顾了MVVM架构模式，强调Vue在协调模型和视图中的作用。

摘要由CSDN通过智能技术生成

如果你现在完成了基础课的学习，现在就可以进入vue课程了

1 预备知识

1 框架是什么

一个半成品，业界精英们已以经对基础代码进行封装，并提供了api给程序调用，从而提高了程序的开发效率

2 vue是什么

 前端有三大框架 ： vue  react angular 	 
vue是一个构建数据驱动的web界面的渐进式框架，采用了自底向上的增量开发的设计。vue的目标是通过尽可能简单的api实现响应的数据绑定和组合的视图组件

数据驱动=》不操作或少操作dom，通过操作数据，由数据发生变化来引起页面的更新
渐进式=》学点用点，学到不同的程序有不同程序的实现方式

3 vue的全家桶 vue生态技术栈

vue2.x 整体框架 vue框架核心
vue-cli 脚手架快速地帮助我们创建项目目录
vue-router 路由组件文件与路径的映射关系
vuex 状态机数据仓库，管理数据实现数据共享
element-ui 界面框架，对html标签元素封装的组件
axios ajax的封装
qs ajax进行post请求时，对参数进行处理的插件

4 vue的特征

1>轻量级，加载快
2>数据绑定方便采用双向数据绑定
3>指令系统 v-开头
4>插件化 vue-router vuex element-ui axios qs
5>组件化便于维护，可扩展首头组件页脚组件轮播组件分页上传

5 vue的体验
分三个步骤
一是引入vue
二是准备dom容器
三是创建vue实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1 引入vue.js -->
    <script src="vue/vue.js"></script>
</head>
<body>
    <!-- 2 准备dom容器 -->
    <div id="app">
        <h1>{{msg}}</h1>
    </div>
</body>
<script>
    // 3 准备数据，实例化

   let model = {msg:"hello  vue"}
   new Vue({
       el:"#app",
       data:model
   })
</script>
</html>

2.vue的选项

1 el选项

1》主要用于挂载dom，最终实现实例渲染进入这个dom容器
2》可以通过id ，类名或或选择器挂载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1 引入vue.js -->
    <script src="vue/vue.js"></script>
</head>
<body>
    <!-- 2 准备dom容器 -->
    <!-- <div id="app">
        <h1>{{msg}}</h1>
    </div> -->
    <div class="app">
        <h1>{{msg}}</h1>
    </div>
</body>
<script>
    // 3 准备数据，实例化

   let model = {msg:"vue-el选项4"}
   new Vue({
    //    el:"#app",
    //    el:".app",
        // el:document.getElementById("app"),
        el:document.getElementsByClassName("app")[0],
       data:model
   })
</script>
</html>

2 data选项

1》data选择是一个对象，主要用于准备数据
2》data中数据改变，页面就会更新渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1 引入vue.js -->
    <script src="vue/vue.js"></script>
</head>
<body>
    <!-- 2 准备dom容器 -->
    <div id="app">
        <!-- 普通变量  -->
        <!-- {{userName}} -->
        <!-- 对象 -->
        <!-- {{student.name}}={{student.age}} = {{student.sex}} -->
        <!-- 数组 -->
        {{hobby[0]}}={{hobby[1]}}={{hobby[2]}}={{hobby[3]}}
    </div>
</body>
<script>
    // 3 准备数据，实例化

   let model = {
    //    userName:"zhangsan"
    // student:{name:'zhangsan',age:20,sex:'男'}
    hobby:['html','css','javascript','vue']
   }
   let vm = new Vue({
       el:"#app",
       data:model
   })
</script>
</html>

3 methods选项

将函数定义在里面，事件函数也是定义在里面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1 引入vue.js -->
    <script src="vue/vue.js"></script>
</head>
<body>
    <!-- 2 准备dom容器 -->
    <div id="app">
        <button @click="test">测试methods</button>
        {{test()}}
    </div>
</body>
<script>
    // 3 准备数据，实例化

   let model = {
       studentName:"lisi"
   }
  let vm =  new Vue({
       el:"#app",
       data:model,
       methods:{
           sayHello(){
               console.log(this.studentName)
           },
           test(){
               console.log("这是事件处理函数")
           }
       }
   })
//    vm.sayHello();
</script>
</html>

注意：
1》methods里面的函数，this指向的是当前的 vue实例，因为是vue实例对象在调用
2》如果dom窗口里面调用方法，直接调用，不用写this，因为整个实例挂载渲染就在这个容器里面

4 构架回顾

4.1 mvc model-view-controller 模型-视图-控制器
m model 准备数据
v view 显示视频 html模板
c controller 控件器协调m和v

4.2 mvvm model-view-viewmodel 模型-视图-视图模型
m model 准备数据
v view 视图 html模板
vm 协调m和v, 实现了双向的绑定机制