Web——Vue入门语法总结

阿里 阅读:212 2021-06-09 13:42:02 评论:0
<!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> 

标签:前端
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
排行榜
KIKK导航

KIKK导航

关注我们