1、基本介绍。
Vue作为中国人自己开发和维护的前端框架，兼备了angular和react的一些优点。先从一个最简单的Vue示例开始：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>Vue学习</title>
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <p>{{ message }}</p>
        </div>

        <script>
            new Vue({
                el: '#app',
                data: {
                    message: 'Hello Vue.js!'
                }
            })
        </script>
    </body>

</html>

首先，作为一个js框架，我们需要引入它的库vue.js.就像我们学习jquery，我们就要使用script标签引入jquery.js。

这个src可以是自己下载的vue包，也可以是线上维护更新的cdn，这两者的唯一区别就是：我们使用自己下载的包，稳定且安全。使用cdn托管的方式，有可能代码托管的服务器出问题，会影响自己的项目。

其次，我们看到界面的这个东西：{{message}}。
这是一种数据双向绑定的语法，熟悉angular或者react的都知道，这里面的是一个变量，这个变量的值我们在js代码中赋值改变，界面就会跟着改变。如果message我们赋值为hello，界面就会展示hello。

最后，我们看这段代码：

new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue.js!'
    }
})

其中：new Vue代表了我们对我们的界面操作的申明。
el：“#app”,代表我要在id为app的div盒子中操作数据，表达的是一种入口和范围的概念，就像我是一个中国人，我的活动范围就是中国，我的所有的所作所为目前就在中国这个范围内。
data：{
message：“hello vue,js!”
}
这是数据的双向绑定的写法，我们改变message的值，界面中的值会跟着改变。

这就是一个基本的最简单的vue代码的实现。

<完>

# 前端框架
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue