Web——Vue入门语法

最新推荐文章于 2025-07-23 15:35:49 发布

何惜戈

最新推荐文章于 2025-07-23 15:35:49 发布

阅读量284

点赞数

CC 4.0 BY-SA版权

分类专栏： WEB 文章标签： vue 入门

本文链接：https://blog.youkuaiyun.com/qq_37049781/article/details/98787736

WEB 专栏收录该内容

13 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue 入门</title>
	<script src="https://cdn.bootcss.com/vue/2.5.3/vue.js"></script>
</head>
<body>
	<!--变量在data中定义 使用时用双大括号-->
	<div id="root1">{{msg}}</div>
	<script>
		// 声明一个vue对象
		new Vue({
			el:"#root1",
			data:{
				msg:"this is my coat !"
			}
		})
	</script>


	<div id="root2">
		<!-- v-text 不会转义 -->
		<h1 v-text="text"></h1>
		<!-- v-html 会自动转义 -->
		<h2 v-html="text"></h2>
	</div>
	<script>
		new Vue({
			el:"#root2",
			data:{
				text:"<p>yes it is !</p>"
			}
		})
	</script>

	<!-- 绑定事件 -->
	<div id="root3" :title="title"> 
		<!-- @ v-on的简写，绑定事件
		     : v-bind的简写，绑定属性
		      v-model 双向绑定-->	
		<div @click="myfunction">{{msg}}</div>
		<input :placeholder="password" type="password" name="pd" v-model="password" />
		<p>您的密码是：{{password}}</p>
	</div>
	<script>
		new Vue({
			el:"#root3",
			data:{
				title:"这是一个测试例子",
				msg:"nice to meet you !",
				action:"请输入密码：",
				password:""
				// msg1:password,
			},
			// 方法定义
			methods:{
				myfunction: function() {
					this.msg = "nice to meet you too !"
				}
			}
		})
	</script>
	
	<!--计算属性与监听器-->
	<div id="root4">
		<input v-model="firstname"/>
		<input v-model="lastname"/>
		<div>my name is {{fullname}}</div>
		<div>修改次数：{{count}}</div>
	</div>
	<script>
		new Vue({
			el: "#root4",
			data: {
				firstname: '',
				lastname: '',
				count:0
			},
			// 计算属性定义 适用于一个数据受多个数据影响
			computed: {
				fullname: function() {
					return this.firstname + ' ' + this.lastname
				}
			},
			// 监听器  适用于一个数据影响多个数据
			watch: {
				fullname:function(){
					this.count ++
				}
			}
		})
	</script>
	
	<!--条件及循环语句-->
	<div id="root5">
		<!-- v-if 根据条件直接从dom中清除 -->
		<!-- <div v-if="show">hello world</div> -->
	
		<!-- v-show 对元素进行隐藏 -->
		<div v-show="show">hello world</div>
		
		<button @click="handleClick">toggle</button>
		<ul>
			<!-- <li v-for="item of list">{{item}}</li> -->
			<!-- key值效率更高，但不能相同 -->
			<li v-for="(item, index) of list":key="index">{{item}}</li>
		</ul>
	</div>

	<script>
		new Vue({
			el: "#root5",
			data: {
				show: false,
				list: ['a','b','c']
			},
			methods: {
				handleClick: function() {
					this.show = !this.show
				}
			}
		})
	</script>

	<!--插入与删除-->
	<div id="root6">
		<ul>
			<li v-for="(item, index) of list" :key="index">
				{{item}}&emsp;<button @click="removevalue(index)">移除</button>
			</li>
			<input v-model="inputvalue"/>
			<button  @click="insertvalue">添加</button>
		</ul>
	</div>
	<script>
		new Vue({
			el: "#root6",
			data: { 
				inputvalue: "",
				list: []
			},
			methods: {
				insertvalue: function () {
					this.list.push(this.inputvalue)
					this.inputvalue = ""
				},
				removevalue: function (index) {
					this.list.splice(index,1)
				}
			}
		})
	</script>

</body>
</html>

组件及传值

<!DOCTYPE html>
<html>
<head>
	<title>todolist2</title>
	<script src="https://cdn.bootcss.com/vue/2.5.3/vue.js"></script>
</head>
<body>
	<div id="root">
		<ul>
			<todo-item
			 v-for="(item,index) of list"
			 :key="index"
			 :content="item"
			 ></todo-item>
			<input v-model="inputvalue"/>
			<button  @click="insertvalue">添加</button>
		</ul>
	</div>
	<script>
		// 全局组件 在任何vue实例中都可以直接使用
		// 组件通过props接受外部传入的参数
		Vue.component("todo-item", {
			props: ['content'],
			template: "<li>{{content}}</li>"
			// 每个组件都相当于一个vue实例
			// data: { 
			// },
			// methods: {

			// }
		})

		// 私有组件
		// var TodoItem = {
		// 	template: "<li>{{content}}</li>",
		// 	props: ['content']
		// }

		new Vue({
			el: "#root",
			// components: {
			// 	'todo-item': TodoItem
			// },
			data: { 
				inputvalue: "",
				list: []
			},
			// 如果实例中没有定义模板，那么他会寻找挂载点下的所有内容作为实例的模板
			// template: ...
			methods: {
				insertvalue: function () {
					this.list.push(this.inputvalue)
					this.inputvalue = ""
				},
				removevalue: function (index) {
					this.list.splice(index,1)
				}
			}
		})
	</script>
</body>
</html>

父子组件

<!DOCTYPE html>
<html>
<head>
	<title>todolist3</title>
	<script src="https://cdn.bootcss.com/vue/2.5.3/vue.js"></script>
</head>
<body>
	<div id="root">
		<ul>
			<todo-item
			 v-for="(item,index) of list"
			 :key="index"
			 :content="item"
			 :index="index"
			 @delete="handleDelete"
			 ></todo-item>
			<input v-model="inputvalue"/>
			<button  @click="insertvalue">添加</button>
		</ul>
	</div>
	<script>
		// 父组件以属性的方式向子组件传值，以@的方式监听子组件的发布
		Vue.component("todo-item", {
			props: ['content','index'],
			template: '<li @click="handleClick">{{content}}</li>',
			methods: {
				handleClick: function(){
					this.$emit('delete', this.index)
				}
			}
		})

		new Vue({
			el: "#root",
			data: { 
				inputvalue: "",
				list: []
			},
			methods: {
				insertvalue: function () {
					this.list.push(this.inputvalue)
					this.inputvalue = ""
				},
				handleDelete: function(index){
					this.list.splice(index,1)
				}
			}
		})
	</script>
</body>
</html>