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>&nbsp;&nbsp;

			<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简单的更多相关文章

  1. Vue简单基础 + 实例 及 组件通信

    vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...

  2. vue简单实现

    vue简单实现 vue的三个核心 虚拟dom, 双向绑定 Proxy,

  3. 一篇文章带你了解网页框架——Vue简单入门

    一篇文章带你了解网页框架--Vue简单入门 这篇文章将会介绍我们前端入门级别的框架--Vue的简单使用 如果你以后想从事后端程序员,又想要稍微了解前端框架知识,那么这篇文章或许可以给你带来帮助 温馨提 ...

  4. vue初学实践之路——vue简单日历组件(1)

    ---恢复内容开始--- 最近做的项目有一个需求,需要有一个日历组件供预定功能使用,之前的代码过于繁琐复杂,所以我采用vue重写了这个组件. npm.vue等等安装. 只是一个简单的日历组件,所以并不 ...

  5. 极速搭建RTMP直播流服务器+webapp (vue) 简单实现直播效果

    在尝试使用webRTC实现webapp直播失败后,转移思路开始另外寻找可行的解决方案.在网页上尝试使用webRTC实现视频的直播与看直播,在谷歌浏览器以及safari浏览器上测试是可行的.但是基于基座 ...

  6. vue（2）—— vue简单语法运用，常用指令集

    按照前面的文章:vue(1)——node.js安装使用,利用npm安装vue  安装完vue之后,就可以使用vue了 vue vue简介 前面安装好vue之后,确实还没有对vue进行介绍,首先,官网: ...

  7. vue简单介绍

    最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在 ...

  8. vue简单demo

    为了学习基础语法,我并没有用vue-cli脚手架来vue init [基于什么类型]  [项目名称]初始化项目,而是直接<script>../vue.js</script> & ...

  9. parcel vue 简单使用

    1.安装依赖 yarn global add parcel-bundler yarn add babel-preset-env --dev yarn add parcel-plugin-vue --d ...

随机推荐

  1. 仿segmentfault-table横向滚动

    问题描述 自己的博客在用移动端访问时,如果table的列数足够多会显示不全,如下图红圈所示 正常情况如图 解决过程 使用chrome发现segmentfault的解决方法是在table上套一个tabl ...

  2. iview 和 Elemet UI 源码比较

    (近期给自己立了个小flag,读源码,每周至少读1篇源码) 下面来谈谈iview 和 Elemet UI 这两个基于Vue 的UI 框架源码的基本结构以及区别. 一.文件结构开发主要放在根文件夹下的s ...

  3. 细说集群技术（Cluster）

    今天本人给大家讲解一些我对集群技术一个理解,如有不对的或者讲的不好的可以多多提出,我会进行相应的更改,先提前感谢提出意见的各位了!!! 集群(Cluster)技术:通过此可以用较低的成本获取较高的性能 ...

  4. Yuchuan_Linux_C编程之一 Vim编辑器的使用

    一.整体大纲 二.Vim 编辑器的使用 vi -- vim    vim是从vi发展过来的一款文本编辑器    vi a.txt    前提: 安装了vim软件 工作模式: 1. 命令模式 -- 打开 ...

  5. 【从零单排HBase 01】从一无所知到5分钟快速了解HBase

    最近公司正好准备投入HBase,因此做了一些基础学习准备,所以先暂时停止MySQL的更新,把HBase的学习心得跟大家分享一下,接下来一段时间都会发布HBase相关内容. 在学的过程中,发现跟MySQ ...

  6. 一起了解 .Net Foundation 项目 No.16

    .Net 基金会中包含有很多优秀的项目,今天就和笔者一起了解一下其中的一些优秀作品吧. 中文介绍 中文介绍内容翻译自英文介绍,主要采用意译.如与原文存在出入,请以原文为准. Orchard CMS O ...

  7. Flutter 裁剪类组件 最全总结

    注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 ClipRect ClipRect组件使用矩形裁剪子组件, ...

  8. python http代理支持 https

    首先需要2个软件来抓包. fiddler : http 代理软件可以分析,抓包,重放. wireshark : 全能抓包分析软件. RFC 提供了非常好的设计描述. https://tools.iet ...

  9. C语言程序设计（七） 函数

    第七章 函数 分而治之: 把较大的任务分解成若干较小.较简单的任务,并提炼出公用任务的方法 函数是C语言中模块化程序设计的最小单位,既可以把每个函数都看作一个模块,也可以将若干相关的函数合并成一个模块 ...

  10. vue缓存当前路由（在输入框中输入信息后，跳转其他路由再回来，仍可看到刚刚输入的内容等）

    缓存路由页面的当前状态:   <transition name="fade" mode="out-in"> <keep-alive> & ...