Vue.js 一_vue关闭咖啡-CSDN博客

本文链接：https://blog.csdn.net/qq_41821881/article/details/94594801

Vue下载地址开发版本复制代码后自行创建vue.js文件

https://cn.vuejs.org/v2/guide/installation.html

<!DOCTYPE html>
<html>
<head>
	<title>Vue.js</title>
	<script type="text/javascript" src="./vue.js"></script>
</head>
<body>

<!-- {{val}} 数据模板  <h1 v-html='变量  是不解析文本内容'></h1>  v-text解析文本内容 成文本数据-->
<!-- <h1 v-on:要操作的事件    v-on:可简写为  @  例: @click>点击</h1> -->
<!-- v-bind:行内标签名  用来对行内标签进行赋值  可以简写为 : 例:  :title=变量 -->
<!-- v-model 是 input标签用来进行双向绑定的方法  再input文本里面输入数据起到修改变量的作用 包括被变量赋值的数据 -->
<div id="root">
	<h1 v-html='msg' @click="dianji" v-bind:title='val'></h1>
	姓:<input type="text" v-model='firstName' />
	名:<input type="text" v-model='lastName' />
	<div>{{fullName}}</div>
	<div>{{count}}</div>
</div>

</body>
<script type="text/javascript">
	new Vue({
		//获取对象
		el:'#root',
		//内容，参数
		data:{
			val:'Hello Vue',
			msg:'<h2>ce shi</h2>',
			firstName:'',
			lastName:'',
			count:0
		},
		//存放方法的位置
		methods:{
			dianji:function(){
				//可以直接对变量进行赋值，系统自动替换原参数
				this.msg = '新的参数赋值';
			}
		},
		//可以在这里写数据绑定
		// template:"",
		//computed顾名思义是计算方法 
		computed:{
			fullName:function(){
				return this.firstName+ '  ' +this.lastName;
			}
		},
		//监听函数
		watch:{
			firstName:function(){
				return this.count++;
			},
			lastName:function(){
				return this.count++;
			}
		}
	})

</script>
</html>