Vue基础随笔

最新推荐文章于 2021-08-28 18:21:07 发布

wzdlanlj

最新推荐文章于 2021-08-28 18:21:07 发布

阅读量145

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/WuZhiDeFKun/article/details/89520578

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

基础语法

//1.引入Vue核心JS文件,Vue会被当做全局变量使用
<head>
	<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
	<div>{{msg}}</div>
			<div>{{msg.split("").reverse().join("")}}</div> <!--字符串方法操作-->
			<div>{{num + 1}}</div> <!--数值运算-->
			<div>{{flag?"喜欢":"不喜欢"}}</div> <!--三目运算符-->
</body>
	<script type="text/javascript">
		var app = new Vue({
			el:"#app", // el：element的简写。挂载元素，绑定id为app的html元素
			data:{ // 定义数据
				msg:"Hello Vue！"
			}
	});
</script>

文本渲染

v-text显示数据，响应式（默认）：{{内容}}

<div id="app">
			<div v-text="msg"></div>
			<!--简写-->
			<div>{{msg}}</div>
			<hr />
			<div v-once>{{txt}}</div>
			<hr />
			<div>{{tpl}}</div>
			<div v-html="tpl"></div>
</div>
<script type="text/javascript">
		var app = new Vue({
			el:"#app",
			data:{
				msg:"Hello",
				txt:"Hello Vue",
				tpl:"<h2>上海</h2>"
			}
		});
</script>

3.bind指令

v-bind指令可以绑定元素的属性，动态给属性赋值。
比如：v-bind:class、v-bind:style、v-bind:href形式。
v-bind的简写形式：
v-bind:属性名=“组件中定义的数据”

<div id="app">
			<div title="你好">Hello</div>
			<hr />
			<div v-bind:title="msg">你好，我是大尤，你觉得Vue怎么样？</div>
			<div :title="msg">你好，我是大尤，你觉得Vue怎么样？</div>
			<hr />
			<img :src="src"/>
			<a :href="href">Vue</a>
		</div>
</body>
<script type="text/javascript">
	var app = new Vue({
		el:"#app",
		data:{
			msg:"Vue is very good",
			src:"https://cn.vuejs.org/images/logo.png",
			href:"https://cn.vuejs.org/"			
		}
	});
</script>

4.class绑定

<div id="app">
		<div class="red green item">Vue</div>
		<hr />
		<div :class="{red:true,green:false,item:true}">Vue</div>
		<div :class="classObj">Vue</div>
		<div :class="classList">Vue</div>
	</div>
</body>
<script type="text/javascript">
var app = new Vue({
		el:"#app",
		data:{
			classObj:{
				red:true,
				green:false,
				item:true
			},
			classList:["red","item","test"]
		}
	});
</script>

style绑定

绑定形式跟class一致

<div id="app">
		<div style="color:red;font-size: 30px;">我是文本</div>
		<div :style="{'color':'red','font-size':'30px'}">我是文本</div>
		<div :style="styleObj">我是文本</div>
		<div :style="[styleObj,styleObj2]">我是文本</div>
	</div>
</body>
<script type="text/javascript">
	var app = new Vue({
		el:"#app",
		data:{
			styleObj:{
				'color':'red',
				'font-size':'30px',
				'font-family':'楷体'
			},
			styleObj2:{
				'background':'pink'
			}
		}
	});
</script>

监听事件

语法：
v-on:事件名
简写：
@事件名

<div id="app">
	count:{{count}} &nbsp;
	event对象

<!--Event对象代表事件的状态，比如事件在其中发生的元素，键盘按键的状态、
鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会再事件发生前执行。-->
	<button @click="addCount($event)">add</button>
	<button @click="downCount">down</button>
</div>
<script type="text/javascript">
	var app = new Vue({
		el:"#app",
		data:{
			count:0
		},
		methods:{
			addCount:function(e){
				console.log(e);
				console.log(e.target.tagName);
				this.count++;
		},
			downCount:function(){
				this.count--;
			}
		}
	});
</script>

事件修饰符

在事件处理程序中调用 event.preventDefault()（阻止元素发生默认行为）或 event.stopPropagation()（阻止事件冒泡到父元素）是非常常见的需求。
为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。通过由点 (.) 表示的指令后缀来调用修饰符。
stop ：阻止event冒泡，等效于event.stopPropagation()
prevent ：阻止event默认事件，等效于event.preventDefault()
capture ：事件在捕获阶段触发
self ：自身元素触发，而不是子元素触发
once ：事件只触发一次

