全网最新版本vue3.0版本指令

最新推荐文章于 2024-03-26 18:26:47 发布

昼月眠

最新推荐文章于 2024-03-26 18:26:47 发布

阅读量984

点赞数 1

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/xiuxiuxiu555/article/details/123189654

版权

Vue指令

vue内置指令是v-开头的特殊属性联系html模板与javascript数据类型

1.文本渲染指令

v-text

{{msg}}

v-html

实例：

<div id="app">
		<input type="text" v-model="msg">
		<p>{{msg}}</p>
	</div>
	<script>
		// 
		const app = Vue.createApp({
			data() {
				return { msg: "你好vue" }
			}
		})
		var vm = app.mount("#app")

2.属性渲染

v-bind:属性名="值"

:属性名="值"

实例：

<div id = "app">
<p v-bind:title="msg">你好</p>
<p :title="msg">
 </div>
 Vue.createApp({
            data(){
                return{
                    msg:"你好你好",
                    canUse:true,
                }
            }
        }).mount("#app")

3.条件渲染

v-if

v-else-if

v-else

v-show 隐藏 css方式

v-if 隐藏移除节点

频繁切换用v-show，反之用v-if

实例：

 <div id="app">
        <p v-if="score>=90">优秀</p>
        <p v-else-if="score>=80">良好</p>
        <p v-else-if="score>=70">中等</p>
        <p v-else-if="score>=60">及格</p>
        <p v-else>不及格</p>
    </div>
    <script>
        Vue.createApp({
            data(){
                return{
                    score:70
                }
            }
        }).mount("#app")
    </script>

   <div id="app">
        <p v-if="can">我会显示</p>
        <p v-show="can">我也会显示啊</p>
    </div>
    <script>
        Vue.createApp({
            data(){
                return{
                    can:false
                }
            }
        }).mount("#app")
        // v-show 是通过css隐藏
        // v-if 直接移除节点隐藏
        // 如果频繁切换显示与隐藏V-show
        // 偶尔切换显示隐藏用v-if
    </script>

4.列表渲染指令

v-for=“(item,index) in list” :key="item"

item变量的当前数据

index当前的下标

key是给vue遍历的节点一个唯一的标识符更好的让vue去做排序

过滤等操作，为了性能的优化，要求在一个for指令里面key的值要唯一

    <div id="app">
        <ul>
            <li v-for="(item,index) in list" :key="item">{{item}} {{index+1}}</li>
            <!-- item保持一致 
            key属性为了让Vue内部给遍历的节点 给一个唯一的标识符 以便更好地去
            排序过滤等操作 为了性能优化 key的值要唯一 -->
        </ul>
    </div>
    <script>
        Vue.createApp({
            data(){
                return{
                    list:["Vue","react","angular"]
                    // list跟上面的list保持一致
                }
            }
        }).mount("#app")
    </script>

v-for范围

 <div id="app">
        <div v-for="value in 10">{{value}}</div>
    </div>
    <script>
        Vue.createApp({
            data(){
                return{
                    
                }
            }
        }).mount("#app")
//v-for的范围

v-for和v-if如果要一起的话


        用template 
        <template v-for="item in 10">
            <p v-if="item%2===0">{{item}}</p>
        </template>

5.事件响应

v-on:事件名=“事件响应”
v-on:click="num++"
@click="num++"

实例

每次点击按钮都会＋1

<div id="app">
        <button v-on:click="num++">{{num}}</button>
        <button @click="num++">{{num}}</button>
    </div>
    <script>
        Vue.createApp({
            data(){
                return{
                    num:1
                }
            }
        }).mount("#app")

事件修饰符

.stop 阻止事件冒泡
.prevent 阻止默认事件
.once 执行一次

按键的修饰符

确定那个按键被按下
.enter 回车
.esc 取消
.delete 删除
.space 空格
.left .right .up .down

系统修饰符

.ctrl
.shift
.alt

鼠标修饰符

.left .right .middle

6.vue的监听(watch)

wath监听

定义监听数据的变化并执行回调函数

值类型监听

watch:{

"num":function(nval,oval){

...

}

}

引用类型监听

watch:{

obj:{

handler(navl){....},

depp:true

}

}

vue监听器的写法

 Vue.createApp({
            wath:{
                num:function(nval,oval){

                }
            },
            data(){
                return{num:1}
            }
        })

