【Vue】VS Code+Vue入门 Helloworld
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.redclass {
background-color: red;
} .blueclass {
color: blue
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
</head> <body>
<div id="app">
<p>{{ message }}</p>
<p> {{ reversedMessage }} </p>
</div>
<div id="raw">
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive:
<span v-html="rawHtml"></span>
</p>
</div>
<div id="cs">
<p :class="[classA,classB]">HelloWorld</p>
<p :class="{'redclass':ISA,'blueclass':ISB}">HelloWorld</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello World!'
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('');
}
},
methods: {
methodMessage: function () {
return this.message.split('').reverse().join('');
}
}
}); new Vue({
el: '#raw',
data: {
rawHtml: '<span style="color:red"> This should be red.</span>'
}
});
new Vue({
el: '#cs',
data: {
classA: 'redclass',
classB: 'blueclass',
ISA: false,
ISB: true
}
});
</script> </body> </html>
基本功能就是实现Vue的一个class及文本的绑定功能
【Vue】VS Code+Vue入门 Helloworld的更多相关文章
- Vue.js的从入门到放弃进击录（一）
感谢我们项目组给机会,让我学了Vue.js,打开新世界大门...哈哈哈,也没有那么夸张,不过学下来确实觉得入门还是蛮容易的.我大概前前后后学了有一个月的样子,一开始只是比较急着可以写东西出来,后来因为 ...
- Vue.js的从入门到放弃进击录（二）
哇塞,昨晚更新的篇(一)这么多阅读量,看来入坑的人越来越多啦~熬了一个礼拜夜,今天终于生病惹~国庆要肥家咯·所以把篇(二)也更完.希望各位入坑的小伙伴能少跳几个坑呗.如果有什么不对的地方也欢迎讨论指正 ...
- 《vue.js2.0从入门到放弃》学习之路
原文地址: Vue.js2.0从入门到放弃---入门实例(一):http://blog.csdn.net/u013182762/article/details/53021374 Vue.js2.0从入 ...
- Vue (一) --- vue.js的快速入门使用
=-----------------------------------把现在的工作做好,才能幻想将来的事情,专注于眼前的事情,对于尚未发生的事情而陷入无休止的忧虑之中,对事情毫无帮助,反而为自己凭添 ...
- SpringBoot 和Vue前后端分离入门教程(附源码)
作者:梁小生0101 juejin.im/post/5c622fb5e51d457f9f2c2381 推荐阅读(点击即可跳转阅读) 1. SpringBoot内容聚合 2. 面试题内容聚合 3. 设计 ...
- Vue环境搭建及第一个helloWorld
Vue环境搭建及第一个helloWorld 一.环境搭建 1.node.js环境安装配置 https://www.cnblogs.com/liuqiyun/p/8133904.html 或者 htt ...
- 一款简单而不失强大的前端框架——【Vue.js的详细入门教程①】
↓— Vue.js框架魅力 —↓ 前言 Vue.js 是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.V ...
- Vue 系列之 基础入门
背景叙述 渐进式 JavaScript 框架 易用:已经会了 HTML.CSS.JavaScript?即刻阅读指南开始构建应用! 灵活:不断繁荣的生态系统,可以在一个库和一套完整框架之间自如伸缩. 高 ...
- Vue.js——十分钟入门Vuex
一. 什么是Vuex? Vuex Vuex是一个专门为Vue.js应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规则保证状态以一种可预测的方式发生变化. Vue ...
- Vue.js2.0快速入门笔记
vue.js 解耦视图与数据,可复用的组件,前端路由,状态管理,虚拟DOM. MVVM模式:当View(视图层)变化时,会自动更新ViewModel(视图模型),View与ViewModel之间双向绑 ...
随机推荐
- 探寻main函数的“标准”写法，以及获取main函数的参数、返回值
main函数表示法 很多同学在初学C或者C++时,都见过各种各样的main函数表示法: main(){/*...*/} void main(){/*...*/} int main(){/ ...
- (原）ubuntu下cadvisor+influxdb+grafana+supervisord监控主机和docker的containers
ubuntu下cadvisor+influxdb+grafana+supervisord监控主机和docker的containers(运行在主机上) 适用于类ubuntu系统.amd64. 1. in ...
- 如何在Oracle中一次执行多条sql语句 (.net C#)
关键是不能换行,要加上begin ...sql... end; 每个SQL用:隔开,end后面必须加: 以下是拷贝于:http://www.cnblogs.com/teamleader/arc ...
- UDP服务器
用c#开发的一个UDP服务器.可以接收UDP的连接请求.给予响应. 代码已经上传至 GitHub,功能还会不断完善. 界面很丑.我很奇怪的是很少(到现在为止,我都没有见到过),所以界面一直做的不够酷炫 ...
- iOS开发：一个瀑布流的设计与实现（已实现缓存池功能，该功能使得瀑布流cell可以循环利用）
一个瀑布流的实现有三种方式: 继承自UIScrollView,仿写UITableView的dataSource和delegate,创造一个缓存池用来实现循环利用cell 写多个UITableview( ...
- 判断URL文件是不是在于在。
判断URL文件是不是在于在. private static bool UrlIsExist(string url) { System.Uri u = null; try { u = new Uri(u ...
- WPF学习笔记（1）——image控件图片不显示的问题
说明(2017-6-7 16:08:35): 1. 本来想用winform的,用winform就没这么多破事了. 2. 不过项目要用WPF,拉出一个mediaelement控件,视频正常显示. 3. ...
- linux下修改tomcat使用的jdk版本
遇到一种情况,就是linux上好像掉文件了,JDK的目录下没有了,具体问题还不清楚,不过要赶紧修复,不能影响其他程序的运行. 结构重新安装了JDK,tomcat还是启动失败,看l启动日志发现没找到还是 ...
- thinkphp前台模版字符串截取
ThinkPHP\Common\extend.php 中管理前台模版的截取{$vons.title|msubstr=0,26} 原始的代码是无法使用截取支持…. 由于涉及到只有汉字检测最为准确 需要加 ...
- <[成长股基本面]【怎样选择成长股】>读书笔记
书在这里 投资想赚大钱,必须有耐性 这家公司的产品或服务有没有充分的市场潜力,至少几年内营业额能否大幅成长? 为了进一步提高总体销售水平,发现新的产品增长点,管理层是不是决心继续开发新产品或新工艺? ...