<div id="app">
		<div @click="father">
			<div @click="child">child</div>
		</div>
		<hr />
		<!--stop ： 阻止event冒泡，等效于event.stopPropagation(-->
		<div @click="father">
			<div @click.stop="child">child</div>
		</div>
		<hr />
	
		<!--prevent ： 阻止event默认事件，等效于event.preventDefault()-->
		<a href="http://www.baidu.com" @click.prevent="prevent1">百度</a>
		<hr />	
		<!--capture ： 事件在捕获阶段触发-->
		<div @click.capture="father">
			<div @click.capture="child">child</div>
		</div>		
		<!--self ： 自身元素触发，而不是子元素触发-->
		<hr />
		<div @click.self="father">
			father
			<div @click="child">child</div>
		</div>
		<hr />
		
		<!--once ： 事件只触发一次-->
		<div @click.once="child">child</div>
	</div>
<script type="text/javascript">
	var app = new Vue({
		el:"#app",
		data:{	
		},
		methods:{
			father:function(){
				console.log("父元素...");
			},
			child:function(){
				console.log("子元素...");
			},
			prevent1:function(){
				console.log("666....");
			}
		}
	});
</script>

键值修饰符

键值修饰符
在监听键盘事件时，我们经常需要监测常见的键值。Vue 允许为 v-on 在监听键盘事件时添加关键修饰符：
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

<div id="app">
		<form action="http://www.shsxt.com">
		<input v-on:keyup.enter="submit">	
		<!-- 只有在 keyCode 是 13 时调用 submit() -->
		<input v-on:keyup.13="enterKey">
		</form>
	</div>
</body>
<script type="text/javascript">
	var app = new Vue({
		el:"#app",
		data:{		
		},
		methods:{
			enterKey:function(){
				console.log("enter...");
			}				
		}		
	});
</script>

条件渲染

1、v-if
当条件返回true时，执行
2、v-else
当if条件不满足时，执行（要结合v-if一起使用）
3、v-else-if
当满足条件时执行（要结合v-if一起使用）
4、v-show
满足条件时显示，不满足隐藏
v-if 和 v-show
两者的区别是v-if是“真正”的条件渲染，只有为true时才会被渲染。v-if也是“惰性”的，假如初始条件为false，那么条件变为true时才会发生第一次渲染。
v-show只是CSS的display属性的切换，不论初始条件是否成立，都会进行html渲染，然后改变display的值为none或者block。
一般来说v-if开销比较大，如果需要频繁切换显示不显示使用v-show，需要进行条件判断的但是改变很少的使用v-if。

<div id="app">
	<div v-if="flag">你能看见我！</div>
	&nbsp; {{flag}}
	<hr />
	<h3 v-if="age==18">
		张三是18岁
	</h3>
	<h3 v-else>
		张三不是18岁
	</h3>
		<hr />
	<h3 v-if="age>18">
		成年啦
	</h3>
	<h3 v-else>
		小屁孩
	</h3>
	<hr />
	<h4 v-show="flag">你能看见我！</h4>		
</div>
<script type="text/javascript">
	new Vue({
		el:"#app",
		data:{
			flag:false,
			age:18
		}
	});	
</script>

10.列表渲染

v-for
可以把一组值进行列表渲染，语法形式： item in items，
items 是源数据数组并且 item 是数组元素迭代的别名。
在 v-for 块中，对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。
v-for也可以遍历对象，可以指定三个形参:
形式: v-for="(value, key, index) in object"
value: 对象的值
key: 对象的键
index: 遍历的索引

<div id="app">
		<ul>
			<li v-for="item in items">{{item.name}}</li>
		</ul>
		<hr />
		<ul>
			<li v-for="(item,index) in items">{{type}}--{{index}}--{{item.name}}</li>
		</ul>
		<hr />
		<ul>
			<li v-for="(value,key,index) in person">{{index}}--{{key}}--{{value}}</li>
		</ul>
	</div>
<script type="text/javascript">
	new Vue({
		el:"#app",
		data:{
			type:"水果",
			items:[
	               {name:'西瓜'},
	               {name:'苹果'},
	               {name:'菠萝'}
            ],
        	person:{
                name:'Tim',
                age:12,
                love:'music'
            }
		}
	});		
</script>

10.1 splice(index,len,[item])

splice(index,len,[item])删除

**//删除起始下标为1，长度为1的一个值(len设置1，如果为0，则数组不变)**
var arr = ['a','b','c','d'];
arr.splice(1,1);
console.log(arr);  
//['a','c','d'];

splice替换

//替换起始下标为1，长度为2的两个值为‘ttt’，len设置的1
var arr2 = ['a','b','c','d'];
arr2.splice(1,2,'ttt');
console.log(arr2);       
//['a','ttt','d']

添加

//在下标为1处添加一项'ttt'
var arr = ['a','b','c','d'];
arr.splice(1,0,'ttt');
console.log(arr);        
//['a','ttt','b','c','d']

下拉框绑定

v-model
用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值。因为它会选择 Vue 实例数据来作为具体的值。通过 JavaScript 在组件的 data 选项中声明初始值。
单个使用时v-model是逻辑值：true和false，多个一起使用需要指定value值，选中结果绑定v-model的数组。

<div id="root">
		<select v-model="selected">
			<option v-for="item in list" :value="item.value">{{item.text}}</option>
		</select>			
</div>
<script type="text/javascript">
	var app = new Vue({
		el:"#root",
		data:{
			 list:[
	               {text:'西瓜', value:'1'},
	               {text:'苹果', value:'2'},
	               {text:'菠萝', value:'3'}
	           ],
	           selected:3
		}		
	});
</script>

修饰符

使用v-model绑定数据后，可以使用修饰进行数据处理：
.lazy：绑定数据默认实时更新，lazy可以在onChange触发
.number：返回数字类型的值，转换不成返回NaN
.trim：去除数据的前后空格

<div id="app">
	    <p><input type="text" v-model.lazy="name">{{name}}</p>
	    <p><input type="text" v-model.number="age"></p>
	    <p><input type="text" v-model.trim="cont"></p>
	    <p><button @click="show();">显示值</button></p>
</div>
<script type="text/javascript">
	new Vue({
		el:"#app",
		data:{
			name:"",
			age:"",
			cont:""
		},
		methods:{
			show:function(){
				console.log(this.name);
				console.log(typeof this.age);
				console.log(this.age);
				console.log(this.cont);
			}
		}
	});
</script>

组件

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。

Vue自定义组件分为两种：全局注册和局部注册，全局组件可以在任何地方引用，局部组件只能在当前Vue实例使用。
1）全局注册
使用Vue.component(tagName, options)来定义：
1）局部注册
在Vue实例中使用components属性来定义：
注意：HTML 特性是不区分大小写的，所有在定义组件时尽量使用中划线“-”来指定组件名。
即使，使用了驼峰标示命名如：myComponent，在页面引用时仍然要使用进行引用。

注意：HTML 特性是不区分大小写的，所有在定义组件时尽量使用中划线“-”来指定组件名。
即使，使用了驼峰标示命名如：myComponent，在页面引用时仍然要使用进行引用。

<div id="app">
		<my-hello></my-hello>
</div>
<div id="root">
<!--使用组件-->
	<my-hello></my-hello>
	<my-hello></my-hello>
	<my-hello></my-hello>
<!--	<my-hello/>--> <!--不推荐使用-->
	<my-hello></my-hello>		
	<inner-hello></inner-hello>
</div>
<script type="text/javascript">
	/*定义全局组件*/
	Vue.component("my-hello",{
		template:"<h3>Hello Vue</h3>"
	});
	new Vue({
		el:"#app"
	});
	new Vue({
		el:"#root",
		components:{
			"inner-hello":{
				template:"<h3>我是局部组件</h3>"
			}
		}
	});
</script>

模板

当模板的html结构比较复杂时，直接在template属性中定义就不现实了，效率也会很低，此时我们可以使用模板，定义模板的四种形式:
1)直接使用字符串定义
2)使用

