Vue2入门学习_day02

风都有归宿@

已于 2024-01-05 14:38:38 修改

阅读量948

点赞数 19

分类专栏：前端学习文章标签： vue.js 学习前端

于 2024-01-05 14:37:40 首次发布

本文链接：https://blog.csdn.net/ITisit1/article/details/135372277

版权

前端学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.Vue基础语法

1.Vue模板语法

插值语法：用于解析标签体内容。
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
指令语法：用于解析标签(包括：标签属性、标签体内容、绑定事件…)。
v-bind:href=“xxx” 或简写为 :href=“xxx”，xxx同样要写js表达式，且可以直接读取到data中的所有属性。

 <div id="root">
        <h1>hello{{name.toUpperCase()}},{{address}}</h1>
    	 <a v-bind:href="url">百度</a>
    	//简写形式
    	//<a :href="url">百度</a>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                name: 'Vue',
                address: '北京',
                url: 'http://www.baidu.com'
            }
        })
    </script>

2.数据绑定

Vue中有2种数据绑定的方式：
单向绑定(v-bind)：数据只能从data流向页面。
双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。
备注：
双向绑定一般都应用在表单类元素上(如：input、select等)
v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

 <div id="model">
            单项数据绑定: <input class="one" type="text" v-bind:vaule="name">
            <br>
        	<!--普通写法-->
            <!-- 双向数据绑定: <input class="two" type="text" v-model:value="age"> -->
       		<!--简易写法-->
            双向数据绑定: <input class="two" type="text" v-model="age">
    </div>
    <script>
        new Vue({
            el: "#model",
            data: {
                name: '张三',
                age: 223
            }
        })
    </script>

3.mvvm模型

M：模型(Model) ：data中的数据
V：视图(View) ：模板代码
VM：视图模型(ViewModel)：Vue实例

观察发现：
data中所有的属性，最后都出现在了vm身上。
vm身上所有的属性及Vue原型上所有属性，在Vue模板中都可以直接使用。

   <div class="demo1">
         <h1>{{name}}</h1>
         <h1>{{address}}</h1>
    </div>
    <script>
        const mv = new Vue({
            el: '.demo1',
            data: {
                name: 'tom',
                address: 'America'
            }
        })
    console.log(mv);//此处打印的是Vue实例对象相关的内容信息
    </script>

4.数据代理

Vue中的数据代理：通过vm对象来代理data对象中属性的操作(读/写)
Vue中数据代理的好处：更加方便的操作data中的数据
基本原理：
通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定一个getter/setter。在getter/setter内部去操作(读/写)data中对应的属性。

注意：vm._data.name与{{name}}效果一样，都可获取到相应的数据

<div id="root">
        {{name}}
        <br>
        {{address}}
 </div>
<script>
		const vm = new Vue({
            el: '#root',
            data: {
                name: '京东',
                address: '北京'
            }
        })
        console.log(vm._data.name); //京东
        console.log(vm._data.address) //北京
</script>

5.事件处理

事件的基本使用

使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
事件的回调需要配置在methods对象中，最终会在vm上；
methods中配置的函数，不要用箭头函数否则this就不是vm了；
methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象；
@click=“demo” 和 @click=“demo($event)” 效果一致，但后者可以传参；

  <div id="root">
    		<h2>欢迎来到{{name}}学习</h2>		
    		<button v-on:click="showInfo">点我提示信息</button> 
    		<button @click="showInfo1">点我提示信息1(不传参)</button>
    		<button @click="showInfo2($event,66)">点我提示信息2(传参)</button>
    </div>
    <script type="text/javascript">
    	Vue.config.productionTip = false //阻止 Vue 在启动时生成生产提示。
    	const vm = new Vue({
    		el:'#root',
    		data:{
    			name:'尚硅谷',
    		},
    		methods:{
                showInfo(){
                    alert("你好")
                }
    			showInfo1(event){
    				// console.log(event.target.innerText)
    				// console.log(this) //此处的this是vm
    				alert('同学你好！')
    			},
    			showInfo2(event,number){
    				console.log(event,number)
    				// console.log(event.target.innerText)
    				// console.log(this) //此处的this是vm
    				alert('同学你好！！')
    			}
    		}
    	})
    </script>

6.事件修饰符

Vue中的事件修饰符：

