1、Vue的创建及基本使用

最新推荐文章于 2023-12-07 15:12:52 发布

hudongdongjava

最新推荐文章于 2023-12-07 15:12:52 发布

阅读量58

点赞数

分类专栏： vue学习文章标签： vue

本文链接：https://blog.csdn.net/u012153127/article/details/111031371

版权

vue学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

变量渲染

使用"{{}}"来引入变量。

<div id="app">
	<div>{{message}}</div>
</div>
<script>
	var data = {
		message:"hello vue"
	};
	var vue = new Vue({
		el:"#app",
		data:data
	});
</script>

元素绑定v-bind

通过v-bind:attributeName可以绑定元素的attribute

<div id="app">
	<div v-bind:title="message">{{message}}</div>
</div>
<script>
	var data = {
		message:"hello vue"
	};
	var vue = new Vue({
		el:"#app",
		data:data
	});
</script>

条件判断，v-if,v-elseif-v-else

<body>
		<div id="app">
			<div v-if="val == 'a'" id="a">a</div>
			<div v-else-if="val == 'b'" id="b">b</div>
			<div v-else>c</div>
		</div>
		
		<script type="text/javascript">
			var app = new Vue({
				"el":"#app",
				data:{
					val:"b"
				}
			});
		</script>
	</body>

for循环v-for

<div id="app">
	<ol>
		<li v-for="todo in todos">{{todo.text}}</li>
		<!--不同写法
		<li v-for="(todo, index) in todos">{{todo.text}}</li>
		<li v-for="(todo, name, index) in todos">{{todo.text}}</li>
		-->
	</ol>
</div>

<script>
	var app = new Vue({
		"el":"#app",
		data:{
			todos:[
				{text:"学习javascript"},
				{text:"学习Vue"},
				{text:"学习helloWorld"}
			]
		}
	});
</script>

单击事件v-on
通过v-on:事件名称来绑定一个事件

<div id="app">
	<button v-on:click="reverseMessage">反转消息</button>
</div>
<script>
	var app = new Vue({
		"el":"#app",
		data:{
			message:"hello"
		},
		methods:{
			"reverseMessage":function() {
				this.message = this.message.split('').reverse().join('');
			}
		}
	});
</script>

数据的双向绑定v-model

当文本框的值改变时，message也会随之改变，当message的值改变时，文本框里的值也会改变。

<div id="app">
	<p>{{message}}</p>
	<input v-model="message" />
</div>
<script>
	var vue = new Vue({
		"el":"#app",
		data:{
			"message":"hello"
		}
	});
			setTimeout(function() {
				app.message = "timeout";
			}, 10000)	
</script>

注册组件

通过Vue.component()方法定义组件

<body>
		<div id="app">
			<div>
				<ol>
					<cmp v-for="item in goodsList" v-bind:goods="item"></cmp>
				</ol>
			</div>
		</div>
		<script>
			var data = {
				goodsList:[
					{text:"奶粉"},
					{text:"数码"},
					{text:"日常用品"}
				]
			};
			
			//注册插件
			Vue.component("cmp", {
				props:["goods"],
				template:"<li>{{goods.text}}</li>"
			});
			
			var vue = new Vue({
				el:"#app",
				data:data
			});
		</script>
	</body>

hudongdongjava

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1、Vue的创建及基本使用

变量渲染使用"{{}}"来引入变量。<div id="app"> <div>{{message}}</div></div><script> var data = { message:"hello vue" }; var vue = new Vue({ el:"#app", data:data });</script>元素绑定v-bind通过v-bind:attributeName可以绑定元素的at
复制链接

扫一扫

专栏目录