02-vue的指令

七色的天空

已于 2022-10-29 18:44:09 修改

阅读量385

点赞数

分类专栏： 10_Vue(初学版) 文章标签： vue.js

于 2022-10-28 18:30:50 首次发布

本文链接：https://blog.csdn.net/q506174602/article/details/127547420

版权

10_Vue(初学版) 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

1、v-model

------普通标签绑定v-model

<p>
	<input type="text" v-model="mod">
</p>
<p>
	<!-- 后面只能输入数字，输入其他失去焦点的时候就清空后面不是数字的内容 -->
	number:<input type="text" name="" v-model.number="mod">
</p>
<p>
	<!-- 懒加载：失去焦点的时候执行 -->
	lazy:<input type="text" v-model.lazy="mod">
</p>
<p>
	<!-- 去掉输入框内收尾空格 -->
	trim:<input type="text" v-model.trim="mod">
</p>

------checkbox类型input绑定v-model

<label>
    <!-- 多选框默认是不选中的状态，也就是false.
    我给isTrue定义了true并且双向绑定给这个多选框，
    就改变了原来的默认值，变成了选中的状态 -->
	<input type="checkbox" v-model="isTrue">{{isTrue}}
</label>

上述运行结果:

------多选框绑定多个值

<h3>多选框绑定多个值</h3>
<!--这三个input绑定了一个空数组,arr没有东西,默认就是false,都是不选中状态 -->
<!-- 当checkbox为选中的时候就是true -->
<!-- 为true的时候默认会把value的值放到数组中去 -->
<label>
	<input type="checkbox" v-model="arr" value="张三">张三
</label>
<label>
	<input type="checkbox" v-model="arr" value="李四">李四
</label>
<label>
	<!--
		会隐性的将arr这个变量里面的值与value进行对比，
           如果有李老师那么就删除，false就不选中
	-->
	<input type="checkbox" v-model="arr" value="李老师">李老师
</label>
	<p>
		{{arr}}
	</p>

上述运行结果：

------单选框绑定值

<label>
	<!-- 
		vue实现单选，v-model="sex"   sex：男
		会隐性的将sex这个变量里面的值与value进行对比，如果一致那么就选中
	-->
    <input type="radio" name="s" value="男" v-model="sex">男
</label>
<label>
	<input type="radio" name="s" value="女" v-model="sex">女
</label>
<label>
	<input type="radio" name="s" value="其他" v-model="sex">其他
</label>
<p>
	长江7号：{{sex}}
</p>

上述运行结果：

2、Object.defineProperty（）方法

	/*
		Object.defineProperty(参数1，参数2，参数3):
        这个方法会直接在一个对象上定义一个新属性，            
        或者修改一个对象的现有属性，并返回此对象。
		参数1：要添加的或者要修改的对象
		参数2：要添加的对象的属性
		参数3：是个对象，针对数据的属性进行设置

	*/
	let obj = {}

	// 给obj这个空对象添加一个name属性，并且对这个属性进行设置
	Object.defineProperty(obj, "name", {

		// delete(删除对象的属性)，默认是true,false不可以使用删除属性
		configurable: false,//此时无法使用delete进行属性删除

		// 能否对这个对象for-in/for-of等方法进行必须遍历。
            默认是true,false不可以对对象进行遍历
		enumerable: false,

		// 对象的属性值是否可以进行修改，默认值是true,false不可以修改对象的属性值
		writable: false,

		// 对象的属性值，默认如果没有value属性那么就是undefined
		value: "小明"

	})
	// value属性
	console.log('obj.name的value值',obj.name)

	// writable属性
	obj.name = "小亮"
	console.log(obj.name, "writable属性")

	// enumerable属性
	for (var i in obj) {
		console.log(i, "enumerable属性")
	}
	// configurable属性
	delete obj.name
	console.log(obj.name, "configurable属性")

上述运行结果：

注解：

1.由于writable属性是false，所以obj.name='小亮'未生效。

2.由于enumerable属性是false,所以并没有循环打印。

3.由于configurable属性是false,所以'小明'也没有被删除，依然可以打印。

3、双向绑定的原理