prevent：阻止默认事件(常用)；
stop：阻止事件冒泡(常用)；
once：事件只触发一次(常用)；
capture：使用事件的捕获模式；
self：只有event.target是当前操作的元素时才触发事件；
passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

  <div id="root">
            <!-- 在事件后面加上prevent可以阻止默认事件，此处会阻止页面进行跳转 -->
            <a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
            <!-- 阻止事件冒泡 
                在事件后面加上stop可以阻止事件冒泡，此处页面的提示信息只会显示一次
                注意：同时加上两个不同的修饰符，会同时产生作用，此处@click.stop.prevent会同时产生阻止冒泡和默认事件的效果
            -->
            <div class="demo" @click="showInfo">
                <a href="http://www.baidu.com" @click.stop="showInfo">阻止冒泡测试</a>
                <a href="http://www.baidu.com" @click.stop.prevent="showInfo">阻止冒泡和默认事件测试</a>
            </div>
    </div>
    <!-- 事件只触发一次(常用)此处只有在第一次点击按钮的时候才会有效果-->
    <button @click.once="showInfo">点我提示信息</button>
    <script>
        new Vue({
            el: '#root',
            methods: {
                showInfo() {
                    alert('同学你好')
                }
            }
        })
    </script>

7.计算属性

定义：要用的属性不存在，要通过已有属性计算得来。
原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
get函数什么时候执行？
	初次读取时会执行一次。
	当依赖的数据发生改变时会被再次调用。
优势：与methods实现相比，内部有缓存机制(复用)，效率更高，调试方便。
备注：
	1.计算属性最终会出现在vm上，直接读取使用即可。
	2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

<div id="root">		
		姓：<input type="text" v-model="firstName"> <br/><br/>
		名：<input type="text" v-model="lastName"> <br/><br/>
		测试：<input type="text" v-model="x"> <br/><br/>
		全名：<span>{{fullName}}</span> <br/><br/>
</div>
<script>
const vm = new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三',
				x:'你好'
			},
			computed:{
				fullName:{
					//get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
					//get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
					get(){
						console.log('get被调用了')
						// console.log(this) //此处的this是vm
						return this.firstName + '-' + this.lastName
					},
					//set什么时候调用? 当fullName被修改时。
					set(value){
						console.log('set',value)
						const arr = value.split('-')
						this.firstName = arr[0]
						this.lastName = arr[1]
					}
				},
                //简写,计算属性一般只需要进行页面展示，不需要修改其中的数据，所以可以使用简易写法
				fullName(){
					console.log('get被调用了')
					return this.firstName + '-' + this.lastName
				}
			}
		})
</script>

8.监视属性

Vue 3 Snippets这是用于自动补全Vue代码的插件

当被监视的属性变化时, 回调函数自动调用, 进行相关操作
监视的属性必须存在，才能进行监视
监视的两种写法：
new Vue时传入watch配置
通过vm.$watch监视

  <div id="#demo1">	
    	<h2>今天天气很{{info}}</h2>
    	<button @click="changeWeather">切换天气</button>
    </div>
    <script type="text/javascript">
    		Vue.config.productionTip = false //阻止 Vue 在启动时生成生产提示。
    		const vm = new Vue({
    			el:'#root',
    			data:{
    				isHot:true,
    			},
    			computed:{
    				info(){
    					return this.isHot ? '炎热' : '凉爽'
    				}
    			},
    			methods: {
    				changeWeather(){
    					this.isHot = !this.isHot
    				}
    			},
                //监视属性实现
    			watch:{
    				isHot:{
    					immediate:true, //初始化时让handler调用一下
    					//handler什么时候调用？当isHot发生改变时。
    					handler(newValue,oldValue){
    						console.log('isHot被修改了',newValue,oldValue)
    					}
    				}
    			}
    		})
    		vm.$watch('isHot',{
    			immediate:true, //初始化时让handler调用一下
    			//handler什么时候调用？当isHot发生改变时。
    			handler(newValue,oldValue){
    				console.log('isHot被修改了',newValue,oldValue)
    			}
    		})
    	</script>

深度监视

(1).Vue中的watch默认不监测对象内部值的改变(一层)。
(2).配置deep:true可以监测对象内部值改变(多层)。
备注：
(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
(2).使用watch时根据数据的具体结构，决定是否采用深度监视。

  <script>	
    watch:{
    		isHot:{
    			// immediate:true, //初始化时让handler调用一下
    			//handler什么时候调用？当isHot发生改变时。
    			handler(newValue,oldValue){
    				console.log('isHot被修改了',newValue,oldValue)
    				}
    			},
    			//监视多级结构中某个属性的变化
    			'numbers.a':{
    				handler(){
    				console.log('a被改变了')
    				}
    			} ,
    			//监视多级结构中所有属性的变化
    			numbers:{
                    //配置了deep属性之后就可以实现深度监视的效果
    				deep:true,
    				handler(){
    					console.log('numbers改变了')
    				}
    			},
                //监视属性的简写形式
    			isHot(newValue,oldValue){
    					console.log('isHot被修改了',newValue,oldValue,this)
    			}
    	}
     </script>

计算属性和监视属性的区别

computed和watch之间的区别：
computed能完成的功能，watch都可以完成。watch能完成的功能，computed不一定能完成

例如：watch可以进行异步操作。

两个重要的小原则：

所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象。
所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等)，最好写成箭头函数，这样this的指向才是vm或组件实例对象。

