Vue学习--Day1

最新推荐文章于 2024-07-22 08:55:10 发布

献_

最新推荐文章于 2024-07-22 08:55:10 发布

阅读量86

点赞数

文章标签： vue vue.js

本文链接：https://blog.csdn.net/weixin_45726044/article/details/113569325

版权

Vue的安装和第一个Vue

vue官网 https://cn.vuejs.org/
vue安装
从官网上下载vue.js，开发版本点击右键"从链接另存文件为"，即可下载。

3.导入vue.js

     <script src="vue.js"></script>

4.HelloVue.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>我的第一个vue</title>
    </head>

    <body>
        <div id="hey">{{message}}</div>
        <script src="vue.js"></script>
        <script>
            //ES6中 let(变量)/const(常量)
            const app = new Vue({
                el:'#hey', //用于挂载要管理的元素
                data:{ //定义数据
                    message: '你好啊！'
                }
            })
        </script>
    </body>
</html>

5.运行结果

6.实施修改显示内容

7.代码解析

        <script>
            //ES6中 let(变量)/const(常量)
            const app = new Vue({
                el:'#hey', //用于挂载要管理的元素
                data:{ //定义数据
                    message: '你好啊！'
                }
            })
        </script>

(1)首先实例化Vue，例如:

	var xx = new Vue({
		//选项
		})

(2)el参数：它是 DOM 元素中的 id，这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响。
	例如上述代码中“#hey"即为id为hey，在div元素中
(3)data参数：用于定义属性，实例中的属性为：message。{{ }} 用于输出对象属性和函数返回值。

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。

参考:
https://www.bilibili.com/video/BV15741177Eh?p=5&spm_id_from=pageDriver
https://www.runoob.com/vue2/vue-tutorial.html

献_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习--Day1

Vue的安装和第一个Vuevue官网 https://cn.vuejs.org/vue安装从官网上下载vue.js，开发版本点击右键"从链接另存文件为"，即可下载。3.导入vue.js <script src="vue.js"></script>4.HelloVue.html<!DOCTYPE html><html> <head> <meta charset="UTF-8">
复制链接

扫一扫