Vue入门 HelloVue
原创Vue入门 HelloVue
原创
Emperor_LawD
修改于 2021-05-25 10:39:52
修改于 2021-05-25 10:39:52
需要对HTML、CSS和JavaScript有一定的了解
安装与部署
使用<script>引入
- 独立版本
- 在Vue官网下载
Vue.js
- 在Vue官网下载
Vue.js下载
- 开发版本：包含了帮助的命令行警告（学习过程中推荐使用）
- 生产版本：优化尺寸和速度在html中使用<script>标签引入
- CDN
- 开发版本（推荐使用）：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>- 生产版本：
<script src="https://cdn.jsdelivr.net/npm/vue"></script>- 同样在
html中使用<script>标签引入
NPM和命令行工具（CLI）
- 有一定的难度，在学习了Vue的基础知识后再去使用
HelloVue
第一个Vue程序
- 创建Vue实例对象
<script>
var app = new Vue({
// 选项
})
</script>- 设置
el属性和data属性
<script>
var app = new Vue({
el: '#app',
data: {
message: "Hello Vue"
}
})
</script>- 使用简介的模板语法把数据渲染到页面上
<div id='app'>
{{ message }} // {{}} 为插值表达式
</div>- 代码截图及效果
说明
el：挂载点（设置Vue实例挂载的元素）- 作用范围：
el元素命中的内部，在外部无效
- 作用范围：
// 在外部无效
<div id=“app”></div>
{{ message }}
// 内部有效
<div id=“app”>
{{ message }}
</div>
// 可嵌套
<div id=“app”>
{{ message }}
<h2>{{ message }}</h2>
</div>- 选择器
- 支持各种选择器，推荐使用
id选择器
- 支持各种选择器，推荐使用
// id选择器
<div id=“app”>
{{ message }}
</div>
// class选择器
<div class=“app”>
{{ message }}
</div>- DOM元素
- html标签只支持双标签，推荐使用
<div>标签
- html标签只支持双标签，推荐使用
// div标签
<div id=“app”>
{{ message }}
</div>
// span标签
<span id="app">
{{ message }}
</span>data：数据对象- Vue中用到的数据类型定义在
data中 - data中可以写复杂数据类型
- Vue中用到的数据类型定义在
<script>
var app = new Vue({
el: '#app',
data: {
message: "Hello Vue",
campus: ["a", "b", "c"] // 数组类型
}
})
</script>- 渲染复杂类型数据时，遵循js的语法methods：函数对象Vue中用到的函数定义在methods中
<script>
var app = new Vue({
el: '#app',
data: {
message: "Hello Vue",
},
methods: {
add: function() {
return this.message + "!!!";
}
}
})
</script>原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
内容分发网络 CDN
内容分发网络（Content Delivery Network，CDN）通过将站点内容发布至遍布全球的海量加速节点，使其用户可就近获取所需内容，避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题，有效提升下载速度、降低响应时间，提供流畅的用户体验。