<script type="text/javascript">
	let oInput=document.querySelector("#inp")
	let oP=document.querySelector(".sp")

	let obj={}

	// 给obj这个空对象添加一个name属性，并且对这个属性进行设置
	Object.defineProperty(obj,"name",{
		// 对定义的属性读取的时候会触发get对应的函数，并返回结果
		get:function () {
			
		},
		// set:对定义的属性写入的时候会触发set对应的函数，
        会接受一个参数，并且实时监听这个参数的变化，
        这个参数是动态绑定的值，会变化
		set:function(newVal){
			// 会变化的
			console.log(newVal)
			// input框里面的内容等于实时变化的内容
			oInput.value=newVal
			// p里面的内容等于实时变化的内容
			oP.innerText=newVal
		}
	})
	// change主要用于select选中输出
	// change多选框内容发生改变的时候
	
	oInput.addEventListener("input",function(){
		console.log(oInput.value,"oInput.value")
		// 对象里面的属性等于input里面的属性
		obj.name=oInput.value
	})
	// 默认给对象设置一个值
	obj.name="张三"

	/*
		给input绑定事件，将input里面的值给了对象中的name属性，
        只有input值发生了变化就把值给对象中的name

		然后利用Object.defineProperty方法里面的
        set方法对name这个数据进行监听，
        然后将发生改变的数据给p标签

	*/ 
</script>

4、表单小例子

<body>
	<h1>表单小例子</h1>
	<hr>
	<div id="app">
		<p>
			<label>
				姓名：<input type="text" name="" 
                      v-model="form.name" placeholder="请输入姓名">
			</label>
		</p>
		<p>
			<label>
				年龄：<input type="text" v-model="form.age" 
                      placeholder="请输入年龄">
			</label>
		</p>
		<p>
			性别：
			<label>
				<input type="radio" name="s" v-model="form.sex" value="男">男
			</label>
			<label>
				<input type="radio" name="s" v-model="form.sex" value="女">女
			</label>
		</p>
		<!-- @click绑定点击事件，触发btnClick函数-->
		<input type="submit" value="提交" @click="btnClick">
		<p>
			{{obj.name}}--
			{{obj.age}}--
			{{obj.sex}}--
		</p>
	</div>
</body>

</html>

<script type="text/javascript">
	// 构建出一个vue实例
	var app = new Vue({
		el: "#app",
		// 存储数据变量
		data: {
			form: {
				name: "",
				age: "",
				sex: ""
			},
			obj: {
				name: "",
				age: "",
				sex: ""
			}
		},
		// 存放函数的地方
		methods: {
			// fn:function () {

			// },
			// fn2:function(){

			// }
			// 简写
			// fn(){}

			btnClick() {
				// this.obj.name=this.form.name
				// this.obj.age=this.form.age
				// this.obj.sex=this.form.sex
				// 简写
			       this.obj=this.form
                

                






				// 模拟ajax请求数据，请求成功之后




				//setTimeout(() => {
				//	let objList = {
				//		name: "王付玉",
				//		age: 52,
				//		sex: "女"
				//	}
					// 把后端请求的数据给data中定义的obj变量
				//	this.obj = objList
				}, 3000)

				/*
					在函数中请求后端数据，
                    将请求成功的数据赋值给data中定义的变量，
                    然后将变量用插值的方法渲染到页面
				*/
			},
		}
	})

	/*
		在普通函数中的this属于直接调用者：
        比如btn.onclick=function(){}，这个函数中的this属于btn。
		如果默认情况下没有找到调用者，则this属于window
		在严格情况下没有直接调用者this是undefined
		箭头函数中this属于所处的对象。

		构造函数中的this是new出来的那个对象
	*/
</script>

上述运行结果：

5、v-text与v-html

<div id="app">
	<!-- 
		v-html：以代码的形式输出 相当于js中的innerHTML
		v-text：以文本的形式输出 相当于js中的innerText
	-->
	    <input type="text" name="" v-model="msg">
	    <!-- v-once：给谁绑定这个指令，
        那么这个指令就只【渲染一次】，
        包括元素或者组件所有的子节点。
        首次渲染后，不会随着数据的变化而重新渲染。视为静态内容 -->
		<div v-html="msg"></div>
		<div v-text="msg" v-once></div>
		{{msg}}
		<!-- 区别：插值渲染与v-text渲染数据虽然相同,
        但是当js报错的时候,v-text不会暴露代码 -->
</div>

6、v-if与v-show

