html vue简单
1.Vue 简单的替换更新
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
</head>
<body>
<div id="app">
<h2>{{ product }}Python</h2>
</div>
</body>
<!-- <script src='js/vue.min.js'></script> -->
<script src='https://cdn.bootcss.com/vue/2.6.10/vue.min.js'></script>
<script>
const app = new Vue({
el:'#app',
data: {
product:'流浪'
}
})
</script>
</html>
2.v-bind-更新标签属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue_v-bind-更新标签属性</title>
</head>
<body>
<div id="page">
<a id="prev" v-bind:href= prev>上一页</a>
<a id="next" v-bind:href= next>下一页</a>
</div>
</body>
<!-- <script src='js/vue.min.js'></script> -->
<script src='https://cdn.bootcss.com/vue/2.6.10/vue.min.js'></script>
<script>
const app = new Vue({
el:'#page',
data: {
prev:'https://www.bootcdn.cn/',
next:'https://www.baidu.com/'
}
})
</script>
</html>
3.v-for_模板更新
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue_v-for_模板更新</title>
</head>
<body>
<div id='app'>
<table id="emp">
<thead>
<tr>
<th>编号</th>
<th>名字</th>
<th>作用</th>
</tr>
</thead>
<tbody>
<tr v-for = 'emp in emps'>
<td>{{emp.no}}</td>
<td>{{emp.name}}</td>
<td>{{emp.job}}</td>
</tr>
</tbody>
</table>
</div>
<!-- <script src="js/vue.min.js"></script> -->
<script src='https://cdn.bootcss.com/vue/2.6.10/vue.min.js'></script>
<script>
const app = new Vue({
el:'#app',
data:{
emps:[{no:'01',name:'锤锤',job:'让人笑'},
{no:'02',name:'狗娃子',job:'好养活'},
{no:'03',name:'召唤师',job:'召唤神兽'}
]
}
})
</script>
</body>
</html>
4.v-if_v-else
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue_v-if_v-else</title>
</head>
<body >
<div id ='app'>
<h1 v-if="Math.random() > 0.5">Yes</h1>
<h1 v-else>No</h1>
<div v-if="Math.random() > 0.5">Sorry</div>
<div v-else>Not sorry</div>
</div>
</body>
<script src='https://cdn.bootcss.com/vue/2.6.10/vue.min.js'></script>
<!-- <script src="js/vue.min.js"></script> -->
<script>
const app = new Vue({
el:'#app'
})
</script>
</html>
5.vue-computed(计算)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue-computed(计算)</title>
</head>
<body >
<div id ='app'>
<p>我们的队名是: "{{ message }}"</p>
<p>我可以倒背如流: "{{ reversedMessage }}"</p>
</div>
</body>
<!-- <script src='https://cdn.bootcss.com/vue/2.6.10/vue.min.js'></script> -->
<script src="js/vue.min.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
message: '流浪python'
},
computed: {
reversedMessage: function () {
// 先把字符串切片成列表,倒序后重新组合成字符串
return this.message.split('').reverse().join('')
}
}
})
</script>
</html>
html vue简单的更多相关文章
- Vue简单基础 + 实例 及 组件通信
vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...
- vue简单实现
vue简单实现 vue的三个核心 虚拟dom, 双向绑定 Proxy,
- 一篇文章带你了解网页框架——Vue简单入门
一篇文章带你了解网页框架--Vue简单入门 这篇文章将会介绍我们前端入门级别的框架--Vue的简单使用 如果你以后想从事后端程序员,又想要稍微了解前端框架知识,那么这篇文章或许可以给你带来帮助 温馨提 ...
- vue初学实践之路——vue简单日历组件(1)
---恢复内容开始--- 最近做的项目有一个需求,需要有一个日历组件供预定功能使用,之前的代码过于繁琐复杂,所以我采用vue重写了这个组件. npm.vue等等安装. 只是一个简单的日历组件,所以并不 ...
- 极速搭建RTMP直播流服务器+webapp (vue) 简单实现直播效果
在尝试使用webRTC实现webapp直播失败后,转移思路开始另外寻找可行的解决方案.在网页上尝试使用webRTC实现视频的直播与看直播,在谷歌浏览器以及safari浏览器上测试是可行的.但是基于基座 ...
- vue（2）—— vue简单语法运用，常用指令集
按照前面的文章:vue(1)——node.js安装使用,利用npm安装vue 安装完vue之后,就可以使用vue了 vue vue简介 前面安装好vue之后,确实还没有对vue进行介绍,首先,官网: ...
- vue简单介绍
最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在 ...
- vue简单demo
为了学习基础语法,我并没有用vue-cli脚手架来vue init [基于什么类型] [项目名称]初始化项目,而是直接<script>../vue.js</script> & ...
- parcel vue 简单使用
1.安装依赖 yarn global add parcel-bundler yarn add babel-preset-env --dev yarn add parcel-plugin-vue --d ...
随机推荐
- 7-7 jmu_python_是否是数 (10 分)
本题要求从键盘输入一个字符串,判断该串是否属于整数.浮点数或者复数的表示 输入格式: 输入一个字符串 输出格式: 输出yes或no 输入样例: -299 输出样例: yes a = input() t ...
- SQL Server 最小日志记录
SQL Server之所以记录事务日志,首要目的是为了把失败或取消的操作还原到最原始的状态,但是,并不是所有的操作都需要完全记录事务日志,比如,在一个空表上放置排他锁,把大量的数据插入到该空表中.即使 ...
- ASP.NET Core 中间件自定义全局异常处理
目录 背景 ASP.NET Core过滤器(Filter) ASP.NET Core 中间件(Middleware) 自定义全局异常处理 .Net Core中使用ExceptionFilter .Ne ...
- Lambda 方法引用
1.方法引用:若Lambda 体中的内容有方法已经实现了,我们可以使用“引用方法”(可以理解为方法引用是Lambda表达式的另外一种表现形式) 方法引用主要有三种语法格式: ① 对象 :: 实例方法 ...
- WSGI-mini-web框架服务器
前期准备: 安装python环境安装pycharm安装MySQL数据库安装pymsql创建一个学生表,存入数据我们只是实现一个非常简单的web服务,前端页面不会专门做页面文件,会在代码中以具体命令的形 ...
- MySQL字符集不一致导致性能下降25%，你敢信？
故事是这样的: 我在对MySQL进行性能测试时,发现CPU使用率接近100%,其中80%us, 16%sys,3%wa,iostat发现磁盘iops2000以下,avgqu-sz不超过3,%util最 ...
- app之---豆果美食
1.抓包 2.代码 抓取: #!/usr/bin/env python # -*- coding: utf-8 -*- #author tom import requests from multipr ...
- libfastcommon总结（〇）
libfastcommon提供众多基础功能,该系列笔记将进行学习介绍. load_local_host_ip_addrs 进行加载主机上所有网卡的IPv4的地址. iniLoadFromFile 从文 ...
- vscode配置里关于 eslint配置不要有 "eslint.alwaysShowStatus": true
"eslint.autoFixOnSave": true, "eslint.validate": [ "javascript", " ...
- 学习webpack基础笔记01
学习webpack基础笔记 1.webpack搭建环境最重要的就是如何使用loader和plugins,使用yarn/npm安装插件.预处理器,正确的配置好去使用 2.从0配置webpack - 1. ...