vue学习笔记

最新推荐文章于 2024-05-31 16:22:19 发布
最新推荐文章于 2024-05-31 16:22:19 发布
阅读量821 收藏
点赞数
分类专栏： Vue 文章标签： 学习 java 网络
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MXqihang/article/details/123308331
版权

文章目录

VUE

快速入门

CDN方式引入VUE

min时生产模式

  1. https://cdn.staticfile.org/vue/2.2.2/vue.min.js
  2. https://unpkg.com/vue/dist/vue.js
  3. https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
  4. https://cdn.jsdelivr.net/npm/vue/dist/vue.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>

创建vue实例

<body>
  <div id="app">{{message}}</div> 
  <div >{{message}}</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
  var vm = new Vue({
    el: "#app"
    data(){
    return{
      message: "我的世界"
    }
  }
  })
</script>

el:属性表示 Vue实例挂在的节点，该属性值可以是一个 CSS 选择器，也可是HTMLElement

7-11行 创建了一个vue实例

第2行 定义 id为app 的DOM元素，所以会显示 我的世界

第3行 未给定id 的元素不会被 Vue影响到 {{message}}

属性

data属性表示Vue 实例中的数据，data接收一个Object或者返回一个对象数据的函数Function，当Vue实例被创建时，会把data中的所有属性加入到Vue到响应式系统中，这些属发生改变时，视图也会同时更新

常用指令

Vue 指令是带有 v- 前缀的特殊 attribute，它的值是一个表达式，指令帮助我们操作 DOM，当表达式的值发生改变时更新渲染 DOM

指令作用其他说明
v-text{{}}一样用于数据绑定是元素InnerText属性
v-html绑定一段html标签是元素innerHTML
v-bind给元素属性赋值
v-bind:属性名=变量名		例如：v-bind:name=“message”
v-for列表循环渲染
v-for=“item in data”		data可以是数组或者对象
—
v-if添加删除DOM元素true,false
v-show显示英寸HTML标签true,false
—
v-ifv-else-ifv-else
v-on用于绑定事件
v-on:事件=“方法”		v-on:click=“alert”
v-model实现数据双向绑定
v-pre跳过所在元素和它子元素的编译过程
v-once模版在第一次更新时显示数据，此后根须DOM应用数据时，内容不会更新

v-text

使用了 v-text 指令，它绑定 message 值，会将 message 的值动态插入 <div> 标签内。

<body>
  <div id="app"> 
    <div v-text="message"></div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
 var vm = new Vue({
	el: '#app',
  data: {
  	message: "Hello!"
  },
})
</script>

v-html

使用了 v-html 指令，它绑定 message 值，会将 html 元素插入 <div> 标签内。

<body>
  <div id="app">
    <div v-html="message"></div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
 var vm = new Vue({
    el: '#app',
    data: {
    	message: "<div>您好，我是小慕！</div>",
    }
  })
</script>

v-bind

v-bind:title="message"

vue 还提供了指令 v-bind 的简写方式，可以直接通过:属性名的方式。

<body>
  <div id="app">
    <div> 
      <img v-bind:src="src"/> 
    </div>
    <div>
      <button :disabled="disabled">禁用按钮</button>
    </div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data: { 
      src: 'www.baidu.com',
      disabled: true
    }
  })
</script>

v-for

v-for = “item in data”

v-for="(item,index) in data"

  • data 需要遍历的数组元素
  • item： 循环变量( 当次元素的变量 例如：item.name, item.age)
  • index： 数组脚标
渲染数组

使用 v-for 对数组进行遍历，循环输出<li></li>，并在每次循环的时候将 name 插入到 <li> 标签内。

<body>
  <div id="app">
    <ul>
      <li v-for="item in arr">{{item.name}}</li>
    </ul>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
  el: '#app',
  data() {
    return {
      // 要循环的数组
      arr: [
        { name: '青花瓷' },
        { name: '阳光总在风雨后' },
        { name: '十年' }
      ]
    }
  }
})
</script>
对象渲染

对数组进行循环的时候，item 表示对象中某一属性的值：

<div id="app">
    <ul>
        <li v-for="item in obj">{{item}}</li>
    </ul>
</div>
</body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data() {
            return{
                obj:{ name: '微笑',
                       age: '18',
                     sex: '男',
                }
            }
        }
    })
</script>

v-if 、v-show

通过设置v-if，v-show的true，或false 来在页面中显示或者隐藏标签

v-if：根据表达式值在DOM中生成或移除一个元素