计算机监听实例


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单绑定</title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 什么时候计算：n1，type，n2发生变化时候计算 -->
		 <input type="text" v-model.number="obj.n1" >
		 <select v-model="obj.type"  >
			 <option value="+">+</option>
			 <option value="-">-</option>
			 <option value="*">×</option>
			 <option value="/">÷</option>
		 </select>
		  <input type="text" v-model.number="obj.n2" >
		 <button>=</button>
		 {{obj.n3}}
		</div>
		<script>
		// 当obj数据发生变化时候，监听obj 并执行计算this.n3的值
			Vue.createApp({
				watch:{
					// 默认发obj是对象引用类型，obj内存地址没有变化
					// 对象监听需要用deep深度监听
					// handler处理器只能拿到最新的值
					obj:{
						handler(nval){
							this.obj.n3 = eval(this.obj.n1+ this.obj.type+this.obj.n2)
						},
						deep:true,//深度监听
					}
				},
				data() {
					return {
						obj:{
							n1:1,
							n2:1,
							type:"+",
							n3:2
						}
					}
				}
				 
			}).mount("#app")
		</script>
	</body>
</html>

7.计算computed

计算的写法

   <div id="app">
        <input type="text" placeholder="请输入" v-model="msg">
        <p>{{msg}}</p>
        <p>{{rmsg}}</p>
    </div>
</head>
<body>

    <script>
        Vue.createApp({
            computed:{
              "rmsg":function(){
                  return this.msg.split("").reverse().join('')
              }  
            },
            data(){
                return{
                    msg:'你好我是'
                }
            }
        }).mount("#app")
    </script>

computed的实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" placeholder="搜索" v-model="keyword">
        <table border="1">
            <tr>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
                <td>电话</td>
            </tr>
            <tr v-for="item in fstudents" key="item.phone">
                <td>{{item.name}}</td>
                <td>{{item.sex}}</td>
                <td>{{item.age}}</td>
                <td>{{item.phone}}</td>
            </tr>
        </table>
    </div>
    <script>
        // 搜索 其实就是从现有的数据student 计算出和keyword相关的数据
        // 需要遍历student数据 如果当前行对象的数据包含了keyword当前行保留
        Vue.createApp({
            // 目标从现有的msg计算出rmsg
            computed: {
                "fstudents":function(){
                    return this.students.filter(item=>{
                        var flag = true;
                        // 默认返回true
                        if(this.keyword!==''){
                            // 把当前行转换为字符串
                            var str = JSON.stringify(item);
                            // 如果str包含了keyword设置flag为true否则设置flag值为false
                            str.includes(this.keyword)?flag=true:flag=false;
                        }
                        // 如果flag为true 当前行的数据就保留 否则就过滤掉
                        // str包含了关键字 当前行保留 不包含当前行过滤掉
                        return flag;
                    })
                }
            },
            data() {
                return {
                    keyword:'',//搜索关键字
                    students: [//学生列表
                        { name: '张三', sex: '女', age: 19, phone: '18921212121' },
                        { name: '李四', sex: '男', age: 29, phone: '18921221122' },
                        { name: '王五', sex: '女', age: 39, phone: '18921788723' },
                        { name: '赵六', sex: '男', age: 49, phone: '18921556124' },
                        { name: '曾七', sex: '男', age: 29, phone: '18921221125' },
                        { name: '刘八', sex: '女', age: 39, phone: '18921788726' },
                        { name: '黄九', sex: '男', age: 29, phone: '18921221127' },
                        { name: '王五', sex: '女', age: 39, phone: '18921788728' },
                        { name: '王五', sex: '女', age: 39, phone: '18921788729' },
                        { name: '赵六', sex: '男', age: 49, phone: '18921556110' },
                        { name: '李思思', sex: '男', age: 29, phone: '18921221111' },
                        { name: '张三', sex: '女', age: 19, phone: '18921212112' },
                        { name: '李四', sex: '男', age: 29, phone: '18921221113' },
                        { name: '王五', sex: '女', age: 39, phone: '18921788714' },
                        { name: '赵六', sex: '男', age: 49, phone: '18921556115' },
                        { name: '李四', sex: '男', age: 29, phone: '18921221116' },
                        { name: '王五', sex: '女', age: 39, phone: '18921788717' },
                        { name: '李四', sex: '男', age: 29, phone: '18921221118' },
                        { name: '王五', sex: '女', age: 39, phone: '18921788719' },
                        { name: '王五', sex: '女', age: 39, phone: '18921788720' },
                        { name: '赵六', sex: '男', age: 49, phone: '18921556131' },
                        { name: '李五五', sex: '男', age: 29, phone: '18921221133' }]

                }
            }
        }).mount("#app")
    </script>
</body>

</html>