1.编写HelloWorld！2.变量{{ }}

哎呦喂——code

已于 2022-06-16 14:43:51 修改

阅读量136

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript vue html

于 2022-06-14 10:41:01 首次发布

本文链接：https://blog.csdn.net/weixin_49406370/article/details/125271975

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1. HelloWorld！

1.新建html文件。👇
html
*2.使用vscode打开，输入! 后按下Tab键。👇

 <!DOCTYPE html>
<html lang="en">
	<head>
	  <meta charset="UTF-8">
	  <meta http-equiv="X-UA-Compatible" content="IE=edge">
	  <meta name="viewport" content="width=device-width, initial-scale=1.0">
	  <title>Document</title>
	</head>
	<body>
	
	</body>
</html>

3.标签title写入的是当前浏览器的标题。👇

<title>helloWorld</title>

4.vue3 官网点击进入引入地址<script src="https://unpkg.com/vue@next"></script>用它可以直接编写vue的代码。
5.编写代码，helloWorld。👇

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>helloWorld</title>
</head>
<body>
  <div id="box"></div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
// Vue.createApp 创建vue实例
  Vue.createApp({
  // template 模板，在box元素里面'<div>hello,World！</div>'做为模板展示
  // 相当于在body里面是这样的<div id="box"><div>hello,World！</div></div>
     template:'<div>hello,World！</div>'
  }).mount('#box') // 在div id的box上使用这个vue。
</script>
</html>

页面输出helloWorld

2.变量 {{ }}

如果我们想展示一个变量我们可以像下面这么写，这个变量就可以展示在页面上边啦~
可以这样写

<body>
  <div id="box">{{cont}}</div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
  Vue.createApp({
    data() {
      return {
        cont: 1
      }
    },
  }).mount('#box')
</script>
</html>

也可以这样写

<body>
  <div id="box"></div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
  Vue.createApp({
    data() {
      return {
        cont: 1
      }
    },
    template:'<div>{{cont}}</div>'
  }).mount('#box')
</script>
</html>