v-show:根据表达式的值通过样式的改变来显示或隐藏HTML元素

    <div>
        <button>按钮</button>
    </div>
    <div>
        <button id="show" v-show="delectB" >删除，控制v-show显隐</button><br>
        <button v-on:click="delectB = true">显示</button>
        <button v-on:click="delectB = false ">删除</button>
    </div>
</div>
</body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                delectB: true
            }
        }
    })
</script>

v-if 、v-else、v-else-if

Number 的值来判断对应的语句

<div id="app">
    <div v-if="number === 1">
      A
    </div>
    <div v-else-if="number === 2">
      B
    </div>
    <div v-else>
     C
    </div>
</div>

v-on

对应 DOM Event对象

要给元素绑定事件，vue 中提供了指令 v-on 来进行事件的绑定。用法：v-on:事件名="方法"，例如：v-on：click=“alert”

属性事件
onabort图像的加载被中断。
onblur元素失去焦点。
onchange域的内容被改变。
onclick当用户点击某个对象时调用的事件
ondblclick当用户双击某个对象时调用的事件
onerror在加载文档或图像时发生错误。
onfocus元素获得焦点。
onkeydown某个键盘按键被按下。
onkeypress某个键盘按键被按下并松开
onkeyup某个键盘按键被松开。
onload一张页面或一幅图像完成加载。
onmousedown鼠标按钮被按下。
onmousemove鼠标被移动。
onmouseout鼠标从某元素移开。
onmouseover鼠标移到某元素之上。
onmouseup鼠标按键被松开。
onreset重置按钮被点击。
onresize窗口或框架被重新调整大小。
onselect文本被选中
onsubmit确认按钮被点击。
onunload用户退出页面。

v-model

通过v-modelage变动动时，input中的也会修改

<div id="app">
    <input v-model="age"/>
    <div>{{age}}</div>
    <button @click="add">age+1</button>
</div>
</body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: { age: 10 },
        methods: {
            add(){this.age = this.age + 1;}
        }
    })
</script>

v-pre

3行使用 v-pre 不会被vue 解析 输出 {{age}}

4行正常输出 10

<body>
  <div id="app">
    <div v-pre>当前输入的年龄是: {{age}}</div>
    <div>当前输入的年龄是: {{age}}</div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
	el: '#app',
  data: {
  	age: 10
  }, 
})
</script>

v-once

*页面加载完成后，此行标签不会收到 动态影响 age显示最初的赋值

<div v-once>当前输入的年龄是: {{age}}</div>

计算属性 computed

如果在模版中编写计算{{v1 * v2}}大量编写会让模版复杂

使用computed可以解决此类问题，computed必须有返回值

computed和methods区别：计算属性基于它**依赖的缓存**，计算属性的改变取决于它依赖的数据的变化，值要依赖的数据不发生改变，计算属性就不会更新。而使用 methods每次都会重新计算一边，会有一定的性能消耗。

<body>
    <div id="app">
        <h1>value1：{{v1}}</h1>
        <h1>value2：{{v2}}</h1>
        <h1>结果：{{ride}}</h1>
    </div>
</body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data:{
          v1: 3,
          v2: 10
        },
        //计算属性
        computed: {
            ride() {
                return this.v1*this.v2;
            }
        }
    })
</script>

计算属性会随者 v1或v2的改变重新渲染到页面上

getter/setter

每一个计算属性都包含一个 getter和一个setter

  • getter：来读取
  • setter：当修改计算属性都值就会触发 setter函数，执行自定义操作
<body>
<div id="app">
    <h1>字符1{{name1}}</h1>
    <h1>字符2{{name2}}</h1>
    <h1>计算结果{{str}}</h1>
</div>
</body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data:{
            name1: "天",
            name2: "我"
        },
        methods: {
        },
        //计算属性
        computed: {
            str:{
                get: function () {return this.name1+"-"+this.name2},
                set: function(newVlaue){
                    console.log(newVlaue)
                    var s = newVlaue.split("-")
                    this.name1=s[0]
                    this.name2=s[s.length-1]
                }
            }
        }
    })
</script>

监听器 watch

watch实际是vue实例的一个对象属性，当我们需要对vue实例上某个属性进行监听时，需要以监听的属性名作为watch对象的键，一个函数fucntion作为该键的值。函数接收两个参数newValue和oldValue变化的值，和原先的值

var vm = new Vue({
  el: '#app',
  data() {
    return {
      count: 0
    }
  },
  watch: {
    count: function(newVal, oldVal) {
      // 具体处理逻辑
    },
  }
})

