Vue的初步代码实现

小张要努力吖

已于 2022-05-21 19:11:10 修改

阅读量621

点赞数

文章标签： vue.js 学习 javascript

于 2022-05-21 19:06:39 首次发布

本文链接：https://blog.csdn.net/m0_64828880/article/details/124901166

版权

vue.js

Vue.js的基本使用步骤

1.官网下载vue.js文件Vue下载官网

如图所示,选择第一个开发版本

2.创建的项目中引入vue.js

在项目中新建一个js目录（目录名可自拟)，然后将下载的vue文件复制到目录中

如图所示

3.在HTML中引入vue.js

Vue的代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>开篇</title>
</head>
<body>
<div id="app">
    <!--{{插值表达式，可以获取到data中的数据}}-->
    数据的内容是：{{name}}</br>
    <button onclick="funA()">点我一下</button>
    <button @click="funA">我才是对的</button>
</div>

</body>
</html>
<!--引入vue.js文件-->
<script src="../js/vue.js"></script>
<script>
    // 产生 vue 根实例
    /*
        el:绑定
           new Vue({
            }).$mount('#app');
            也可以通过.$mount('#app')绑定
        data:定义变量的区域 数据区
        methods:方法区 定义vue方法的位置
        created():当页面加载时就会执行的内容 类似于onload事件
     */
    new Vue({
        el: '#app',
        data: {
            //定义三个变量
            id: 1,
            name: "张三",
            sex: '男'
        },
        methods: {
            //定义两个函数
            funA() {
                //console.log()方法————在控制台输出信息
                console.log("我是" + this.name + "欢迎学习Java语言！")
            },
            funB() {
                console.log('我又是一个函数！')
            }
        },
        created() {
            this.funB();
            console.log('我是页面加载时就会执行的内容');
        }
    });
    function funA() {
   
        console.log("我是javaScript的内容，是过去学习的知识。" + this.name);
         //name是定义在Vue中的，所以这里的this.name不会在控制台显示
    }
</script>

运行效果：