Vue基础(事件，指令，方法）

最新推荐文章于 2023-09-27 15:28:42 发布

developer@liyong

最新推荐文章于 2023-09-27 15:28:42 发布

阅读量270

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_43259860/article/details/125244284

版权

el 与 data 的两种书写方式
el

<!-- 第一种写法，直接通过el挂载组件 -->
<body>
    <div id="root" style="width: 20px;height:20px;background-color:aliceblue">{{name}}</div>
</body>
<script>
    Vue.config.productionTip = false;
    new Vue({
        el: "#root",
        data: {
            name: "zs"
        }
    })
</script>
<!-- 第二种种写法，通过Vue提供的函数进行挂载 -->
const vue = new Vue({
     data: {
         name: "zs"
     }
 })
 vue.$mount("#root")

data

<!-- 第一种写法直接 -->
const vue = new Vue({
     data: {
         name: "zs"
     }
 })
<!-- 第一种写法直接 -->
data() {
    return {}
}

说明：el的第二种方式灵活性更强，可以实现元素与vue的动态挂载；data的第二种方式更常用，如果直接写对象式，数据是被vue实例共享的，一个实例数据发生变化就会影响所有其它实例，而函数式写法每次返回一个新的对象，每个实例都有自己的数据互相不影响。

vue事件处理

<body>
    <div id="root" style="width: 20px;height:20px;background-color:aliceblue">
        <!-- 第一种写法使用v-on -->
        <button v-on:click="show">点击事件</button>
          <!-- 第一种写法使用@代替v-on -->
        <button @click="show">点击事件</button>
    </div>
</body>
<script>
    Vue.config.productionTip = false;
    const vue = new Vue({
        el: "#root",
        data: {
            name: "zs",
            age: 18
        },
        methods: {
            show(e) {
                console.log(e)
            }
        },
    })
</script>

注意：如果我们的参数不传参数，那e就是当前这个事件
在这里插入图片描述
如果我们需要传参

  <button @click="show(1)">点击事件</button>

这个时候e的值就是1，如果我们希望事件这个参数别丢，需要进行占位

  <button @click="show($event, 1)">点击事件</button>

methods: {
    show(e, num) {
        console.log(e, num)
    }
}

这个时候e是事件，num是我们传递的参数。

事件修饰符

@click.stop = "showInfo" // 阻止冒泡
@click.one = "showInfo" // 只触发一次
@click.capture = "show" // 捕获阶段执行
@click.self = "show" // 只有e.targe是自己的时候才触发
@click.passive // 事件默认行为立即执行
@click.native //某个组件的根元素上绑定事件

键盘事件
@keyup
@keydown
Vue给常用的键取了别名

使用方法@keyup.enter, 注意tab需要配合keydown使用

事件处理也可以结合使用@click.prevent.stop @click.ctl.y
计算属性

<body>
  <!-- 计算属性
  vue中认为写在data中的是属性
  计算属性就是拿着已经有的属性计算出新的属性
  -->
  <div id="root">
      姓:<input value="张" v-model = "firstName"></input>
      名:<input value="三" v-model = "lastNme"></input>
      姓名: <span>{{fullName}}</span>
  </div>
  <script type="text/javascript" src="js/vue .js"></script>
  <script>
      const vm = new  Vue({
          el : '#root',
          data : {
              firstName : "张",
              lastNme : "三"
          },
          computed: {
              fullName : {
                  // 有人读取fullname，get就会被调用
                  get() {
                      // 这里vue会做一个缓存
                      // 初次读取fullname时会被调用
                      // 所依赖的数据发生变化时也会重写调用
                      return this.firstName + "-" + this.lastNme
                  },
                  
                  set() {

                  }
              }
          }
      })
  </script>

简写如果确定只使用getter，也就是只需要读取值，不用修改这个值可以采用简写形式

computed: {
fullName() {
	return 
}
}

注意计算属性里面是不能有异步任务的，因为它需要依靠返回值。

监视属性
watch : {
}

<script>
   const vm = new  Vue({
       el : '#root',
       data : {
           isHot : true
       },
       watch: {
           isHost : {
               // 一上来就执行一次回调，也就是初始化的时候执行一次
               immediate : true,
               // 当isHot发生变化的时调用
               handler(newValue, oldValue) {
                   console.log("修改了");
               }
           }
       }
   })
</script>

也可以这样写：

vm.$watch("isHot", {
   immediate : true,
   handler(newValue, oldValue) {
       console.log("isHost");
   }
})

监视多级属性

const vm = new  Vue({
     el : '#root',
     data : {
         isHot : true,
         numbers : {
             a : 1, 
             b : 2
         }
     },
     watch: {
         numbers : {
             deep : true, // 比如对象或数组里面的东西发生了变化也会被监听到，也就是说现在numbers里a,b发生变化这个handler事件也会触发
             handler(newValue, oldValue) {
                 console.log("修改了");
             }
         }
     }
 })

view可以监视多层结构，但是watch默认不可以检测多级结构。
简写（如果不需要深度监听，不需要一上来就执行，可以采用简写形式)

watch : {
isHot(newValue, oldValue) {
}
}
或者：
vm.$watch("isHot", function() {
}
})

在这里插入图片描述

