02-第一个Vue程序
本文共 1094 字，大约阅读时间需要 3 分钟。
目录
1. 准备工作
- 新建一个test01.html文件
- ! + Tab 键生成模板，注：(！为英文的叹号)，如下图
- 打右键开Open with Live Server
2. 编写代码
2.1 引入Vue
<!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>2.2 添加一个div标签
<div id="app"> <!-- 差值表达式，可以理解为变量语法 --> { {message}} </div>2.3 创建Vue实例
<script> var app = new Vue({ el: '#app', //el 挂载点，此处使用的是id选择器 data: { message: 'Hello Vue!' // data：数据对象 } })</script>2.4 保存(Ctrl +s)并查看结果
2.5 总结
- 导入开发版本的Vue.js
- 创建Vue实例对象，设置el属性和data属性
- 使用简洁的模板语法把数据渲染到页面上
2.6 完整代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue基础</title></head><body> <div id="app"> { {message}} </div> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> </body></html>
转载地址：http://pzle.baihongyu.com/
你可能感兴趣的文章
第一章、基础入门(一)(SpringBoot2.x)
查看>>
Liferay对union的处理
查看>>
jQuery动画
查看>>
Liferay文件的上传
查看>>
初始微服务---Springcloud发展【第一期】
查看>>
RAFT 拜占庭将军 共识算法
查看>>
UE4 错误列表 error码（只记录我遇到的情况，持续添加，未完成）
查看>>
利用委托与Lambada创建和调用webapi接口
查看>>
【.net+jquery】绘制自定义表单（含源码）
查看>>
JavaScript--onblur失去焦点-触发事件
查看>>
could not initialize proxy - no Session (SSH)
查看>>
MySQL 保留关键字(password,key)作为列名 进行建表,查询报错解决方法及建议
查看>>
cmd编译.java文件 : java:720: 错误: 编码GBK的不可映射字符 Why ? ? ? ?
查看>>
【Jquery】获取当前窗口的宽度值/高度值
查看>>
移动开发程序员的悲哀是什么？
查看>>
Android 架构组件 – 让天下没有难做的 App
查看>>
启动MongoDB出现1053错误
查看>>
GIS应用技巧之迭代器（Model）
查看>>
冒泡排序
查看>>
Gym 102770 B-Bin Packing Problem 2020浙江省省赛 （线段树 + set）
查看>>