vue简单使用

Vue:

Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架

Vue 只关注视图层, 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应式的数据绑定和组合的视图组件。

 官方网站:点击打开链接

引入:<script>引入

引入vue.js文件即可简单使用:

简单demo: 

     数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值. 
    也可以使用指令用于输出代码,例如看到的 v-html 特性被称为指令。指令带有前缀 v-,以表示它们是 Vue 提供的特殊特性。它们会在渲染的 DOM 上应用特殊的响应式行为
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>vue起步</title>
</head>
	<script type="text/javascript" src="./plugins/vue/vue.js"></script>
<body>

	<div id="demo">
		<h5>name:{{name}}</h5>
		<h5 v-html="age"></h5>
		<h5>调用方法:{{getWord()}}</h5>
	</div>
</body>
	<script type="text/javascript">
		var data = {name: 'admin', age: '20'};	//数据对象
		var vm = new Vue({	//创建一个vue实例
			el: '#demo',	//DOM 元素中的 id
			data: data,
			methods: {
				getWord: function(){
				    return this.name + " :这是我的vue入门方法";	//可以通过 return 来返回函数值, 也可做一些业务处理
				}
			}
		});
		
		document.write(vm.name == data.name);	//true, 他们引用的对象是一样的	
		document.write("<br/>");
		vm.age='100';				//修改属性值也会影响到原始数据, 反之一样
		document.write(data.age + "<br/>");
		
		//Vue 实例中的属性与方法。都可以加前缀 $,以便与用户定义的属性区分开来
		document.write(vm.$el == document.getElementById('demo')); //true
	</script>
</html>

运行结果:

        

猜你喜欢

转载自blog.csdn.net/qq_42402854/article/details/80839852