vue绑定样式
通过className, 动态绑定
:class=“a”
data{
a : normal
}
之后修改直接：
methods : {
changeMood() {
this.a = “basic”
}
}
多个绑定（绑定类名）
:class=“arr”
data {
arr : [“”,“”,“”,“”]
}
对象式写法，样式确定动态绑定
:class=“obj”
data : {
obj : {
style1:true,
style2:false
}
}
内联样式(需要驼峰写法）
:style = “{fontSize : fsize + ‘px’;}”
:style=“styleObj”
data : {
fontSize : ‘40px’
}
:style=“[styleObj1, styleObj2]” 可以写成数组，数组里面有样式对象（obj: {
fontSize : ‘40px’
}）
条件渲染
隐藏元素
v-show=“1==3” true则隐藏，但是节点还在（相当于display：none）
v-show=“a” a可以再data中配置
也可以隐藏元素
v-if=“false” 条件渲染，但是它是将整个元素干掉，节点不在了
v-else-if 就相当于else if的作用
v-else 相当于else

<div  v-if="n === 1"></div>
<div  v-if="n === 2"></div>
<div  v-if="n === 3"></div>

如果需要使用v-if,v-else,v-else-if需要结构连贯，中间不能打断

<div  v-if="n === 1"></div>
<div  v-esle-if="n === 2"></div>
<div  v-else="n === 3"></div>

如果我们需要多个元素进行条件渲染且渲染条件相同，我们可以使用template包一层，需要注意的是它只能配合v-if用，也就是v-show是不能生效的

<template v-if="n === 1">
  <div>页面1</div>
  <div>页面2</div>
  <div>页面3</div>
</template>

注：如果我们切换的频率很低用v-if,如果切换频率很高用v-show因为这样不会频繁的创建DOM节点。

列表渲染

<div id="root">
      <ul>
          <li v-for="p in persons" :key="p.id">
              {{p.name}} - {{p.id}}
          </li>
      </ul>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script>
      const vm = new  Vue({
          el : '#root',
          data : {
            persons : [
                {id : "001", name : "zs"},
                {id : "002", name : "ls"},
          ]
          }
      })
  </script>

特别注意，需要配置:key,相当于一个身份证标志一个元素：
:key=“p.id”

<div id="root">
     <ul>
         <li v-for="(p, index) in persons">
             {{p.name}} - {{p.id}}
         </li>
     </ul>
 </div>

也是可以这样写，这样index就是序号，p代表一个对象。
v-for也可以遍历一个列表

<ul>
    <li v-for="(value, key) in obj">
    </li>
</ul>

data : {
	obj : {
		name : "zs",
		age : 18
	}
}

也可以遍历字符串，和值范围。
特别注意key，如果用index千万不要再前面插入元素会破坏顺序，需要在末尾插入。

列表过滤

watch : {
    keyWord : {
        // 一上来就执行
        immediate:true,
        handler(val) {
            this.backup = this.persons.filter(p => {
            return p.name.indexOf(val) !== -1
        })
        }
    },
}
})

vue set
Vue.set(vm._data, ‘sex’ , ‘男’) 添加一个响应式的属性
也可以用vm.$set
Vue.set 只能在data里面的的对象添加响应式属性，不允许在vm和直接data上添加响应式属性。
Vue收集各种表单数据（技巧）
收集表单数据：
若：，则v-model收集的是value值，用户输入的就是value值。
若：，则v-model收集的是value值，且要给标签配置value值。
若：
1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
2.配置input的value属性:
(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
(2)v-model的初始值是数组，那么收集的的就是value组成的数组
备注：v-model的三个修饰符：
lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤
Vue内置指令
v-text 向所在节点中直接插入文本，不解析html标签

<body>
<!-- 
v-text指令：
1.作用：向其所在的节点中渲染文本内容。
2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。
-->
<!-- 准备好一个容器-->
<div id="root">
	<div>你好，{{name}}</div>
	<div v-text="name"></div>
	<div v-text="str"></div>
</div>
</body>

<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

new Vue({
	el:'#root',
	data:{
		name:'尚硅谷',
		str:'<h3>你好啊！</h3>'
	}
})
</script>

v-html : 支持解析HTML元素。
v-html指令：
1.作用：向指定节点中渲染包含html结构的内容。
2.与插值语法的区别：
(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
(2).v-html可以识别html结构。
3.严重注意：v-html有安全性问题！！！！
(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
v-cloak
v-cloak指令（没有值）：
1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题，给使用插值语法的元素加上v-cloak属性，设置样式，这样可以先让{{xxx}}影藏，等到加载完毕时显示出来。
v-once指令：
1.v-once所在节点在初次动态渲染后，就视为静态内容了。
2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

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

特别重要：
次文部分代码、文字、图片来源于尚硅谷视频教学（Vue）。

developer@liyong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础(事件，指令，方法）

data说明：el的第二种方式灵活性更强，可以实现元素与vue的动态挂载；data的第二种方式更常用，如果直接写对象式，数据是被vue实例共享的，一个实例数据发生变化就会影响所有其它实例，而函数式写法每次返回一个新的对象，每个实例都有自己的数据互相不影响。注意：如果我们的参数不传参数，那e就是当前这个事件如果我们需要传参这个时候e的值就是1，如果我们希望事件这个参数别丢，需要进行占位这个时候e是事件，num是我们传递的参数。键盘事件@keyup@keydownVue给常用的键取了别名
复制链接

扫一扫