vue - helloWorld
Vue HelloWorld
2023-09-11 14:14:36 时间
1.cdn概念:cdn全称内容分发网络,也是加速服务之一.
2.数据绑定:{{data}}
3.el属性(挂载对象):el:标签任意(例如:#app,.app,app)
4.data:{} => 小程序的data:存放数据.
5.如果使用cdn,建议采用require.js,否则建议vue.js本地文件存放.
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 <!-- Step1.对于vue,可以用cdn -->
10 <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
11 </head>
12
13 <body>
14
15 <!-- Step2.绑定 -->
16 <div id="app">
17 <!--
18 Vue的模板的绑定数据的方法,用两对花括号进行绑定Vue中的数据对象的属性,和小程序一样的步骤.
19 -->
20 {{message}}
21 </div>
22
23 <!--Step3:创建Vue的对象,并把数据绑定到上面创建好的div上去。-->
24 <script type="text/javascript">
25 var app = new Vue({ // 创建Vue对象,Vue的核心对象。
26 el: '#app', // el属性:把当前Vue对象挂载到 div标签上,#app是id选择器
27 data: { // data: 是Vue对象中绑定的数据
28 message: 'hello World!' // message 自定义的数据信息,如小程序的data:{}
29 }
30 })
31 </script>
32 </body>
33
34 </html>
相关文章
- (尚031)Vue_案例_自定义事件(组件间通信第2种方式:vue自定义事件)
- 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core,如何
- Vue-Socket.io跨域问题 has been blocked by CORS policy: No 'Access-Control-Allow-Origin' Mentalflow解决思路
- vue-cli webpack 中全局引入 jquery
- Vue - 实现信纸输入写作,类似写明信片时的一张背景图片 + 横格纸效果(信纸格子与文字自动对齐、支持自定义背景图、文字或横线大小与颜色,一切由您 DIY 自定义样式)纯CSS完成支持任何vue项目
- vue-devtools 获取到 vuex store 和 Vue 实例的?
- 【面试Vue全家桶】vue前端交互模式-es7的语法结构?async/await
- vue 圆形进度条组件解析
- vue的调试工具 vue-devtools 的安装和使用
- 一、Vue CLI 2
- 一、VS支持Vue语法
- vue-cli脚手架之package.json
- vue-router有哪几种导航钩子?(具体怎么用的)
- 【Vue】vue基础语法——computed计算、watch监听、class和style,最后回顾JavaScript里面的常用方法(vue学习day03)
- vue学习笔记八:Jquery VS Vue之全局属性对照
- vue学习笔记六:Jquery VS Vue之网络请求明细对照
- vue学习笔记五:Jquery VS Vue之事件监听明细对照
- 初识vue状态管理机制(vuex、pinia)
- vue学习笔记【v-model 双向绑定、slot 插槽、浅拷贝与深拷贝】
- 【vue笔记记录】
- Vue富文本编辑器的使用vue-quill-deitor
- 浅析vue-loader的作用及其提供的功能
- vue基础四(comment实例)
- Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事件的简单整理
- Django+Vue项目学习第二篇:vue项目创建
- Vue学习第14天——vue自定义事件及详细代码演示
- iview Carousel 轮播图自适应宽高;iview 轮播图 图片重叠问题;iview tabs 高度互相影响问题;vue this问题;
- 【VUE】vue配置Gzip压缩
- 20.0 vue3中使用vue-router路由跳转,参数(query,params)的传递与接收(包括请求操作)
- ejs结合vue实现SSR ,express+ejs+vue = 服务器端渲染 ?Vue-SSR的奇思妙想
- 解决VsCode启动Vue项目报错:‘vue-cli-service‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件。
- vue 定时器:setInterval和setTimeout使用实例及区别