vue基础常用的属性和指令

最新推荐文章于 2023-07-23 20:54:16 发布

想到山顶看风景

最新推荐文章于 2023-07-23 20:54:16 发布

阅读量487

点赞数 1

分类专栏： vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/jier_jier/article/details/118178187

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

VUE基础

复习一下vue的基础语法
代码块不是完整结构，只是挑选关键的写出来而已

1-vue文件结构

每一个.vue文件都由三部分组成

<template>: 此处写html结构
**<script>：**此处写js逻辑
<style>： 此处写css样式

<template>
    <div class="app">
         <!--template标签中,在div下，写页面结构（html）-->
    </div>
</template>

<script>
	// script标签中写js逻辑
</script>

<style>
	/*style标签中写css样式*/
</style>

2-data 与 methods

data/methods是vue的关键属性，data用来存储数据,methods用来定义方法。

<template>
	<div class="app">
		<div>{{num}}---不用加this</div>
        <button @click="fn"></button>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                num:0
            }
        },
        methods:{
            fn(){
                this.num ++;
            }
        }
    }
</script>

data中的属性，都可以通过this.key的方式获取（在标签组件中，如果绑定在属性上时，不用加this）

methods中的方法，都可以通过this.fn()的方式调用（在标签组件中，也可以通过@click="fn()"或者v-on:click="fn()"为组件/标签注册事件）

3-插值表达式

语法：{{}}

可以在文字中，使用{{}}包起来data中的属性，渲染到页面上的时候，就能显示目标数据了

同时内部也可以写一些简单的逻辑表达式，比如三目运算。

<template>
	<div class="app">
		<div>床前明月光，{{message}}，{{bool ? message : "疑是XXX"}}</div>
        <!--窗前明月光，疑是地上霜，疑是XXX-->
    </div>
</template>

<script>
    export default {
        data() {
            return {
				message: '疑是地上霜'，
                bool:false
            }
        }
    }
</script>

4-常用指令

① `v-bind`和`v-on`

`v-bind`用于绑定属性,也可以简写为`:`冒号

# v-bind使用
<template>
	<div class="app">
        <div class="className">正常绑定‘className’类</div>
        <div v-bind:class="className">使用 v-bind:class 动态绑定‘redText’类</div>
        <div :class="className">使用 :class 动态绑定‘redText’类</div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
				className:'redText'
            }
        }
    }
</script>

<style>
    .className{
        color: blue;
        font-weight: bold;
    }
    .redText{
        color: red;
        font-weight: bold;
    }
</style>

`v-on`用于绑定事件,也可以简写为`@`

# v-on使用
<template>
	<div class="app">
        <button v-on:click="click1">v-on:click 绑定点击事件</button>
        <button @click="click2">@click 绑定点击事件</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {}
        }
        methods: {
            click1(){
                console.log("%c v-on:click","color: red;font-weight: bold;")
            },
            click2(){
                console.log("%c @click","color: blue;font-weight: bold;")
            }
        },
    }
</script>

② v-for

列表渲染，使用v-for绑定数据源数组/对象/数组/字符串，数组和对象居多

与v-for同时使用的是key，在标签中需要使用？: key绑定一个不会重复的唯一标识，一般选用数组下标

<template>
	<div class="app">
        <ul>
			<li v-for="(v,i) in num" :key="v">绑定number：当前值--{{v}}</li>
        </ul>
        <hr>
        <ul>
			<li v-for="(v,i) in arr" :key="i">绑定数组Array：当前项--{{v}}</li>
        </ul>
        <hr>
        <ul>
            <li v-for="(v,i) in obj" :key="i">绑定对象Object：当前value--{{v}}, 当前key--{{i}}</li>
        </ul>
        <hr>
        <ul>
            <li v-for="(v,i) in str" :key="i">绑定String：当前值--{{v}}</li>
        </ul>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                num: 10,
                arr: [1, 2, 3, 4, 5],
                obj: { name: "myName", age: 19 },
                str:"ksdjkasdjaskjdk"
            }
        }
    }
</script>

在这里插入图片描述

③ v-model

v-model是与data中的值进行双向绑定

当data中的数据发生改变，会引起input的改变，同时编辑input，也会引起它绑定的data中的值变化，进而引起所有绑定该值的地方进行变化

