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 ...
随机推荐
- golang切片
切片与数组 go的数组是这样的 array := [3]int{1,2,3} array := [...]int{1,2,3} go的切片 array := []int{1,2,3} //1 arra ...
- python如何在图片上添加文字（中文和英文）
Python在图片上添加文字的两种方法:OpenCV和PIL 一.OpenCV方法 1.安装cv2 pip install opencv-python 2.利用putText方法来实现在图片的指定位置 ...
- 网络|Trojan 网络代理服务搭建
Trojan 网络代理服务搭建 前言 本文目的在于帮助相同困惑的网友,让使用更加简单. Trojan为Trojan-GFW开源的一款新思路网络代理软件, 前期准备 [x] 服务器:系统CentOS 7 ...
- python 深浅拷贝 元组 字典 集合操作
深浅拷贝 :值拷贝 :ls = [,,] res = ls 则print(res)就是[,,] 浅拷贝 :ls.copy() 深拷贝:ls3 = deepcopy(ls) # 新开辟列表空间,ls列表 ...
- 论JS函数传参时:值传递与引用传递的区别
什么是值传递:值传递是指在调用函数时将实际参数(实参)复制一份传递到函数中,这样在函数中如果对参数进行修改,将不会影响到实际参数. 值传递的总结:也就是说,将实参复制到函数中的这个过程叫值传递 什么是 ...
- 【读后感】《Java编程思想》~ 异常
[读后感]<Java编程思想>~异常 终于拿出压箱底的那本<Java编程思想>.这本书我年轻的时候就买了,但是翻过几页后就放弃了.没想到这两天翻了一下,真的有收获. 看了一下第 ...
- python学习-练习题兔子生长问题巩固
有一对兔子,一个月之后成熟,成熟之后每个月会生出一对兔子,理想状态下兔子不会死,请问n个月后有多少兔子? 分析:第一个月:1 第二个月:1 第三个月:2 第四个月:3 第五个月:5 第六个月:8 从前 ...
- python学习基础之变量
变量名只能包含字母.数字和下划线.变量名可以字母或下划线打头,但不能以数字打 头,例如,可将变量命名为message_1,但不能将其命名为1_message. 变量名不能包含空格,但可使用下划线来分隔 ...
- 【11】openlayers 地图交互
地图交互interaction 关于map的方法: //添加地图交互 map.addInteraction(interaction) //删除地图交互 map.removeInteraction(in ...
- Flutter json 2 model with Built Value
Flutter json 2 model with Built Value Flutter中json转换model, 除了手动转之外, 就是利用第三方库做一些代码生成. 流行的库有: json_ser ...