vue change事件_vue起步篇2，从0基础开始到全家桶，vue基础指令

最新推荐文章于 2024-07-03 20:51:10 发布

weixin_39526564

最新推荐文章于 2024-07-03 20:51:10 发布

阅读量479

点赞数

点击上方蓝字

关注我吧

vue基础指令

主要作用是: 模板+数据::: 前端渲染, === 也就是把数据填充到html中去,

指令(以 v- 开始)

插值表达式: {{}} ---> 将数据填充到Html页面中, 做一些基本的计算操作

---> 存在闪动的问题, 使用 v-clock 解决

<div>{{msg}}div>

1 2

v-clock: 解决闪动 , 需要提供样式 v-clock{ display: none}
原理: 先通过样式隐藏内容, 然后在内存中进行值的替换, 替换后在显示.

<div v-clock>{{msg}}div><style>[v-clock] {
  display: none;}style>

1 2 3 4 5 6

v-text, v-html, v-pre都是将数据插入到html中
v-text: 插入的是纯文本, 字符串是怎么样就怎么样显示, 和插值表达式基本一样,但是不会出现闪动
v-html: 会将html解析后,插入页面,
v-pro: 显示的原始值, 不去编译包括 {{}} 都会被显示出来

   
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script><div id="app">

  <div>{{msg}}div>
  <div v-text="msg">div>
  <div v-html="msg">div>
  <div v-pro>{{msg}}div>div><script>
  var vm = new Vue({
    el: '#app',
    data() {
      return {
        msg: '

`你好,vue`

'
      }
    },
  })script>

结果：

v-once只编译一次
数据的改变,视图不会去改变,.
应用场景: 显示的信息后续不需要在修改,可以使用
v-model 双向数据绑定 (底层就是事件绑定)
视图的改变,数据也会变化... 数据的改变,视图会改变
```
// v-model的底层实现原理:<input v-bind:value="msg" v-on:input="msg = $event.target.value">
```
12
v-on 事件绑定, 语法糖@ , 事件对象$event 默认会传递:事件对象
事件修饰符
1. 传统的JS阻止冒泡 event.stopPropagation()
vue阻止事件冒泡: .stop
主要用于键盘事件中,用于过滤点击按键,做一些相关的事件
如: @keyup.enter="handle()"
1. 事件修饰符可以连写,但是先后顺序是不一样的
1. JS阻止默认行为: event.preventDefault()
  vue阻止默认行为: .prevent
2. 按键修饰符

学到这里可以写一个简单的加法计算器了哟

v-bind属性绑定: 语法糖 :
可以绑定一些定义在data里面的数据. 或者是动态的去改变这个属性值
样式绑定:
方式1: 对象的方式
方式2: 数组的方式
样式绑定相关细节:
1. 数组,和对象的结合使用
```
<div :calss="[calss1, calss2, {calss3: isShow }]">
```
  1
style绑定: 对象的方式,数组的方式. 也可以简化结和
表单域修饰符: (v-model的修饰符)

v-model.number 转化为数值类型
trim: 去掉开始和结尾的空格
lazy: 将input事件切换为change事件 (作用: 校验)
input 事件是输入就会去执行
change事件是失去焦点后才执行

基础语法

分支结构

<div v-if="isLogin">{{msg}}div><div v-else>{{str}}div><div v-show="isLogin">{{msg}}div>

v-for 遍历数组
```
<li v-for="(item, index) in fruits" :key="index">{{index}} -- {{item}}li>
```
1
key的作用:
帮助Vue区分不同的元素,从而提高性能

v-if
v-else
v-else-if
v-show
重点: v-if和v-show的区别:
v-if: 控制元素是否渲染, 变换的很少
v-show: 控制元素是否显示,,, 通过dispaly 控制元素是否显示, 实际DOM树已经生成, 高频率切换的适合使用. 所以, v-show具有高.初始化消耗

分支循环结构:

完整的代码

DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Vue入门第一个代码title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script><style type="text/css">[v-cloak] {display: none;}style>head><body><div id="app"><div v-pre>{{message}}div><div v-cloak>{{message}}div><div v-once>第一次绑定的值，不能在做修改：{{message}}div><div v-text="message">div><div v-html="msgHtml">div><div v-if="isLogin">isLogin为ture显示div><div v-else>isLogin为false显示div><div v-show="isLogin">isLogin为ture显示div><ul><li v-for="(value, key, index) in items" :key="key">
                {{ key }} - {{ value }}            li>ul><div>{{count}}div><button v-on:click="add">加分button><button @click="add">加分button><br/><input type="text" v-model="message"><br/>div><script type="text/javascript">var app = new Vue({
            el:'#app',data() {return {
                message: 'hello Vue',
                msgHtml: '

`hello Vue`

',
                isLogin: false,
                items: [1,2,3],
                count:0}},
            methods: {add() {this.count++;}}})script>body>html>

关注我获取到更多！

weixin_39526564

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue change事件_vue起步篇2，从0基础开始到全家桶，vue基础指令

点击上方蓝字关注我吧vue基础指令主要作用是: 模板+数据::: 前端渲染, === 也就是把数据填充到html中去,指令(以 v- 开始)插值表达式: {{}} ---> 将数据填充到Html页面中, 做一些基本的计算操作---> 存在闪动的问题, 使用 v-clock 解决<div>{{msg}}div>12v-clock: 解决闪动 , 需要提供样式 ...
复制链接

扫一扫