9.绑定样式

class样式
写法:class=“xxx” xxx可以是字符串、对象、数组。
字符串写法适用于：类名不确定，要动态获取。
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
style样式
:style="{fontSize: xxx}“其中xxx是动态值。
:style=”[a,b]"其中a、b是样式对象。

 <div id="root">		
    		<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
    		<div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/>		
    		<!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
    		<div class="basic" :class="classArr">{{name}}</div> <br/><br/>
    		<!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
    		<div class="basic" :class="classObj">{{name}}</div> <br/><br/>
    		<!-- 绑定style样式--对象写法 -->
    		<div class="basic" :style="styleObj">{{name}}</div> <br/><br/>
    		<!-- 绑定style样式--数组写法 -->
    		<div class="basic" :style="styleArr">{{name}}</div>
    	</div>
    <script type="text/javascript">
    		Vue.config.productionTip = false	
    		const vm = new Vue({
    			el:'#root',
    			data:{
    				name:'尚硅谷',
    				mood:'normal',
    				classArr:['atguigu1','atguigu2','atguigu3'],
    				classObj:{
    					atguigu1:false,
    					atguigu2:false,
    				},
    				styleObj:{
    					fontSize: '40px',
    					color:'red',
    				},
    				styleObj2:{
    					backgroundColor:'orange'
    				},
    				styleArr:[
    					{
    						fontSize: '40px',
    						color:'blue',
    					},
    					{
    						backgroundColor:'gray'
    					}
    				]
    			},
    			methods: {
    				changeMood(){
    					const arr = ['happy','sad','normal']
    					const index = Math.floor(Math.random()*3)
    					this.mood = arr[index]
    				}
    			},
    		})
    	</script>

10.条件渲染

1.v-if
写法：
(1).v-if=“表达式”
(2).v-else-if=“表达式”
(3).v-else=“表达式”
适用于：切换频率较低的场景。
特点：不展示的DOM元素直接被移除。
注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。
2.v-show
写法：v-show=“表达式”
适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

v-for指令:
1.用于展示列表数据
2.语法：v-for=“(item, index) in xxx” :key=“yyy”
3.可遍历：数组、对象、字符串(用的很少)、指定次数(用的很少)

   <div>
        <!-- 遍历数组 -->
            <ul>
                <li>姓名--年龄--性别</li>
                <li v-for="(person ,index) in persons" :key="index">
                    {{person.name}}--{{person.age}}--{{person.gender}}
                </li>
            </ul>
            <!-- 遍历对象 -->
            <ul>
                <li v-for="(value,k) of cars" :key="k">
                    {{k}}-{{value}}
                </li>
            </ul>
    </div>
    <script>
    new Vue({
    		el:'#root',
    		data:{
    			persons:[
    				{id:'001',name:'张三',age:18},
    				{id:'002',name:'李四',age:19},
    				{id:'003',name:'王五',age:20}
    			],
    			car:{
    				name:'奥迪A8',
    				price:'70万',
    				color:'黑色'
    			},
    			str:'hello'
    		}
    })
    </script>

11.数据监视

Vue监视数据的原理：