<div id="app">
		<!-- v-if判断是否加载这个p标签 -->
		<p v-if="true">
			我是v-if
		</p>
		<p v-if="false">
			我是dog
		</p>
        //如果v-if=""，相当于没有v-if，只有p标签
		<p v-if="">
			我是小亮
		</p>
        //v-else 元素必须紧跟在带 v-if 或者 
        v-else-if 的元素的后面，否则它将不会被识别。
		<p v-else>
			我是v-else
		</p>

		<!-- 根据多个条件进行加载 假定msg='E'-->
		<h3 v-if="msg=='A'">我是A</h3>
		<h3 v-else-if="msg=='B'">我是B</h3>
		<h3 v-else-if="msg=='C'">我是C</h3>
		<h3 v-else-if="msg=='D'">我是D</h3>
		<h3 v-else>啥也不是</h3>

		<!-- v-show加载完成，只是改变了display的显示隐藏 -->
		<p v-show="true">
			我是小明
		</p>
	</div>
	<!-- 
		v-if与v-show的区别？
		v-if判断的是元素是否加载渲染到页面上
		v-show是加载完成之后，判断元素是否显示与隐藏，实际改变的是
		display的显示隐藏样式
	 -->

上述运行结果：

7、v-for

v-for 具体想要生成谁，就把v-for写在谁身上

<div id="app">
	<!-- v-for 具体想要生成谁，就把v-for写在谁身上  -->
	<!-- 
		语法：v-for="item in arr" 
		v-for="数组循环后每条数据的别名(随便起的) in data中定义的变量名称也就是数组"
	-->
	<ul>
        //arr: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"]
		<li v-for="item in arr">
			{{item}}
		</li>
	</ul>
</div>

上述运行结果：

<!-- 
	语法：v-for="(item,index) in arr"
	v-for="(数组循环后每条数据的别名,每条数据的索引下标--从0开始) 
    in data中定义的变量名称也就是数组"
-->
	<ul>
		<li v-for="(ccc,i) in arr">
			{{i}}---{{ccc}}
		</li>
	</ul>

上述运行结果：

<!-- 只要遇到v-for就给他加上:key="index" 
使用key属性可以让diff算法更高效，提高渲染效率。-->
<ul>
	<li v-for="(item,index) in stu" :key="index">
		<span>{{index+1}}---姓名：{{item.name}}</span>
		<span>{{index+1}}---性别：{{item["sex"]}}</span>
		<span>{{index+1}}---年龄：{{item["age"]}}</span>
		<span>{{index+1}}---学校：{{item.sch}}</span>
	</li>
</ul>

var app = new Vue({
		el: "#app",
		data: {
			stu: [{
					name: "小红",
					age: 18,
					sex: "女",
					sch: "北京大学"
				},
				{
					name: "小亮",
					age: 19,
					sex: "男",
					sch: "南京大学"
				},
				{
					name: "小明",
					age: 20,
					sex: "男",
					sch: "东京大学"
				},
			],
			arr: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"]
		}
	})


	/*
js的写法：
	for(var i=0;i<arr.length;i++){
		// 第一种方法
		// ul.innerHTML+=`<li>${arr[i]}</li>`

		// 第二种方法
		var oli = document.createElement('li');
		oli.innerText=arr[i]
		ul.appendChild(oli)
	}
*/

上述运行结果：

<table width="500" border="1" cellpadding="0" cellspacing="0">
	<tr>
		<th>序号</th>
		<th>姓名</th>
		<th>性别</th>
		<th>年龄</th>
		<th>学校</th>
		<th>操作</th>
	</tr>
	<tr v-for="(item,index) in stu" :key="index">
		<td>{{index+1}}</td>
		<td>{{item.name}}</td>
		<td>{{item.sex}}</td>
		<td>{{item.age}}</td>
		<td>{{item.sch}}</td>
		<td>
			<a href="">删除</a>
		</td>
	</tr>
</table>

<!-- 
	1 v-for里面的key的作用？
		:key代表的是唯一，不加key会在项目中报警告,渲染的时候会出现渲染错位。
        key的作用主要是为了高效更新虚拟dom，
        其目的是为了让vue可以区分他们，加上key属性有利于代码优化，减少资源浪费

	2 v-if与v-for能在一起使用吗？

		能，但是不建议使用，因为v-for优先级比v-if高，
        带来性能方面的浪费。（每次渲染都会先循环在进行条件判断）
        循环了一万条数据，准备显示到页面上了
	    v-if判断是个false:不加载,不用渲染页面了
-->

上述运行结果：