<template>
	<div class="app">
        <input name="input1" v-model="value"></input>
		<input name="input2" v-model="value"></input>
    </div>
</template>

<script>
    export default {
        data() {
            return {
				value:'message'
            }
        },
        created() {
        },
        methods: {
           
        },
    }
</script>

④ v-if/v-show

条件渲染，一个标签通过v-if/v-show绑定一个布尔值，如果为true，则该标签会在页面显示，如果为false，则在页面上不会显示。

**v-if：**操作元素的删除和添加，适合对元素显示隐藏操作频率低的情况使用

v-show： 操作元素的隐藏和显示，仅是为元素添加hidden样式，适合对元素显示隐藏操作频率高的情况使用

<template>
	<div class="app">
        <input v-if="v-if-bool" value="v-if"></input>
		<div v-show="v-show-bool">div： v-show</div>
		<button @click="changeShow()">不断切换div的显示</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
				v-if-bool:true,
                v-show-bool:true
            }
        },
        created() {
            // 创建后
            // 适合初始化数据用，这种情况就适合使用v-if渲染标签元素
            this.v-if-bool = false;
        },
        methods: {
			changeShow(){
				this.v-show-bool = !this.v-show-bool
                // 这样有可能在页面上高频显示隐藏元素的情况，适合使用v-show进行渲染
            }
        },
    }
</script>

5-计算属性和监听器（computed和watch）

①computed

计算属性是和data中的数据一样，都是可以被直接通过this.key使用的属性，区别在于这个属性是依赖于某中逻辑得出的而非恒定的数据，会受到一些条件影响。

computed:{
	resultStr(){
		 // 以str1和str2为条件，动态计算出最终字符串拼接结果，并且当这两个值发生变化时，会再次进行计算
		 return this.str1+this.str2
	},
    属性名(){
        逻辑（不一定是计算，只要能动态得出所要的结果即可）
		return 值
	},    
}

<template>
	<div class="app">
        <input v-model="str1"></input>
		<input v-model="str2"></input>
		<div>字符串拼接后的结果是-------{{resultStr}}</div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
				str1: '',
                str2:''
            }
        },
        computed:{
            resultStr(){
                // 以str1和str2为条件，动态计算出最终字符串拼接结果，并且当这两个值发生变化时，会再次进行计算
                return this.str1+this.str2
            }
        }
    }
</script>

效果如图：

在这里插入图片描述

②watch

监听器与计算属性有相似的地方，都是某值变引起另外的某值变化，区别在于：

监听器通过监听某一个属性，可以影响到n个依赖于它的值的变化（一对多）

计算属性，是n个它所依赖的值的变化，引起改属性值的变化（多对一）

watch:{
	属性(newVal,oldVal){
		 // 监听属性值的变化，每次变化就会记录变化后和变化前的值newVal,oldVal
		 执行逻辑
	}  
}

<template>
	<div class="app">
        str: <input v-model="str"></input>
    	<hr>
        str1:<input v-model="str1"></input><br>
        str2: <input v-model="str2"></input><br>
        str3:<input v-model="str3"></input><br>
        str4:<input v-model="str4"></input>
    </div>
</template>

<script>
    export default {
        data() {
            return {
				str1: '',
                str2: '',
                str3: '',
                str4: '',
                str4: ''
            }
        },
        watch:{
            str(newVal,oldVal){
                 // 监听str值的变化，每次变化就会记录变化后和变化前的值newVal,oldVal
                this.str1 = this.str + "<>"
                this.str2 = this.str + "@@"
                this.str3 = this.str + "!!!!"
                this.str4 = this.str + "!!$$!!"
            } 
        }
    }
</script>

效果如图：

在这里插入图片描述

6-生命周期

创建前后
挂载前后
更新前后
销毁前后

