Vue学习笔记-CSDN博客

本文链接：https://blog.csdn.net/weixin_53288602/article/details/126985165

一、Vue基础

1.1 Vue是一个渐进式的框架

渐进式意味着你可以将Vue作为你应用的一部分嵌套其中
Vue的核心库以及其生态系统
Core + Vue-router + Vuex

1.2 Vue安装方式

二. Vue基础语法

模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

文本渲染指令

v-html
后面往往跟一个string类型
会将string的html解析出来并渲染

v-text
与Mustache相似, 一般不用, 不灵活

条件判断

v-if
v-else-if
v-else

v-show

当条件为false的时
v-if: 指令的元素, 不会渲染到dom中
v-show: dom增加一个行内样式display: none

遍历指令

// 遍历过程中, 没有使用索引值
<li v-for="item in names">{{item}}</li>
// 遍历过程中, 获取索引值
<li v-for="(item, index) in names">{{index + 1}} - {{item}}</li>
// 遍历对象的时候, 只有一个值, 获得的是value
// 获取对象的key和value
<li v-for="(value, key) in names">{{value}} - {{key}}</li>
// 获取对象的key和value和index
<li v-for="(value, key, index) in names">{{value}} - {{key}} - {{index}}</li>

官方推荐, 使用v-for的时候, 加上一个 key属性

<li v-for="(item, index) in names" :key="item">{{index + 1}} - {{item}}</li>

key要具有唯一性, 不然就没意义

事件

v-on

作用: 绑定事件监听
简写: @
写法:

没有参数的情况下, 可以不写(); 如果方法本身有一个参数, 会默认将原生事件event参数传递进去
如果传入某个参数, 同时需要event时, 可以通过$event传入时间

修饰符	作用	实际调用
.stop	阻止事件冒泡	event.stopPropagation()
.prevent	阻止默认行为	event.preventDefault()
.once	只触发一次回调函数

表单

v-model表单绑定

实现表单元素和数据的双向绑定

<div id="app">

<input type="text" v-model="message">

{{message}}

</div>


cosnt app = new Vue({

el: '#app',

data: {

message: '你好'

}

})


// 界面的message数据改了, data里面的message就改变了, 是双向的

其他方法实现双向绑定


// v-bind绑定一个value属性
// v-on指令给当前元素绑定input事件  
// 下面代码 等同于 使用v-model
 
<div id="app">
    <input type="text" :value="message" @input="message = $event.target.value">
    {{message}}
</div>
 
cosnt app = new Vue({
    el: '#app',
    data: {
        message: '你好'
    }
})

修饰符	作用
.lazy	可以让数据只有在失去焦点时或回车时才会更新
.number	当做数字类型进行处理
.trim	可以过滤内容左右两侧的空格

计算属性 computed

使用: 需要将多个数据结合起来进行显示的时候

<div id='app'>


// 使用拼接的方法 -- 语法太过繁琐

<h2>{{firstName + '' + lastName}}</h2>

<h2>{{firstName}} {{lastName}}</h2>


// 使用方法

<h2>{{getFullName()}}</h2>


// 使用计算属性 -- 看起来最舒服 最好

<h2>{{fullName}}</h2>

</div>



const app = new Vue({

el: '#app',

data:{

firstName: 'li',

lastName: 'er'

},

// 计算属性

computed: {

fullName: function () {

reture this.firstName + '' + this.lastName

}

},

// 方法

methods: {

getFullName () {

reture this.firstName + '' + this.lastName

}

}

})

computed / methods区别

多次使用的时候