vue3 vue.js的快速入门使用

vue.js库的下载

vue.js是目前前端web开发最流行的工具库/框架，由尤雨溪在2014年2月发布的。

另外几个常见的工具库：react.js、vue.js、angular.js、jQuery

官方网站：https://cn.vuejs.org/

官方文档：https://v3.cn.vuejs.org/guide/introduction.html

vuejs目前有1.x、2.x和3.x 版本，我们学习3.x版本的。

jQuery和vue的定位是不一样的。

jQuery的定位是获取元素和完成特效。
vuejs的定位是方便操作和控制数据和完成特效。

vuejs的使用

vuejs的使用官方提供了2种方式：

基于脚本导入使用，下载vue.js文件或者网上别人保存在CDN服务器的vue.js文件，通过script标签引入到html网页。
基于项目构建工具来进行使用，需要安装项目构建工具，自动构建成一个独立的项目。

目前官方推荐的项目构建工具：npm、vue-cli、vite。

我们先通过vuejs的第1种方式来完成vue语法和基础内容的学习。这种方式的使用，vue的引入类似于jQuery，开发中可以使用开发版本vue-x.x.x.js，产品上线要换成vue.min.js。

github： https://github.com/vuejs/vue-next/tags

下载地址：https://v3.cn.vuejs.org/guide/introduction.html

https://cdn.jsdelivr.net/npm/vue@next/dist/

1.基于下载vue到本地并使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="../js/vue.global.prod.3.2.20.js"></script>
<body>
    <div id="app">
        {{message}}
    </div>
    <script>
        // Vue.createApp可以创建一个vue的实例对象，通过这个实例对象，我们可以操作指定HTML的内容、数据、结构、特效等等
        vm = Vue.createApp({
            data(){
                return {
                    message: "message变量的值"
                }
            }
        }).mount("#app");
    </script>

</body>
</html>

2.vue基本代码结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <!-- 1. 引入vue.js文件 -->
    <script src="../js/vue.global.prod.3.2.20.js"></script>
</head>
<body>
    {{message}} <!-- vue的模板标签，也叫指令，专门可以输出data里面的变量 -->
    <div id="app"> <!-- 2. 创建或绑定一个vue操作的标签 -->
        <p>{{message}}</p>
        <a :href="url">{{title}}</a>
    </div>

    <div id="demo">
        {{message}}
        {{num}}

    </div>
    <script>
        // 3. 基于Vue.createApp实例化一个vue管理对象-vm
        var vm = Vue.createApp({
            data(){ // 4. data是必填参数，表示vue要输出到控制标签中的内容或属性
                return {
                    message:"hello",
                    url: "https://www.baidu.com",
                    title: "百度",
                }
            }
        }).mount("#app"); // 5. 通过vm对象的mount把html标签与vm对象进行捆绑

        var vm2 = Vue.createApp({
            data(){
                return {
                    message: "hello2",
                    num: 23,
                }
            }
        }).mount("#demo");
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.3.2.20.js"></script>
</head>
<body>

<div id="app">
    <!-- {{ message }} 表示把vue对象里面data选项的对应数据输出到页面中 -->
    <!-- 在双标签中显示数据要通过{{  }}来完成 -->
    <p>{{message}}</p>
    <p>{{num}}</p>
    <p>{{is_delete}}</p>
    <!-- 下面的classmate没有数据，就是因为没有在data里面预设 -->
    <p>{{classmate}}</p>
</div>

<script>
    // vuejs的所有代码全部开始于Vue对象
    // Vue.createApp可以创建一个vue的实例对象，通过这个实例对象，我们可以操作指定HTML的内容、数据、结构、特效等等
    // 一个HTML页面中， 可以创建多个vue的实例对象，但是这些实例对象的保存变量名，不能一样
    // 所以每次操作数据都要创建Vue实例对象开始。
    const vm = Vue.createApp({
        // data是将要展示到HTML标签元素中的数据。一般会在data这里预先设置vue要使用的变量数据,并给变量指定要一个默认值，
        // 当然最终data这里的数据都是来自服务器
        data(){
            return {
                message: "hello, python36",
                num: 200,
                is_delete: false,
            }
        }
    }).mount("#app");

    // 保存mount方法的直接结果就是一个vue的实例对象，里面可以直接发访问data选项里面的返回数据
    console.log(vm);
    console.log(vm.is_delete);  // 相当于获取vm对象的data选项里面的is_delete
    console.log(vm.message);
</script>
</body>
</html>

总结：

//1. vue的使用要从创建Vue管理对象开始，一个html页面中可以创建多个vm对象，每个vm之间互不干扰。
   var vm = Vue.createApp({});
   
//2. 创建vue对象的时候，需要传递选项参数，选项参数就是json对象，json对象必须有data成员
   var vm = Vue.createApp({
         data(){
            return {}
         },
   }).mount("#app");
   
   //mount:设置vue可以操作的html内容范围，值一般就是css的id选择器。
   //data: 保存vue.js中要显示到html页面的数据。
   
//3. vue.js要控制的内容范围，必须先通过id来设置。
  <div id="app">
      <h1>{{message}}</h1>
      <p>{{message}}</p>
  </div>

vue.js的M-V-VM思想

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，是一种代码分工思想来的。

Model 指代的就是vue对象的data选项里面的数据。这里的数据要显示到HTML页面中。