//例子
<body>
<div id="app">
    <input v-model="count">
    <button v-on:click="cut">减1</button>
    <button v-on:click="add">加1</button>
</div>
</body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            count: 0,
        },
        methods: {
            cut() {this.count = this.count-1;},
            add() {this.count = this.count+1;}
        },
        //监听
        watch: {
            count:function(newVal,oldVal){
                if(newVal > 10) this.count = 3;
                if(newVal < 0 ) this.count = 5;
            }
        }
    })
</script>

对象的监听

'对象.属性' 的方式来监听值的变化

<body>
<div id="app">
    <input v-model="p.name">
</div>
</body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            p:{ name: "我" }
        },
        methods: {},
        //监听
        watch: {
            'p.name' :function (newVal,odlVal) {
                console.log(newVal , odlVal)
            }
        },
    })
</script>

immediate 绑定时触发一次

给监听器一个 immediate属性，设置为ture，编写handler函数，在页面渲染的时候就会触发 handler函数

<div id="app">
    <input v-model="p.name">
</div>
</body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            p:{ name: "我" }
        },
        methods: {},
        //监听
        watch: {
            'p.name': {
                handler(newVal,oldVal){ console.log(newVal) },
                immediate: true//在渲染页面时运行 handler方法
            }
        },
    })
</script>

handler 函数

当watch监听到数据变动时默认就是调用handler函数

deep 深度监听

添加deep属性设置 true 能进行深入观察，监听器会一层层的往下遍历，给对象所有属性都加上这个监听器，修改里面任何一个属性都会触发这个监听器里的handlerdd1

<body>
<div id="app">
    <input v-model="p.name">
    <input v-model="p.age">
</div>
</body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            p:{
                name: "我",
                age: 19
            }
        },
        //监听
        watch: {
            p:{
                handler(newVal, oldVal) {
                    console.log(newVal)
                },
                deep: true
            }
        },
    })
</script>

事件处理

在uve中除了methods的事件绑定以外还可以使用原生的DOM

$传入

<button v-on:click="setCount(10, $event)"> 设置为 10 个 </button>

methods: {
        setCount(count, event) {
          this.count = count
          console.log(event)
        }
      }
事件修饰符

event.preventDefault(): 用来取消事件的默认动作

event.stopPropagation(); 用来阻止事件冒泡到父元素，阻止任何事件处理程序被执行

Vue提供了以下事件修饰符：

  1. stop：阻止单机事件继续传播
  2. prevent: 只有修饰符，提交事件不在重载页面
  3. captrue: 添加事件监听器时使用事件捕获模式，即使元素自身触发的事件现在自身处理，然后交由内部元素进行处理
  4. self: 只有在event.target时当前元素自身时触发 处理函数，即事件不是从内部元素触发的；
  5. once：点击事件将只触发一次
  6. pasive：滚动事件立即触发，不会等待其他串联事件，即prevent会失效
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

数据双向绑定2

复选框

    <div>
      <input type="checkbox" id="food" value="食品" v-model="types">
      <label for="food">食品</label>
      <input type="checkbox" id="book" value="图书" v-model="types">
      <label for="book">图书</label>
      <input type="checkbox" id="clothes" value="衣服" v-model="types">
      <label for="clothes">衣服</label>
    </div>

  data: {
  	types: []
  },

下拉框

      <select v-model="company">
        <option value="">请选择</option>
        <option>顺丰</option>
        <option>中通</option>
        <option>圆通</option>
      </select>
data: {
  	company: ''
  },

number 、trim

//用户输入改为数值类
<input v-model.number="age" type="number">

//过滤前后空白
<input v-model.trim="str">

底部

使用文本版本不一样这里是bug

  1. 对象监听的是地址值 ↩︎

  2. 扩展运用 ↩︎

