Web——Vue入门语法

<!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>
### Vue.js 快速入门教程 #### 创建第一个 Vue 实例 要开始使用 Vue.js,首先需要引入 Vue 库。可以通过 CDN 或者 npm 安装来获取 Vue。 ```html <!-- 使用CDN --> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> ``` 接着,在 HTML 文件中定义一个容器元素,并通过 JavaScript 初始化一个新的 Vue 实例[^1]: ```javascript new Vue({ el: '#app', data: { message: 'Hello Vue!' } }); ``` 对应的HTML结构如下所示: ```html <div id="app"> {{ message }} </div> ``` 这会将 `message` 变量的内容显示在页面上。 #### 数据绑定与插值表达式 Vue 提供了多种方式来进行数据绑定,最常见的是双大括号语法用于文本插值。上述例子中的 `{{ message }}` 就是一个典型的用法,当 `data` 中的数据发生变化时,视图也会自动更新[^2]。 #### 列表渲染 对于动态列表的展示,可以利用 v-for 指令遍历数组并生成 DOM 结构。例如创建一个待办事项的应用程序,其中包含一组任务项: ```javascript new Vue({ el: '#todo-list', data: { todos: [ { text: '学习JavaScript' }, { text: '掌握Vue框架' }, { text: '构建Web应用程序'} ] } }) ``` 配合模板部分实现循环输出: ```html <ul id="todo-list"> <li v-for="(todo, index) in todos" :key="index">{{ todo.text }}</li> </ul> ``` 这里的关键点在于 `v-for` 和 `:key` 属性的运用,前者用来迭代对象或数组,后者则作为唯一标识符提高性能优化. #### 处理用户输入和事件监听 为了响应用户的操作行为,比如点击按钮触发函数执行,可借助于 `v-on` 指令完成事件绑定工作。下面的例子展示了如何添加新条目到现有的待办事宜列表里去: ```javascript methods: { addTodo(newTodoText){ this.todos.push({text:newTodoText}); } } ``` 关联至界面控件上的方法调用形式为: ```html <input type="text" v-model="newTodoText"/> <button @click="addTodo">Add Todo</button> ``` 此处涉及到了两个重要概念——双向数据流(`v-model`)以及自定义组件内部的方法声明(methods). MVVM架构下的Vue实例充当着ViewModel的角色,负责协调View层(即UI界面)同Model层(业务逻辑/状态管理)之间的通信过程[^3].
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值