View 指代的就是vue中数据要显示的HTML页面，也称之为“视图模板” 。

ViewModel 指代的是vue.js中Vue.createApp创建实例对象vm了，它是vue.js的核心，负责连接 View 和 Model，保证视图的变量值和data选项中变量的值一致性，所以前面代码中，data选项里面的数据被显示中p标签中就是vm对象自动完成的。vm对象会时刻的监控View和Model的变化，并保持双方数据的一致性！！！有时候，这个特性也叫双向数据绑定

编写代码，让我们更加清晰的了解MVVM：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <!-- 1. 引入vue.js文件 -->
    <script src="../js/vue.global.prod.3.2.20.js"></script>
</head>
<body>
    <div id="app"> <!-- 2. 创建或绑定一个vue操作的标签 -->
        <p>{{num}}</p>
        <input type="text" v-model="num"><button @click="add">+</button>
    </div>

    <script>
        // M-V-VM中的VM就是Vue.createApp的返回值
        var vm = Vue.createApp({
            data(){  // data里面的返回值对象就是Model数据模型
                return {
                   num: 10,
                }
            },
            methods:{
               add(){
                   this.num++;
                   console.log(this.num); // this代表的vm对象，vm对象在运行时会自动把methods和data的变量与函数作为自己的属性和方法
                   this.text();
               },
                text(){
                   console.log("text");
                }
            }
        }).mount("#app"); // mount绑定的就是vue的View视图模板

    </script>
</body>
</html>

VM常用属性操作

在浏览器中可以在 console.log通过 vm对象可以直接访问el和data属性,甚至可以访问data里面的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="../js/vue.global.prod.3.2.20.js"></script>
</head>
<body>
    <div id="app">
        <p ref="p3">{{num}}</p>
        <p>{{num}}</p>
    </div>
    <script>
      var vm = Vue.createApp({
        data(){
          return {
            num: 100,
            msg: "hello"
          }
        }
      }).mount("#app");

      console.log(vm);

      // 传递到vm对象中的data数据
      console.log(vm.$data);

      // 实例化了vm对象以后，调用mount绑定的可控视图范围
      console.log(vm.$el);

      console.log(vm.$el.parentElement); // 获取当前绑定vm对象的HTML标签，<div id="app" data-v-app>100</div>

      // 在绑定标签范围内，要抓取元素，通过$refs来抓取
      console.log(vm.$refs);
      console.log(vm.$refs.p3);
      vm.$refs.p3.innerHTML = "hello!!!!";

    </script>
</body>
</html>

总结

createApp中的data选项，传递到vm对象内部时，已经变成了使用Proxy对象代理的属性，可以通过vm.$data来查询。
vm对象在经过调用mount方法绑定HTML标签以后，这个标签代表的就是当前vm对象的可控范围，可以通过vm.$el属性来查询，

通过要获取绑定vm的HTML元素，可以通过vm.$el.parentElement来获取。
vm对象提供$refs可以让我们开发者直接在vm控制的视图范围，使用ref属性绑定任意元素，并在vm.$refs中获取。

vm.$refs.p3 则表示获取视图代码中的 ref="p3"的标签。

显示数据

在双标签中显示纯文本数据一般通过{{ }}来完成数据显示，双花括号中还可以支持js表达式和符合js语法的代码，例如函数调用.
如果双标签的内容要显示的数据包含html代码，则使用v-html来完成
在表单输入框中显示数据要使用v-model来完成数据显示

整个HTML网页组织起来就是DOM树形结构，那么vue在视图模板的时候，采用了虚拟DOM方式来展示数据的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="../js/vue.global.prod.3.2.20.js"></script>
</head>
<body>
    <div id="app">
        <p>{{num}}</p>
        <p>{{num+200}}</p>
        <p>{{(3.3333333+1).toFixed(2)}}</p>
        <p>{{parseInt(num+3.3333333)}}</p>
        <p>{{Math.random()}}</p>
        <p @click="shownum">{{num}}</p>
        <hr>
        <p v-html="message"></p>

        <hr>
        <input type="text" :value="num"><br> <!-- 只读属性，不能在修改时保证所有的变量值同步 -->
        <input type="text" v-model="num">

        <br>
        <textarea name="" id="" cols="30" rows="10" v-model="num"></textarea>
        <br>
        <select name="" id="" v-model="num">
            <option value="200">上海</option>
            <option value="100">天津</option>
            <option value="300">北京</option>
        </select>
    </div>
    <script>
      var vm = Vue.createApp({
        data(){
          return {
              num: 100,
              message: '<a href="https://www.baidu.com">百度</a>',
          }
        },
        methods:{
            shownum(){
                alert(this.num);  // 把js原生的DOM或者BOM操作，全部写在HTML视图以外。
                console.log(this.num);
            }
        }
      }).mount("#app");
      </script>
</body>
</html>

总结：

1. 可以在普通双标签中使用{{ }} 或者 v-html 来输出data里面的数据
<h1>{{message}}</h1>
<h1 v-html="message"></h1>
2. 可以在表单标签中使用v-model属性来输出data里面的数据，同时还可以修改data里面的数据
<input type="text" v-model="username">

posted @ 2025-03-14 02:23 minger_lcm 阅读(290) 评论(0) 收藏举报

刷新页面返回顶部