<div id="app">
		<my-hello1></my-hello1>
		<my-hello2></my-hello2>
		<my-hello3></my-hello3>
		<my-hello4></my-hello4>
</div>
		
<!--2)使用<script type="text/x-template">-->
	<script type="text/x-template" id="tpl3">
		<ul>
		       <li>01</li>
		       <li>02</li>
		   </ul>
	</script>
<!--3)使用<template>标签-->
	<template id="tpl4">
		<ul>
		       <li>011</li>
		       <li>022</li>
	    </ul>
	</template>
		
<script type="text/javascript">
	/*1)直接使用字符串定义*/
	var tpl = "<div><button>按钮</button><span>Hello</span></div>";
	var tpl2 = `
		<div>
		<button>按钮2</button>
		<span>Hello2</span>
		</div>
	`;
	console.log(tpl2);
	// 定义组件
	Vue.component("my-hello1",{
		template:tpl
	});
	Vue.component("my-hello2",{
		template:tpl2
	});
	Vue.component("my-hello3",{
		template:"#tpl3"
	});
	Vue.component("my-hello4",{
		template:"#tpl4"
	});
	new Vue({
		el:"#app"
	});	
</script>

其他

	<style>
		* {
			margin: 0 auto;
		}
		
		#tb1 {
			border: 1px solid pink;
			text-align: center;
		}
			
		table th {
			background: pink;
		}
	</style>
	<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
	<div id="app" :style="divsty">
		<form action="" method="post">
			<fieldset>
				<legend>
					<h3>学生信息录入系统</h3></legend>
				<label>姓名:</label><input type="text" v-model="lrsj.uname" placeholder="请输入姓名" /><br />
				<label>年龄:</label><input type="text" v-model="lrsj.uage" placeholder="0" /><br />
				<label>性别:</label>
				<select v-model="lrsj.usex">
					<option selected="selected">男</option>
					<option>女</option>
				</select><br />
				<label>手机:</label><input type="text" v-model="lrsj.uphone" placeholder="请输入手机号码" /><br />
				<button @click="btncl1" type="button">创建新用户</button>
		</fieldset>
	</form>
	<table id="tb1" width="100%">
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
				<th>手机</th>
				<th>删除</th>
			</tr>
			<tr v-for="(item,index) in lists">
				<td>{{item.uname}}</td>
				<td>{{item.usex}}</td>
				<td>{{item.uage}}</td>
				<td>{{item.uphone}}</td>
				<td><button type="button" @click="btncl2(index)">删除</button></td>
			</tr>
		</table>
	</div>
