Vue学习笔记-6

最新推荐文章于 2024-11-10 15:10:09 发布

优降宁

最新推荐文章于 2024-11-10 15:10:09 发布

阅读量154

点赞数

分类专栏： html 文章标签： vue.js 学习 git

本文链接：https://blog.csdn.net/yjnlovepy/article/details/129034244

版权

html 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

git冲突

冲突场景
多个分支代码合并到一个分支时
多个分支同一个远端分支推送代码时

解决冲突
在当前分支上,直接修改冲突代码
在本地当前分支上,修改冲突代码

git branch -a 查看所有分支
git checkout -b aaa 创建新的分支aaa
git checkout aaa 切换到aaa分支
git push origin aaa 推送aaa分支到远程仓库aaa分支
git push origin master:aaa 推送master到远程的aaa
git branch -d **** 删除一个分支

nginx

./nginx 启动
./nginx -s stop 关闭
./nginx -s reload 重新加载

vue-3 项目创建

请添加图片描述

vue-3项目改造

<router-link to="/cinemas" custom v-shot="{navigate,isActive}">
	<li @click="navigate" :class="isActive ? 'kerwinactive':''">
		<i class="iconfont icon-all"></i>
		<span>影院</span>
	</li>
</router-link>
<script>
	export.default{
		mounted(){
			this.$store.commit("hide")
			console.log(this.$route.params.id)
		},
		destroyed(){
			this.$store.commit("show")
			export default createstore({
				state:{
					isTabbarShow:true
				},
				mutations:{
					hide(state){
						state.isTabbarShow=false
					},
					show(state)
					state.isTabbarShow=true
				}
			})
		}
	}
</script>

vue-reactive

用于复杂数据类型

注意:
1、reactive参数必须是对象(json/arr),基本类型(数字、字符串、布尔值)在reactive中无法被创建成proxy对象,也就无法实现监听,无法实现响应式
2、本质:就是将传入的数据包装成一个Proxy对象
3、如果给reactive传递了其他对象(如Date对象),默认情况下,修改对象无法实现界面的数据绑定更新。如果需要更新,需要进行重新赋值

vue-ref

ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用,引用指向的就是DOM元素;如果用在子组件,引用就指向组件实例

toRef&toRefs

toRef,创建一个响应式数据
本质是引用,也就是说,toRef函数会与源数据交互,修改响应式数据会造成源数据的修改,但是他的修改不会造成试图层数据的更新

toRefs,
用于批量设置多个数据为响应式数据
与原始数据相交互,修改响应式数据会影响到源数据,但是不会更新视图层
还可以与其他响应式数据像交互,更加方便处理视图层数据

生命周期

请添加图片描述

计算属性

写在computed对象中的属性,本质上是一个方法,不过使用时依旧当属性来使用

计算属性是基于缓存实现的,只有计算属性所依赖的数据发生改变时它们才会重新求职,否则访问计算属性会立即返回之前的计算结果,而不必再次执行函数

watch

一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue实例将会在实例化时调用$watch(),遍历watch对象的每一个属性

<body>
<div id="app">
    <input type="text" v-model="num">
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            num: ''
        },
        watch: {
            num(newVal, oldVal) {
            // 监听 num 属性的数据变化
    		// 作用 : 只要 num 的值发生变化,这个方法就会被调用
    		// 第一个参数 : 新值
    		// 第二个参数 : 旧值,之前的值
                console.log('oldVal:',oldVal)
                console.log('newVal:',newVal)
            }
        }
    })
</script>
</body>

//自动触发
<body>
<div id="app">
    <input type="text" v-model="num">
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            num: 1
        },
        watch: {
            num: {
            	// 数据发生变化就会调用这个函数  
                handler(newVal, oldVal) {
                    console.log('oldVal:', oldVal)
                    console.log('newVal:', newVal)
                },
                // 立即处理 进入页面就触发
                immediate: true
            }
        }
    })
</script>
</body>