vue01-helloWorld创建vue实例

待我称王封你为后i 2022-05-09 23:03 196阅读 0赞

首先打开vue官网，打开教程，根据下面连接把js文件下载下来，也可以用网址不下载。

![70][]

![70 1][]

<!DOCTYPE html>
    <html lang=en>
        <head>
            <meta charset="utf-8"/>
            <title>Hello world</title>
            <script src="vue.js"></script>
        </head>
        <body>
            <div id="app">{
       {content}}</div>
    
    
            <script>
                // var dom = document.getElementById("app");
                // dom.innerHTML = 'hello world';
                // setTimeout(() => {
                //     dom.innerHTML = 'hello';
                // }, 2000);
    
    
                var app = new Vue({
                    el:'#app', //vue实例处理哪个dom
                    data:{   //定义数据
                        content:'hello world'
                    }
                })
                setTimeout(() => {
                    app.$data.content = 'hello vue'; //关注数据绑定，而不关注dom问题
                }, 2000);
            </script>
        </body>
    </html>

我的第一个代码如上所示，在script中引入vue.js，在body中定义一个div标签

下面主要讲script代码：

new Vue(\{\}),代表创建一个vue实例

el: 表示vue实例绑定哪个dom元素

data: 里面可以自己定义变量值，我定义了content变量，这个变量通过\{ \{\}\}这个插值表达式，在div标签中显示出来。

注意：只有与vue实例绑定的dom才能用vue的这些特征。

app.$data：$开头表示 vue实例中的属性，示例中表示vue app实例的data属性的content属性。

从例子中可以看出，vue优势在于数据的绑定，而让开发者减少在dom操作上花的时间。

[70]: /images/20220510/8a3003a0b4ac499db8a44338a9f9e9cc.png
[70 1]: /images/20220510/be6887a47bb04fa1b68c6cc5f4f8e7e5.png

发表评论取消回复

表情：

评论列表（有 0 条评论，196人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue-01 创建你的第一个vue页面-视频教程

视频 vue介绍 Vue.js的定位是一个渐进式框架前端三大mvvm框架 vue , react ,angular Vue.js受到越来越多关注的一

谁践踏了优雅/ 2022年12月18日 15:52/ 0 赞/ 107 阅读

相关 Vue01_Vue基础入门

Vue基础入门 Vue入门引入 Vue 的 cdn Vue入门程序 -

╰+攻爆jí腚メ/ 2022年12月02日 12:20/ 0 赞/ 247 阅读

相关 Vue01_vue基础知识

1. Vue.js是什么? 1). 一位华裔前Google工程师(尤雨溪)开发的前端js库 2). 作用: 动态构建用户界面 3). 特点:

短命女/ 2022年09月14日 08:39/ 0 赞/ 201 阅读

相关 Vue.js之HelloWorld

1、关于Vue.js的一个简单例子 2、DOM里面的代码 <div id="app">{ {msg}}</div> 3、JavaScript的代码

秒速五厘米/ 2022年07月12日 13:44/ 0 赞/ 117 阅读

相关 vue01-helloWorld创建vue实例

首先打开vue官网，打开教程，根据下面连接把js文件下载下来，也可以用网址不下载。 ![70][] ![70 1][] <!DOCTYPE html> <

待我称王封你为后i/ 2022年05月09日 23:03/ 0 赞/ 197 阅读

相关初学Vue.js--创建Vue实例

昨天刚开始学习Vue.js(读音 /vjuː/, 类似于 view)想记录一下,Vue.js是一种渐进式前端框架，所谓渐进式就是你可以一步一步、有阶段性的来使用Vue.js不必

﹏ヽ暗。殇╰゛Y/ 2021年12月03日 21:57/ 0 赞/ 269 阅读

相关 Vue-vue.js概述，vue的安装及创建vue实例

vue.js 是什么是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，`Vue` 采用自底向上增量开发的设计。 `Vue` 的核心库只关注视图层，

谁践踏了优雅/ 2021年12月01日 15:02/ 0 赞/ 365 阅读

相关 Vue实例创建

Vue实例创建每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的： var vm = new Vue({ // 选项

电玩女神/ 2021年10月19日 23:58/ 0 赞/ 369 阅读

相关 Vue01

简介本文是2021/06/16整理的笔记赘述可能有点多，还请各位朋友耐心阅读本人的内容和答案不一定是最好最正确的，欢迎各位朋友评论区指正改进

￡神魔★判官ぃ/ 2021年09月25日 10:56/ 0 赞/ 174 阅读

相关 Vue实例

本博客记录了小编在学习Vue过程中的体会与感悟，简单来说就是小编的学习笔记，学习地址主要为Vue的官网，官网地址为：[《Vue官方文档》][Vue]。相关学习笔

深藏阁楼爱情的钟/ 2021年09月20日 01:08/ 0 赞/ 439 阅读