<template>
	<div class="app">
        <div id="app"> {{ name }} </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
				 name: '老王',
            }
        }
        beforeCreate() {
            console.log('创建前👇👇👇👇👇👇👇')
            console.log(this.$el)  // undefined -- 页面元素未创建
            console.log(this.name) // undefined -- data中的数据未生成
        },
        created() { // 常用
            console.log('创建完成👇👇👇👇👇👇👇')
            console.log(this.$el)  // undefined -- 页面元素未创建
            console.log(this.name)  // ‘老王’ -- data中的数据生成
            // 在这个函数中，进行一些数据初始化比较好，可以更早的进行数据请求
        },
        beforeMount() {
            console.log('挂载前👇👇👇👇👇👇👇')
            console.log(this.$el)  // <div id='app'>{{name}}</div> -- 页面元素创建，但数据没有更新，还是vue文件中写的那一套
            console.log(this.name)  // ‘老王’
        },
        mounted() { // 常用
            console.log('挂载完成👇👇👇👇👇👇👇')
            console.log(this.$el)  // <div id='app'>老王</div> --页面元素创建，数据更新
            console.log(this.name)  // ‘老王’
        },
		// 更新前后，销毁前后用的较少👇
        beforeUpdate() {
            console.log('更新前👇👇👇👇👇👇👇')
            console.log(this.$el)
            console.log(this.app)
        },
        updated(){
            console.log('更新完成👇👇👇👇👇👇👇')
            console.log(this.$el)
            console.log(this.app)
        },
        beforeDestroy(){
            console.log('销毁前👇👇👇👇👇👇👇')
            console.log(this.$el)
            console.log(this.app)  
        },
        destroyed() {
            console.log('销毁完成👇👇👇👇👇👇👇')
            console.log(this.$el)
            console.log(this.app)  
        }
    }
</script>

7-路由跳转和数据传递

① `this.$router.push`

-----------------------------------从A页面跳转--------------------------------------
<template>
	<div class="app">
		<button @click="jump()">不带参数跳转</button>
        <button @click="jumpWithQuery()">带参数跳转</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                pathX: '/XXX/XXX',
                pathY: '/YYY/YYY',
				value1: 'value1',
                value2: 'value2'
            }
        },
        methods:{
            jump(){ // 不带参数跳转
                 this.$router.push(‘/YYY/YYY’)
                // 或者 this.$router.push(this.pathY)
            }，
            jumpWithQuery(){ // 带参数跳转
                this.$router.push({
                    path:this.path,
                    query:{  // 也可以写params
                        key1: this.value1,
                        key2: this.value2
                    }
         	   })
               
            }
        }
    }
</script>
-----------------------------------跳转至B页面后--------------------------------------
接收参数
<template>
	<div class="app">
		
    </div>
</template>

<script>
    export default {
        data() {
            return {
                query:null
            }
        },
        created(){
        	this.query = this.$route.query; // 接收带过来的参数   固定写法 this.$route.query/params  取决于跳转时是query还是params
        	console.log(this.query) // {key1: 'value1',key2: 'value2'}
        }
    }
</script>

② `this.$router.replace`

用法与this.$router.push一致，效果略有差别

③ `router-link`

router-link和router-view是一起出现的，router-link中的 to属性，有两种写法

简单写法：直接跟上路由地址
对象写法：
:to = "{path：'路由地址'，params：{key：参数}}"
:to = "{name：'组件名称'，params：{key：参数}}"

-----------------------------------从A页面跳转--------------------------------------
<template>
	<div class="app">
        <router-link :to="{path:'/XXX/XXX',params:{name:'app'}}">对象写法</router-link>
        <router-link :to="{name:'componentName',params:{name:'app'}}">对象写法</router-link>
        <router-link to="/YYY/YYY">简单写法</router-link>
        <router-view />
    </div>
</template>

<script>
    export default {
        data() {
            return {}
        },
        created(){}
    }
</script>
-----------------------------------跳转至B页面后--------------------------------------
<template>
	<div class="app">
    </div>
</template>

<script>
    export default {
        data() {
            return {
                params:null
            }
        },
        created(){
            this.params = this.$route.params; // 接收带过来的参数 固定写法 this.$route.query/params  取决于跳转时是query还是params
        	console.log(this.params); // {name:'app'}
        }
    }
</script>

npm命令

在项目目录下

开启服务
```
npm run serve
#或者
npm run dev
```
编译打包
```
npm run build
```

清理npm缓存

npm cache clean --force
# 打包出现错误或开启服务出错，可尝试此命令
# 也可以重新npm install

想到山顶看风景

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue基础常用的属性和指令

VUE基础复习一下vue的基础语法代码块不是完整结构，只是挑选关键的写出来而已1-vue文件结构每一个.vue文件都由三部分组成<template>: 此处写html结构**<script>：**此处写js逻辑<style>：此处写css样式<template> <div class="app">  &l
复制链接

扫一扫