Vue会监视data中所有层次的数据。
如何监测对象中的数据？
通过setter实现监视，且要在new Vue时就传入要监测的数据。
对象中后追加的属性，Vue默认不做响应式处理
如需给后添加的属性做响应式，请使用如下API：
Vue.set(target，propertyName/index，value)
vm.$set(target，propertyName/index，value)
如何监测数组中的数据？
通过包裹数组更新元素的方法实现，本质就是做了两件事：
调用原生对应的方法对数组进行更新。
重新解析模板，进而更新页面。
在Vue修改数组中的某个元素一定要用如下方法：
1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
2.Vue.set() 或 vm.$set()
特别注意：Vue.set() 和 vm.$set() 不能给vm或vm的根数据对象添加属性

 <div>			
    		<h1>学生信息</h1>
    		<button @click="student.age++">年龄+1岁</button> <br/>
    		<button @click="addSex">添加性别属性，默认值：男</button> <br/>
    		<button @click="student.sex = '未知' ">修改性别</button> <br/>
    		<button @click="addFriend">在列表首位添加一个朋友</button> <br/>
    		<button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button> <br/>
    		<button @click="addHobby">添加一个爱好</button> <br/>
    		<button @click="updateHobby">修改第一个爱好为：开车</button> <br/>
    		<button @click="removeSmoke">过滤掉爱好中的抽烟</button> <br/>
    		<h3>姓名：{{student.name}}</h3>
    		<h3>年龄：{{student.age}}</h3>
    		<h3 v-if="student.sex">性别：{{student.sex}}</h3>
    		<h3>爱好：</h3>
    		<ul>
    			<li v-for="(h,index) in student.hobby" :key="index">
    				{{h}}
    			</li>
    		</ul>
    		<h3>朋友们：</h3>
    		<ul>
    			<li v-for="(f,index) in student.friends" :key="index">
    				{{f.name}}--{{f.age}}
    			</li>
    		</ul>
    </div>
    <script type="text/javascript">
    		Vue.config.productionTip = false //阻止 Vue 在启动时生成生产提示。
    		const vm = new Vue({
    			el:'#root',
    			data:{
    				student:{
    					name:'tom',
    					age:18,
    					hobby:['抽烟','喝酒','烫头'],
    					friends:[
    						{name:'jerry',age:35},
    						{name:'tony',age:36}
    					]
    				}
    			},
    			methods: {
    				addSex(){
    					// Vue.set(this.student,'sex','男')
    					this.$set(this.student,'sex','男')
    				},
    				addFriend(){
    					this.student.friends.unshift({name:'jack',age:70})
    				},
    				updateFirstFriendName(){
    					this.student.friends[0].name = '张三'
    				},
    				addHobby(){
    					this.student.hobby.push('学习')
    				},
    				updateHobby(){
    					// this.student.hobby.splice(0,1,'开车')
    					// Vue.set(this.student.hobby,0,'开车')
    					this.$set(this.student.hobby,0,'开车')
    				},
    				removeSmoke(){
    					this.student.hobby = this.student.hobby.filter((h)=>{
    						return h !== '抽烟'
    					})
    				}
    			}
    		})
    	</script>

12.收集表单数据

若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
若：<input type="checkbox"/>
1.没有配置input的value属性，那么收集的就是checked(勾选 or 未勾选，是布尔值)
2.配置input的value属性:
v-model的初始值是非数组，那么收集的就是checked(勾选 or 未勾选，是布尔值)
v-model的初始值是数组，那么收集的的就是value组成的数组
v-model的三个修饰符：
lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤

 <form @submit.prevent="demo">
        <!--trim的作用是去除空格-->
        账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/>
        <!--number规定提交的数据格式为number-->    
        年龄：<input type="number" v-model.number="userInfo.age"> <br/><br/>
        <!--单选框必须得规定一下统一的name属性，否则无法达到单选的效果-->
        性别：
    		男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
    		女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/>
       <!--复选框和单选框类似，也需要给name绑定相同的属性，否则也无法在Vue实例中获取到-->
    	爱好：
    		学习<input type="checkbox" v-model="userInfo.hobby" value="study">
    		打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
    		吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
    		<br/><br/>
        <!--选择器的绑定事件需要加在select标签上-->
    	所属校区
    		<select v-model="userInfo.city">
    			<option value="">请选择校区</option>
    			<option value="beijing">北京</option>
    			<option value="shanghai">上海</option>
    			<option value="shenzhen">深圳</option>
    			<option value="wuhan">武汉</option>
    		</select>
    </from>  
    <script>
    	new Vue({
    			el:'#root',
    			data:{
    				userInfo:{
    					account:'',
    					password:'',
    					age:18,
    					sex:'female',
                        //这种爱好类似的数据形式，需要使用数据来包裹，然后打印出来
    					hobby:[],
    					city:'beijing',
    					other:'',
    					agree:''
    				}
    			},
    			methods: {
    				demo(){
                        //将数据用json字符串的形式返回
    					console.log(JSON.stringify(this.userInfo))
    				}
    			}
    	})
    </script>

13.内置指令

v-text

	作用：向其所在的节点中渲染文本内容。
	与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。

<h2 v-text="name"></h2>
<h2 v-text="str"></h2>
data: {
   name: 'james',
   str: "<h2>你好啊</h2>"
}

v-html

作用：向指定节点中渲染包含html结构的内容。
与插值语法的区别：
	(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
	(2).v-html可以识别html结构。
严重注意：v-html有安全性问题！！！！
(1)在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
(2)一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！

 <h2 v-html=“str”></h2> //可以解析标签结构

v-cloak指令

本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

v-once指令

v-once所在节点在初次动态渲染后，就视为静态内容了。以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

<h2 v-once>初始化的n值是:{{n}}</h2>		
<h2>当前的n值是:{{n}}</h2>
<button @click="n++">点我n+1</button>

v-pre指令

跳过其所在节点的编译过程。
可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

<h2 v-pre>Vue其实很简单</h2>
<h2 >当前的n值是:{{n}}</h2>
<button @click="n++">点我n+1</button>