</body>
<script>
	var app = new Vue({
		el: "#app",
		data: {
			divsty: {
				'width': '800px',
				'height': '500px',
			},
			lrsj: {
				uname: "",
				uage: "",
				usex: "男",
				uphone: ""
			},
			lists: [{
					uname: "张三",
					usex: "男",
					uage: 20,
					uphone: "15473124380"
				}, {
					uname: "李四",
					usex: "男",
					uage: 12,
					uphone: "15373124380"
				},
				{
					uname: "王五",
					usex: "男",
					uage: 23,
					uphone: "15473124380"
				}, {
					uname: "赵六",
					usex: "女",
					uage: 10,
					uphone: "15373124380"
				}
				]
			},
		methods: {
			btncl1: function() {
				this.lists.push({
					uname: this.lrsj.uname,
					usex: this.lrsj.usex,
					uage: this.lrsj.uage,
					uphone: this.lrsj.uphone
				});
				//					this.lists.push(this.lrsj);
				this.lrsj = {
					usex: '男'
				}
			},
			btncl2: function(e) {
				this.lists.splice(e, 1);
			}
		}
		})
</script>

	<meta charset="UTF-8">
	<title></title>
	<script type="text/javascript" src="js/vue.js"></script>
	<style>
		* {
			margin: 0 auto;
		}
	
		table {
			text-align: center;
			width: 500px;
		}
	</style>
</head>
<body>
	<div id="app">
		<table border="1" cellspacing="0">
			<tr>
				<th>编号</th>
				<th>名称</th>
				<th>单价</th>
				<th>数量</th>
				<th>操作</th>
			</tr>
			<tr v-for="(item,index) in slists">
				<td>{{item.sno}}</td>
				<td>{{item.sname}}</td>
				<td>{{item.sprice}}</td>
				<td><button @click="btnDown(item)">-</button>{{item.snum}}<button @click="btnUp(item)">+</button></td>
				<td><button @click="btnDel(index,item)">删除</button></td>
			</tr>
			<tr>
				<td colspan="5">总金额:{{ssum}}</td>
			</tr>
		</table>
	</div>
</body>
<script>
	var app = new Vue({
		el: "#app",
		data: {
			sp: {
				sno: 0,
				sname: "",
				sprice: "",
				snum: 0
			},
			slists: [{
				sno: 1,
				sname: "锤子",
				sprice: 10,
				snum: 1
			}, {
				sno: 2,
				sname: "毛线",
				sprice: 20,
				snum: 2
			}, {
				sno: 3,
				sname: "铲子",
				sprice: 15,
				snum: 1
			}],
			ssum: 65
		},
		methods: {
			btnUp: function(item) {
				console.log(item);
				item.snum++;
				this.ssum += item.sprice;
			},
			btnDown: function(item) {
				if(item.snum > 0) {
					item.snum--;
					this.ssum -= item.sprice;
				} else {
					alert("数量不能小于0");
				}
			},
				btnDel: function(e, item) {
				console.log(item.sprice);
				console.log(item.snum);
				this.ssum -= item.sprice * item.snum;
				this.slists.splice(e, 1);
			}
		}
	})
</script>

wzdlanlj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础随笔

基础语法//1.引入Vue核心JS文件,Vue会被当做全局变量使用<head> <script type="text/javascript" src="js/vue.js" ></script></head><body> <div>{{msg}}</div> <div>{{msg....
复制链接

扫一扫