Vue.js hello world

2022/1/18 23:08:42

编程Tag： vue https name Hello World My XXXXXXXX

本文主要是介绍Vue.js hello world，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

起步

①调试代码用http-server（https://www.npmjs.com/package/http-server）；

②下载Vue.js开发版本（https://cn.vuejs.org/v2/guide/installation.html）；

③下载安装Vue Devtools（https://devtools.vuejs.org/guide/installation.html）；

④编写hello world程序，在浏览器显示hello my name xxxxxxxx，如下：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title></title>
  <script src="JS/vue.js"></script>
</head>

<body>
  <h1 id="xx">hello {{name}}</h1>

  <script>
    new Vue({
      el: "#xx",
      data: {
        name: "my name xxxxxxxx",
      },
    });
  </script>
</body>
</html>

注意：

①Vue实例和容器一一对应

②{{}}只要是js表达式都可以

v-bind

v-bind:可以简写成:

v-bind是单向绑定，数据改变导致页面改变，但是页面改变数据不变；

双向绑定采用v-model，且它只能用在表单类元素上，v-model:value可以简写为v-model

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title></title>
  <script src="JS/vue.js"></script>
</head>

<body>
  <h1 id="xx" v-bind:x="这里面当作表达式执行">hello {{name}}</h1>

  <script>
    new Vue({
      el: "#xx",
      data: {
        name: "my name xxxxxxxx",
        这里面当作表达式执行: "dajsldjas",
      },
    });
  </script>
</body>
</html>

执行结果：

<h1 id="xx" x="dajsldjas">hello my name xxxxxxxx</h1>

这篇关于Vue.js hello world的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Vue.js hello world

起步

v-bind

相关编程文章