黑色幽默595
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue li快速定位功能
wusq的博客
03-29 594
1.功能描述 如图，监听输入框输入的内容，自动定位到第一个匹配的内容 2.完整代码 <template> <div> <el-input v-model="searchVal" placeholder="输入内容快速定位" class="anchor-input" clearable @input="searchValIpt" /> <div class="list"> <ul> <li v-
Vue学习笔记（尚硅谷天禹老师）
热门推荐
qq_55593227的博客
08-15 31万+
Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网 英文官网 中文官网 1.1.2. 介绍与描述 动态构建用户界面的渐进式JavaScript框架 作者：尤雨溪 1.1.3. Vue的特点 遵循MVVM模式 编码简洁，体积小，运行效率高，适合移动/PC端开发 它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联 借鉴 Angular 的模板和数据绑定技术 借鉴 React 的组件化和虚拟DOM
安装vue-li
qq_42453104的博客
04-21 761
安装vue-li 2020年4月21日，我决定开始从CSND上记录工作中遇到的一些问题及具体的解决思路，以便以后碰到同类问题之后重复踩雷，也是对工作的一个小总结吧。希望自己可以坚持下来把这件事情一直做下去。 ...
认识Vue
qq_39569130的博客
04-13 246
# 1.Vue-为何学 ## 举例 1. 速度对比 ![image-20210317180201113.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1855bd0a374a4a6eae4305ca4a95c7c2~tplv-k3u1fbpfcp-watermark.image?) 2. 例如: 把数组数据-循环铺设到li中, 看看分别如何做的? * 原生js做法 ```vue <ul id="myUl"></ul
Vue动态创建li标签
YY的博客
11-19 1625
Vue动态创建li标签
vue中动态生成li，并且选中的li动态改变背景色
wangchaohpu的博客
12-26 7046
【代码】vue中动态生成li，并且选中的li动态改变背景色。
Vue学习笔记
04-29
最火的前端框架VUE学习中所记录的所有笔记，其中包括了一些案例，如果亲自动手，按照笔记完整的走一遍代码，VUE也就学的差不多了，简单的开发是不成问题的。
VUE学习笔记
07-17
VUE学习笔记
vue学习笔记vue学习笔记
08-14
vue学习笔记vue学习笔记
vue使用li标签模拟树效果
莫不静好
11-12 1436
返回数据格式为 子节点和父节点字段名称不一致 &lt;el-tab-pane label="充电站"&gt; &lt;ul class="firstLevel"&gt; &lt;li v-if="item.chargingStationShortName" v-for="(item,index) in permissionData" :key
vue实现li新增修改删除
weixin_43787161的博客
07-18 779
vue实现li新增修改删除。
Vue动画之li列表动画的实现
量子前端的博客
09-27 3443
界面是这样的。 核心CSS类样式： <style type="text/css"> ul{ list-style: none; } /*进入前*/ .v-enter,.v-leave-to{ opacity: 0; transform:translateY(80px); } /*结束后*/ .v-enter-active,.v-leave-active{ transition: all 0.4s ease; } li{ line
vue（一）——vue-cli的搭建
joyce_yjh的博客
01-04 1142
一、安装vue-li：$ sudo npm install -g vue-climac环境提高权限，Windows则不用sudo//vue init webpack 项目名称 vue init webpack webpack-demo-sell（vue可用来查询vue命令，输入vue之后会出现vue <command> [options]）接下来会有配置选项：？Project name my-vue
学习整理 docker
wonder_dog的博客
05-31 225
nexus。
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1201
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
前端技术入门学习：探索数字世界的奇幻之旅
qwertyhn_0024的博客
05-27 229
HTML定义了网页的结构和内容，CSS负责样式和布局，而JavaScript则实现了网页的交互功能。对于初学者来说，前端技术既是一个充满魅力的新世界，也是一个充满挑战与困惑的领域。本文将引导您从四个方面、五个方面、六个方面和七个方面深入理解前端技术，开启您的学习之旅。在这个过程中，我们需要不断探索、学习和实践，才能逐步掌握这门技艺的精髓。同时，我们也需要保持敏锐的洞察力和开放的心态，不断适应和应对前端技术领域的变化和发展。同时，随着人工智能、大数据等新技术的不断涌现，前端技术也将面临更多的挑战和机遇。
超大功率光伏并网逆变器学习(三相) 一
最新发布
我的博客
05-31 319
1.超大功率用的IGBT开关频率通常很低,比如6KHz。2.线电压和相电压的关系。
Android学习之ION memory manager
我的博客
05-28 1057
ion_device是miscdevice的封装，buffers是存放ion_buffer对象的根结点，heaps为存放ion_heap对象的列表，custom_ioctl为自定义的操作函数，clients为客户端根结点。每一种类型的memory都对应一个ion_heap类型的对象，ion_heap的对象存放在dev中，内存的类型存放做type中，ops为内存的操作函数指针。ION 模块是可扩展的（API都是统一的），支持各种形式的内存分配方式，可以表述不同的硬件资源和他们的一些限制。
尚硅谷vue学习笔记
08-18
很高兴回答你关于尚硅谷Vue学习笔记的问题！对于Vue的学习，尚硅谷提供了很多优质的学习资源和教程。下面是一些关键的学习笔记要点： 1. Vue基础：了解Vue的基本概念和核心特性，如Vue实例、模板语法、计算属性、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值