Vue之下载、创建一个Vue实例

最新推荐文章于 2024-08-20 11:53:39 发布

悬悬小

最新推荐文章于 2024-08-20 11:53:39 发布

阅读量195

点赞数 1

文章标签： vue html5 javascript

本文链接：https://blog.csdn.net/m0_46988935/article/details/118931315

版权

文章目录

前言
一、vue简介
二、vue的下载
三、导入vue的步骤
四、vue入门案例
总结

前言

学习vue的前置知识。

一、vue简介

官方定义：渐进式JavaScript框架，即意味着vue是一个JS框架，之前我们学过jQuery也是一个js框架，它们都是为了简化页面中js开发的。
渐进式的含义：

易用： vue.js 上手快
灵活： 生态系统非常强大
高效： vue体积小，超快虚拟dom vue底层深度优化

通俗的来讲，vue的出现可以让我们在页面中完成特别复杂操作，可以简化dom编程甚至可以不写任何dom编程代码，vue内置双向绑定机制，简称MVVM机制，是前后端分离的基础。
html + js ======》html + css + jQuery ====》vue（前后端分离） ====》前端系统 + json +后端系统

二、vue的下载

官网链接：https://cn.vuejs.org/
虽然vue已经有个3.0版本，我们学习的是vue2的版本，进入官方，我们可以看到官方分为开发环境版本和生产环境版本，建议开发时使用第一个版本，待项目上线后使用第二个版本。
复制网址到浏览器，右键另存为即可。

三、导入vue的步骤

首先，我们需要创建一个maven项目，整体的项目结构如下：

四、vue入门案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue系列课程之基础入门</title>
    </head>
    <body>
        <div id="app">
            <h1>{{msg}}</h1>
            <h2>{{count}}</h2>
            <h2>{{count+1}}</h2>
            <h2>{{content}}</h2>
            <h2>{{content.toUpperCase()}}</h2>
            <h2>{{content.length}}</h2>
            <h2>{{content == "hello vue"}}</h2>

        </div>
    </body>
</html>
<!-- 引入核心js文件-->
<script src="js/vue.js"></script>
<!--书写vue的代码-->
<script>
    new Vue({
        el: "#app",//el:element 元素 代表vue实例的作用范围，一般是在body下创建一个容器div，作用于容器上
        data: {
            msg: "悬悬小",
            count:0,
            content:"hello vue"
        }//data 数据 自定义各种数据
    });//创建一个vue实例
</script>
<!--总结：
1.一个页面中只能存在一个vue实例，不能创建多个vue实例
2.el属性代表vue实例的作用范围,日后在vue实例作用范围内可以通过使用{{data属性中的变量名}}，直接获取data中变量名对应的属性值
3.vue实例中data属性用来给定vue实例绑定自定义数据，方便使用{{}}方式获取
4.使用{{}}方式进行data数据获取时，可以在该取值语法内进行算术运算、逻辑运算及调用相关类型的相关方法
5.vue实例中el属性可以书写任何css选择器，但是推荐使用id选择器，因为一个vue实例只能作用于一个具体的作用范围
-->